Real User Monitoring and Web Vitals

Google's web-vitals npm package provides a simple API for measuring Core Web Vitals in real user browsers. Install it with npm install web-vitals and import individual metric callbacks: onLCP, onFID (deprecated), onCLS, onFCP, onTTFB, and the modern onINP for Interaction to Next Paint.

Each callback (onLCP, onCLS, onINP, etc.) receives a metric object containing: name ('LCP'), value (milliseconds or unitless score), rating ('good', 'needs-improvement', 'poor'), and id (a unique identifier for deduplication). The callback fires once the metric value is finalized.

Use the Navigator.sendBeacon API or fetch to report metrics to your analytics endpoint. sendBeacon is preferred because it continues even after the page unloads — critical for metrics like CLS that finalize on page hide. Batch all metric reports into a single beacon when possible.

To integrate Web Vitals into OpenTelemetry, create Gauge instruments for each metric: const lcp = meter.createObservableGauge('web_vitals.lcp'). In each onLCP callback, record the value with relevant attributes (page path, device type). Your observability backend can then alert on P75 LCP regressions.

For measuring React-specific performance not captured by Web Vitals, use the User Timing API: performance.mark('render-start') before rendering, performance.mark('render-end') after, then performance.measure('component-render', 'render-start', 'render-end'). These measures appear in Chrome DevTools Performance tab.

The React Profiler component wraps a subtree and calls its onRender callback with timing data: id (Profiler id), phase ('mount' or 'update'), actualDuration (render time), baseDuration (estimated render time without memoization). Use this in development to identify slow components.

Unhandled errors and Promise rejections can be captured as OTel spans with error status. Set up global listeners: window.addEventListener('error', handler) and window.addEventListener('unhandledrejection', handler). Create a span, set span.setStatus({ code: SpanStatusCode.ERROR }), add the error message and stack trace as attributes, then end the span.

React Error Boundaries catch rendering errors in the component tree. In the componentDidCatch method, create an OTel span representing the error, set its status to ERROR, attach the error.message and componentStack as attributes, and call span.end(). This routes React rendering errors into your distributed trace pipeline.

Minified production JavaScript produces unreadable stack traces like "a.b at bundle.min.js:1:84721". Upload source maps to Sentry, Datadog, or your OTel pipeline during your CI/CD build process so that raw stack traces are automatically resolved to the original TypeScript file names and line numbers.

Sending full trace data for every session is expensive. Implement session sampling: randomly assign a sessionSampled flag on first page load and store it in sessionStorage. Only initialize the OTel SDK and send traces for sampled sessions (e.g., 10%). Always sample sessions with errors at 100%.

Web Vitals reported as OTel metrics enable SLO-based alerting: if P75 LCP exceeds 2.5 seconds for more than 5% of sessions over a 1-hour window, fire an alert. This gives engineering teams actionable signals tied directly to user experience rather than backend infrastructure metrics.

When does the onLCP callback from the web-vitals library fire?

The web-vitals library provides simple callbacks for measuring LCP, INP, CLS, FCP, and TTFB in real user browsers. Report these as OTel metrics for SLO-based alerting, capture errors via global listeners and React Error Boundaries as OTel spans, and upload source maps to resolve minified stack traces. Sample sessions to manage data volume while preserving 100% error coverage.