Observabilidade

Logs, Traces e Alertas no Frontend

Logs estruturados, distributed tracing do browser ao servidor, e alertas inteligentes.

Definição

Logs estruturados (JSON) são pesquisáveis e analisáveis — melhor que console.log livre. Distributed tracing rastreia um request do clique do usuário até o banco de dados: o frontend emite um trace span, o backend o continua, gerando um grafo causal completo. OpenTelemetry é o padrão aberto para instrumentação. Alertas baseados em anomalia (spike de erros) são melhores que threshold fixo.

Problema → Solução

Problema

Erro no frontend: não sabe se o problema está no cliente, na API, ou no banco. Logs de console em produção que não aparecem em nenhuma ferramenta. Alertas que disparam toda hora por threshold muito baixo (alert fatigue).

Solução

OpenTelemetry no frontend para traces distribuídos. Log structured events (não strings) para ferramentas de observabilidade. Sentry com performance monitoring para ver spans. Alertas baseados em % de aumento (não valor absoluto) para reduzir falsos positivos.

Dica de entrevista

Tip

Prefira eventos de negócio a logs técnicos: "checkout_failed" com {reason, amount, userId} é mais útil que "Error: 400 Bad Request". Eventos de negócio alimentam dashboards de produto e debug ao mesmo tempo.

Código

// Log estruturado — não console.log
function logEvent(name: string, data: Record<string, unknown>) {
  if (process.env.NODE_ENV === 'production') {
    // Enviar para DataDog, Axiom, etc.
    fetch('/api/events', {
      method: 'POST',
      body: JSON.stringify({ name, data, timestamp: Date.now(),
        url: window.location.href, userId: getUser()?.id }),
    })
  } else {
    console.log('[Event]', name, data)
  }
}

// Usar eventos de negócio
logEvent('checkout_started', { cartValue: 99.90, itemCount: 3 })
logEvent('payment_failed', { reason: 'insufficient_funds', amount: 99.90 })

// Error Boundary com Sentry
import * as Sentry from '@sentry/nextjs'

function App() {
  return (
    <Sentry.ErrorBoundary
      fallback={<ErrorPage />}
      onError={(error, componentStack) => {
        // contexto adicional automático
        console.error('Boundary caught:', error)
      }}
    >
      <AppContent />
    </Sentry.ErrorBoundary>
  )
}

// Feature flag com observabilidade
const { isEnabled } = useFeatureFlag('new-checkout')
if (isEnabled) {
  logEvent('new_checkout_viewed', { userId })
}

Perguntas de entrevista

Q.O que é OpenTelemetry e como usar no frontend?▾

A.Padrão aberto para instrumentação (traces, metrics, logs). @opentelemetry/sdk-trace-web instrumenta o browser. Trace inicia no clique do usuário, o span HTTP propaga via headers (traceparent), o backend continua o trace. Resultado: timeline completo do click ao banco no Jaeger, DataDog, ou Grafana Tempo.

Q.Como evitar enviar dados sensíveis para ferramentas de observabilidade?▾

A.Sentry: beforeSend hook para filtrar/sanitizar eventos antes de enviar. SessionReplay: maskAllText: true mascara todo texto. Configurar allowUrls para ignorar erros de extensões do browser. Nunca logar tokens, senhas ou dados pessoais — PII (Personally Identifiable Information) em logs viola LGPD/GDPR.

Q.O que é error boundary e como integrar com Sentry?▾

A.Error Boundary captura erros de render em React e evita que o app inteiro quebre. Integrar com Sentry: Sentry.ErrorBoundary component como wrapper — captura automaticamente o erro, a stack, e os props do componente que falhou. Permite mostrar fallback UI para o usuário enquanto o erro é reportado.

67/122← →