RUM, errors, and synthetic tests — in 3 clear tracks
No complex menus. Start with real user signals (Web Vitals + errors), validate critical journeys with synthetic checks, then wire alerts that reflect real user impact.
Quick start checklist
Start with the minimum signals that improve frontend reliability immediately.
Capture Web Vitals (LCP/CLS/INP), route performance, and key network signals.
See error spikes by release, route, and browser—prioritize issues by affected users.
Run synthetic checks for login/checkout to catch outages and regressions before users.
Frontend playbook
Expand a track and execute it. Docs-only links (no videos).
Track 1 — See real user experience•20 minutes•Frontend / QARUM + Web Vitals
Capture Web Vitals (LCP/CLS/INP), JS errors, and key network signals with release + environment context.
Real users
RUM + Web Vitals
Capture Web Vitals (LCP/CLS/INP), JS errors, and key network signals with release + environment context.
- 1
Install the Watchlog RUM SDK for your framework (React/Vue/SPA).
- 2
Add the provider/plugin at app entry and set your API key.
- 3
Enable Web Vitals and JS error capture; turn on network capture if relevant.
- 4
Set release version and environment to compare performance before/after deployments.
- 5
Open the RUM dashboard and review slow routes and top recurring errors.
You’ll know which release/route degraded experience—and how many users are affected.
- INP/LCP degradation on critical routes
- Sudden spike in JS error rate
Track 2 — Keep key flows healthy•30 minutes•QA / FrontendBrowser synthetic checks for critical journeys
Run scheduled checks for your most important journeys (login, checkout, signup) to detect breakage early.
Always-on checks
Browser synthetic checks for critical journeys
Run scheduled checks for your most important journeys (login, checkout, signup) to detect breakage early.
- 1
Pick 2–3 critical journeys (e.g., login, checkout, signup).
- 2
Create a new browser synthetic check and define the steps.
- 3
Set schedule (e.g., every 5 minutes) and choose locations if available.
- 4
Define thresholds for status codes and response times.
- 5
Review results weekly and tune thresholds to match baselines.
You learn about failures before users do, and you can triage faster with consistent evidence.
- Non-2xx / failure on critical journey
- Response time above threshold
Track 3 — From data to action•25 minutes•Frontend / ProductAlerts based on user impact
Turn signals into outcomes: alert on affected users, error spikes, and route regressions, then share weekly reports.
Actionable alerts
Alerts based on user impact
Turn signals into outcomes: alert on affected users, error spikes, and route regressions, then share weekly reports.
- 1
Create a watchlist for high-impact errors (e.g., ChunkLoadError, TypeError).
- 2
Alert on error rate + affected users count (not only total events).
- 3
Add separate monitoring for critical routes (e.g., /checkout) to reduce noise.
- 4
Generate a weekly report from RUM/errors dashboards and share with the team.
When a recurring error happens, the team is notified with impact context—not just raw logs.
- Affected users above threshold
- Error spike right after a new release
We’ll map the best frontend starting track for your team
Tell us your stack and critical journeys. We’ll suggest the right signals, thresholds, and dashboards—without alert spam.