Monitoramento de usuários reais e Web Vitals

O pacote npm web-vitals do Google fornece uma API simples para medir os Core Web Vitals nos navegadores de usuários reais. Instale-o com npm install web-vitals e importe funções de retorno individuais de métricas: onLCP, onFID (obsoleto), onCLS, onFCP, onTTFB e a moderna onINP para Interação até a Próxima Pintura.

Cada função de retorno (onLCP, onCLS, onINP etc.) recebe um objeto de métrica que contém: name ('LCP'), value (milissegundos ou uma pontuação sem unidade), rating ('good', 'needs-improvement', 'poor') e id (um identificador exclusivo para deduplicação). A função de retorno é executada quando o valor da métrica é finalizado.

Use a API Navigator.sendBeacon ou uma solicitação de rede para enviar métricas ao seu ponto de extremidade de análise. sendBeacon é preferível porque continua funcionando mesmo depois que a página é descarregada — algo essencial para métricas como CLS, finalizadas quando a página fica oculta. Sempre que possível, reúna todos os envios de métricas em um único envio.

Para integrar os Web Vitals ao OpenTelemetry, crie instrumentos de medição para cada métrica: const lcp = meter.createObservableGauge('web_vitals.lcp'). Em cada função de retorno onLCP, registre o valor com atributos relevantes (caminho da página, tipo de dispositivo). Seu back-end de observabilidade poderá então gerar alertas sobre regressões do P75 LCP.

Para medir o desempenho específico do React que não é capturado pelos Web Vitals, use a API de temporização do usuário: performance.mark('render-start') antes da renderização, performance.mark('render-end') depois e, em seguida, performance.measure('component-render', 'render-start', 'render-end'). Essas medições aparecem na guia Desempenho do Chrome DevTools.

O componente Profiler do React envolve uma subárvore e chama sua função de retorno onRender com dados de temporização: id (ID do Profiler), phase ('mount' ou 'update'), actualDuration (tempo de renderização), baseDuration (tempo de renderização estimado sem memoização). Use-o durante o desenvolvimento para identificar componentes lentos.

Erros não tratados e rejeições de promessas podem ser capturados como intervalos do OpenTelemetry com status de erro. Configure ouvintes globais: window.addEventListener('error', handler) e window.addEventListener('unhandledrejection', handler). Crie um intervalo, defina span.setStatus({ code: SpanStatusCode.ERROR }), adicione a mensagem de erro e o rastreamento da pilha como atributos e finalize o intervalo.

Os limites de erro do React capturam erros de renderização na árvore de componentes. No método componentDidCatch, crie um intervalo do OpenTelemetry que represente o erro, defina seu status como ERROR, associe error.message e componentStack como atributos e chame span.end(). Assim, os erros de renderização do React são encaminhados para o fluxo de rastreamento distribuído.

O JavaScript de produção minimizado produz rastreamentos da pilha ilegíveis, como "a.b at bundle.min.js:1:84721". Envie mapas de origem para o Sentry, o Datadog ou seu fluxo do OpenTelemetry durante o processo de compilação de CI/CD, para que os rastreamentos brutos sejam automaticamente resolvidos para os nomes originais dos arquivos TypeScript e os números das linhas.

Enviar dados completos de rastreamamento para cada sessão é caro. Implemente a amostragem de sessões: atribua aleatoriamente um indicador sessionSampled no primeiro carregamento da página e armazene-o em sessionStorage. Inicialize o SDK do OpenTelemetry e envie rastreamentos somente para sessões amostradas (por exemplo, 10%). Sempre faça a amostragem de 100% das sessões com erros.

Os Web Vitals informados como métricas do OpenTelemetry permitem alertas baseados em SLO: se o P75 LCP exceder 2,5 segundos em mais de 5% das sessões durante uma janela de 1 hora, dispare um alerta. Isso fornece às equipes de engenharia sinais acionáveis diretamente relacionados à experiência do usuário, em vez de métricas da infraestrutura de back-end.

Quando a função de retorno onLCP da biblioteca web-vitals é acionada?

A biblioteca web-vitals fornece funções de retorno simples para medir LCP, INP, CLS, FCP e TTFB nos navegadores de usuários reais. Informe essas métricas como métricas do OpenTelemetry para permitir alertas baseados em SLO, capture erros por meio de ouvintes globais e limites de erro do React como intervalos do OpenTelemetry e envie mapas de origem para resolver rastreamentos da pilha minimizados. Faça a amostragem das sessões para controlar o volume de dados, preservando 100% da cobertura de erros.