# Frontend Observability: RUM, Logs, and Performance Monitoring

Source: https://www.techinterview.org/post/3233475192/frontend-observability-rum-performance/
Updated: 2026-05-05 · techinterview.org

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.