Web Vitals reporting to an API endpoint

12113 views

                  export function reportWebVitals(metric: { name: string; value: number; id: string }) {
  if (Math.random() > 0.05) return;
  navigator.sendBeacon(
    '/api/vitals',
    JSON.stringify({ name: metric.name, value: metric.value, id: metric.id, path: location.pathname })
  );
}

Synthetic performance tests don’t always match what real users experience. Web Vitals reporting gives you field data (CLS, LCP, INP, etc.). I collect vitals on the client and POST them to a lightweight endpoint, then aggregate on the backend. Sampling is key—send 1–5% of sessions so you don’t drown in data. I also strip PII and include only minimal context like route and device type. Once vitals are in dashboards, performance work becomes measurable instead of vibes-based, and regressions after deploys get much easier to spot.

Mateo Rodriguez

More from Mateo Rodriguez

Web Vitals reporting to an API endpoint

0 Comments

More from Mateo Rodriguez