Frontend Observability: RUM, Logs, and Performance Monitoring

By /
⏱ 3 min read

Frontend observability is one of the biggest gaps at most companies. Backend has Datadog, Splunk, Grafana. Frontend often has nothing — engineers find out about bugs from angry tweets. Senior interviews probe whether you understand the modern frontend observability stack.

The categories

  • Real User Monitoring (RUM): performance metrics from real users
  • Error tracking: capture and aggregate JavaScript errors
  • Session replay: watch the user’s actual session
  • Logs: structured logs from the frontend
  • Synthetic monitoring: scripted browser tests on a schedule

RUM (Real User Monitoring)

Capture metrics from actual users:

  • Core Web Vitals (LCP, INP, CLS)
  • Time to First Byte (TTFB)
  • JavaScript errors
  • Custom business metrics

Tools: Datadog RUM, Sentry Performance, New Relic Browser, Cloudflare RUM, custom (web-vitals library + your backend).

web-vitals library

Google’s reference implementation for Core Web Vitals:

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP((m) => sendToBackend(m));
onINP((m) => sendToBackend(m));
onCLS((m) => sendToBackend(m));

Tiny library (~3KB). Send to your endpoint or to a vendor.

Error tracking

Sentry is the industry standard. Capture:

  • Uncaught exceptions (window.onerror)
  • Unhandled promise rejections
  • React error boundaries
  • Manual capture for caught errors you want to track

Sentry features:

  • Automatic source map decoding
  • Grouping by signature
  • User context (which user saw the error)
  • Breadcrumbs (what they did before)
  • Release tracking

Session replay

FullStory, LogRocket, Sentry Session Replay record user sessions. Tradeoffs:

  • Pro: see exactly what the user experienced
  • Con: privacy concerns; PII leak risk
  • Con: storage cost

Mitigations: privacy masking (block sensitive elements), sample sessions (record 1%).

Frontend logs

Send structured logs to backend:

  • Critical user actions (signup, purchase, key feature use)
  • Error context
  • A/B test exposure
  • Feature flag values

Don’t log everything — every log is bandwidth + storage cost. Pick events that matter.

Synthetic monitoring

Scripted browser tests that run on schedule:

  • Catch regressions before users do
  • Measure performance from various locations
  • Validate critical user journeys (signup, checkout)

Tools: Datadog Synthetics, Checkly, Lighthouse CI.

The 75th percentile

Performance metrics should be measured at p75, not avg or median:

  • Average is dominated by fast users; misses tail
  • p75 represents your “slow but not catastrophic” users
  • Google Core Web Vitals reporting uses p75

Segmentation

Always segment metrics:

  • Mobile vs desktop
  • Browser version
  • Geographic region
  • Connection type
  • App version (if you A/B test)

Median p75 hides which subgroups are slow.

Privacy

  • Don’t log PII (emails, names, IDs as primary keys)
  • Mask sensitive form fields in session replay
  • Anonymize user IDs in metrics
  • Honor Do Not Track if your jurisdiction requires
  • GDPR / CCPA compliance for analytics tooling

Cost

Frontend observability is expensive:

  • Sentry: per-event pricing; 100K events/day adds up
  • Session replay: by minutes recorded
  • RUM: per-user-session

Sample aggressively for non-critical events. Prioritize errors over performance metrics.

Common mistakes

  • No frontend observability at all
  • Errors logged to console.error (lost in production)
  • No release tracking — cannot tell if a bug is in v1.5 or v1.6
  • No real-user data — only synthetic
  • PII leaking into logs and session replays

Frequently Asked Questions

Sentry, Datadog, or both?

Sentry for errors. Datadog for performance and logs. Many companies use both. Some unified platforms (Datadog Browser RUM) cover most cases.

Should I roll my own RUM?

Possible but most companies use a vendor. Build vs buy: cost of vendor vs engineering time.

How do I correlate frontend with backend traces?

Use distributed tracing — generate trace ID in frontend, send in headers, backend continues the trace. Datadog and Honeycomb support this.

Scroll to Top