Observabilidade

Observabilidade em Frontend

Error tracking (Sentry), RUM (Real User Monitoring), logs estruturados e Core Web Vitals em produção.

Definição

Observabilidade front-end cobre: 1) Error Tracking (Sentry, Bugsnag): capturar e agrupar exceções JS com stack trace e contexto do usuário. 2) RUM (Real User Monitoring): métricas reais de performance de usuários reais (Vercel Analytics, Datadog RUM). 3) Session Replay (LogRocket, FullStory): replay de sessões para reproduzir bugs. 4) Logs estruturados: enviar eventos ao backend. 5) Feature flags: rollout gradual com observação de impacto.

Problema → Solução

Problema

Bug em produção que não aparece em dev. Reclamação de usuário "o site está lento" sem dados para investigar. Não saber qual % dos usuários está experimentando um erro.

Solução

Sentry para error tracking (instalar em _app.tsx / layout.tsx). Vercel Analytics ou web-vitals para Core Web Vitals de usuários reais. Breadcrumbs de navegação para contexto de bugs. Source maps no Sentry para stack traces legíveis.

Dica de entrevista

Tip

Instale Sentry no dia 1 de produção. Erros JS silenciosos são invisíveis sem error tracking. Configurar alertas para erros novos e aumentos de taxa de erro. Source maps são obrigatórios — sem eles, stack traces são inúteis em código minificado.

Código

// Sentry no Next.js App Router
// instrumentation.ts
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./sentry.server.config')
  }
  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('./sentry.edge.config')
  }
}

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 0.1,      // 10% de transactions
  replaysOnErrorSampleRate: 1, // 100% de sessões com erro
  integrations: [
    Sentry.replayIntegration({ maskAllText: true }), // privacidade
  ],
})

// Web Vitals — reportar para analytics
export function reportWebVitals(metric) {
  // Enviar para Vercel Analytics, DataDog, ou custom
  if (metric.name === 'LCP' && metric.value > 2500) {
    Sentry.captureMessage('LCP above threshold', {
      level: 'warning',
      extra: { value: metric.value, url: window.location.href },
    })
  }
}

// Contexto de usuário para melhor debug
Sentry.setUser({ id: user.id, email: user.email })

Perguntas de entrevista

Q.Como fazer source maps sem expor código em produção?▾

A.Fazer upload dos source maps para o Sentry mas não servir para o browser. next.config.ts: `sentry: { hideSourceMaps: true }`. Ou configurar SOURCEMAP_SENTINEL=false para omitir a referência no bundle. O Sentry usa os maps internamente para mapear erros, mas não os expõe ao público.

Q.O que é RUM e como difere do Lighthouse?▾

A.Lighthouse: medição em ambiente controlado (lab data), não reflete usuários reais. RUM: coleta métricas do browser de usuários reais em campo (field data) — inclui variações de dispositivo, rede, e localização geográfica. Core Web Vitals no Google Search Console são field data via Chrome User Experience Report (CrUX).

Q.Como correlacionar erro no frontend com log no backend?▾

A.Correlation ID: o front envia um ID único em cada request (header X-Correlation-ID). O backend loga com esse ID. Quando um erro ocorre no frontend, o Sentry captura o correlation ID como contexto — facilita achar o log do servidor que corresponde ao erro do cliente.

66/122← →