Capítulo 294 de 456

Analytics

Core Idea

Medir performance da aplicação via useReportWebVitals (Pages Router) ou instrumentation-client.js|ts para instrumentação global antes do app iniciar, com opção de enviar dados a serviços externos.

Key Concepts

  • useReportWebVitals (de next/web-vitals): hook chamado em pages/_app.js que recebe um callback com cada métrica reportada.
  • instrumentation-client.js|ts: arquivo na raiz do projeto executado antes do código frontend, ideal pra inicializar analytics/error tracking global.
  • Web Vitals cobertos: TTFB, FCP, LCP, FID, CLS, INP.
  • Métricas custom do Next.js: Next.js-hydration, Next.js-route-change-to-render, Next.js-render (via reportWebVitals exportado, funciona em browsers com User Timing API).
  • Envio a endpoint externo: usar navigator.sendBeacon() (com fallback fetch(..., { keepalive: true })) dentro do callback.

Code Examples

import { useReportWebVitals } from 'next/web-vitals'

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': { /* handle FCP results */ }
      case 'LCP': { /* handle LCP results */ }
    }
  })
  return <Component {...pageProps} />
}
  • O que demonstra: dispatch por metric.name pra tratar cada Web Vital individualmente.
useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})
  • O que demonstra: padrão recomendado de envio confiável de métricas mesmo durante navegação/unload.

Key Takeaways

  1. useReportWebVitals cobre tanto Web Vitals padrão quanto métricas específicas do Next.js (hydration, route-change-to-render).
  2. instrumentation-client.js|ts é o lugar certo pra setup global de analytics/error tracking, roda antes do app.
  3. Prefira sendBeacon a fetch pra não perder eventos em navegação/fechamento de página.
  4. Vercel Analytics é a alternativa gerenciada caso não queira construir a própria solução.

Connects To

  • ch315 OpenTelemetry: outra forma de instrumentação/observabilidade no Next.js.
AnteriorGuidesPróximoAuthentication