Monitorización de usuarios reales y Web Vitals

El paquete npm web-vitals de Google proporciona una API sencilla para medir los Core Web Vitals en navegadores de usuarios reales. Instálelo con npm install web-vitals e importe los callbacks individuales de las métricas: onLCP, onFID (en desuso), onCLS, onFCP, onTTFB y el moderno onINP para Interaction to Next Paint.

Cada callback (onLCP, onCLS, onINP, etc.) recibe un objeto de métrica que contiene: name ('LCP'), value (milisegundos o una puntuación sin unidad), rating ('good', 'needs-improvement', 'poor') e id (un identificador único para eliminar duplicados). El callback se ejecuta cuando el valor de la métrica queda finalizado.

Use la API Navigator.sendBeacon o fetch para informar de las métricas a su endpoint de analítica. Se prefiere sendBeacon porque continúa funcionando incluso después de que se descargue la página, algo fundamental para métricas como CLS, que se finalizan cuando la página se oculta. Agrupe todos los informes de métricas en un único beacon siempre que sea posible.

Para integrar Web Vitals en OpenTelemetry, cree instrumentos Gauge para cada métrica: const lcp = meter.createObservableGauge('web_vitals.lcp'). En cada callback onLCP, registre el valor con los atributos relevantes (ruta de la página, tipo de dispositivo). A continuación, su backend de observabilidad podrá generar alertas sobre regresiones del P75 de LCP.

Para medir el rendimiento específico de React que Web Vitals no captura, use la User Timing API: performance.mark('render-start') antes de renderizar, performance.mark('render-end') después y, a continuación, performance.measure('component-render', 'render-start', 'render-end'). Estas mediciones aparecen en la pestaña Performance de Chrome DevTools.

El componente React Profiler envuelve un subárbol y llama a su callback onRender con datos de temporización: id (identificador de Profiler), phase ('mount' o 'update'), actualDuration (tiempo de renderizado) y baseDuration (tiempo de renderizado estimado sin memoización). Use esta API durante el desarrollo para identificar los componentes lentos.

Los errores no controlados y los rechazos de Promise pueden capturarse como spans de OTel con un estado de error. Configure listeners globales: window.addEventListener('error', handler) y window.addEventListener('unhandledrejection', handler). Cree un span, establezca span.setStatus({ code: SpanStatusCode.ERROR }), añada el mensaje de error y el stack trace como atributos y, a continuación, finalice el span.

React Error Boundaries capturan los errores de renderizado en el árbol de componentes. En el método componentDidCatch, cree un span de OTel que represente el error, establezca su estado en ERROR, adjunte error.message y componentStack como atributos y llame a span.end(). De este modo, los errores de renderizado de React se incorporan a su canalización de trazas distribuidas.

El JavaScript de producción minimizado genera stack traces ilegibles como "a.b at bundle.min.js:1:84721". Cargue los source maps en Sentry, Datadog o su canalización de OTel durante el proceso de compilación de CI/CD para que los stack traces sin procesar se resuelvan automáticamente en los nombres de archivo y números de línea originales de TypeScript.

Enviar los datos completos de las trazas de cada sesión es costoso. Implemente el muestreo de sesiones: asigne aleatoriamente un indicador sessionSampled durante la primera carga de la página y almacénelo en sessionStorage. Inicialice el SDK de OTel y envíe trazas únicamente para las sesiones muestreadas (por ejemplo, el 10 %). Muestree siempre al 100 % las sesiones que contengan errores.

Informar de Web Vitals como métricas de OTel permite generar alertas basadas en SLO: si el P75 de LCP supera los 2,5 segundos en más del 5 % de las sesiones durante un periodo de 1 hora, active una alerta. Esto proporciona a los equipos de ingeniería señales prácticas directamente relacionadas con la experiencia del usuario, en lugar de métricas de la infraestructura del backend.

¿Cuándo se ejecuta el callback onLCP de la biblioteca web-vitals?

La biblioteca web-vitals proporciona callbacks sencillos para medir LCP, INP, CLS, FCP y TTFB en navegadores de usuarios reales. Informe de estas métricas como métricas de OTel para generar alertas basadas en SLO, capture errores mediante listeners globales y React Error Boundaries como spans de OTel, y cargue source maps para resolver los stack traces minimizados. Muestree las sesiones para controlar el volumen de datos y conservar una cobertura del 100 % de los errores.