Guia prático de observabilidade no frontend moderno

Backend tem décadas de cultura de observabilidade. Frontend ainda costuma operar no escuro, descobrindo problemas pelo suporte.

Comece pelas métricas de campo

Lighthouse é laboratório. O que decide a experiência é o dado de campo: LCP, INP e CLS coletados dos usuários reais, segmentados por dispositivo e conexão.

import { onCLS, onINP, onLCP } from "web-vitals";

const report = (metric: { name: string; value: number }) => {
  navigator.sendBeacon("/api/public/vitals", JSON.stringify(metric));
};

onLCP(report);
onINP(report);
onCLS(report);

Erros: agrupe por causa, não por mensagem

• Normalize stack traces com source maps.
• Ignore ruído de extensões de navegador.
• Anexe a rota e a versão do build a cada evento.

Orçamento de performance