Capítulo 187 de 456

useReportWebVitals

Core Idea

Hook to capture and report Core Web Vitals (TTFB, FCP, LCP, FID, CLS, INP), typically forwarding them to an analytics service. Keep the callback reference stable to avoid duplicate reporting.

Key Concepts

  • useReportWebVitals(callback): Chama callback com cada métrica disponível; requer 'use client'.
  • metric object: { id, name, delta, entries, navigationType, rating, value }.
  • rating: "good" | "needs-improvement" | "poor".

Code Examples

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

const logWebVitals = (metric) => console.log(metric)

export function WebVitals() {
  useReportWebVitals(logWebVitals)
  return null
}

import { WebVitals } from './_components/web-vitals'

export default function Layout({ children }) {
  return (
    <html><body><WebVitals />{children}</body></html>
  )
}
  • O que demonstra: Isola o boundary de cliente num componente separado importado no root layout, minimizando o escopo 'use client'.

Reference Tables

PropriedadeDescrição
idIdentificador único da métrica no carregamento atual
nameNome da métrica (TTFB, FCP, LCP, FID, CLS, INP)
deltaDiferença entre valor atual e anterior
entriesArray de PerformanceEntry associadas
navigationType"navigate", "reload", "prerender", "back-forward", "back-forward-cache", "restore"
rating"good", "needs-improvement", "poor"
valueValor/duração da métrica

Anti-patterns

  • Passar uma nova função a cada render: gera relatórios duplicados; use uma referência estável (definida fora do componente ou memoizada).

Key Takeaways

  1. Envie via navigator.sendBeacon() com fallback para fetch(..., { keepalive: true }) ao reportar para endpoint externo.
  2. Use metric.name num switch para tratar cada Web Vital individualmente.
  3. Para Google Analytics, use metric.id para construir distribuições/percentis.

Connects To

  • Root Layout: local recomendado para montar o componente de coleta uma única vez.
AnteriorusePathnamePróximouseRouter