Introdução: O Deploy Não É o Fim, É o Início
Um pipeline CI/CD perfeito não serve de nada se não sabemos o que acontece após o deploy. O monitoramento e os alertas fecham o ciclo DevOps.
O Que Você Aprenderá Neste Artigo
- As três categorias do monitoramento frontend
- Como integrar o Sentry numa aplicação Angular
- Como implementar o Real User Monitoring (RUM)
- Como configurar o synthetic monitoring (uptime check)
- Como criar um Error Handler personalizado no Angular
- Como fazer upload de source maps para debugging em produção
- Estratégias de alertas eficazes
- Como configurar dashboards de monitoramento
1. As Três Categorias do Monitoramento Frontend
Categorias de Monitoramento
| Categoria | O Que Monitora | Ferramentas Típicas | Prioridade |
|---|---|---|---|
| Error Tracking | Exceções JavaScript, erros HTTP, crashes | Sentry, Bugsnag, Rollbar | Crítica |
| Performance Monitoring | Core Web Vitals, tempos de carregamento | web-vitals, SpeedCurve, Datadog RUM | Alta |
| User Behavior | Navegação, interações, funnels | Google Analytics, Mixpanel | Média |
2. Error Tracking com Sentry
Atenção ao Sample Rate
O tracesSampleRate determina quantas transações são enviadas ao Sentry.
Um valor de 1.0 é útil em desenvolvimento mas demasiado custoso em produção.
3. Error Handler Personalizado no Angular
4. Real User Monitoring (RUM)
5. Synthetic Monitoring (Uptime Check)
Serviços de Synthetic Monitoring
- UptimeRobot: Plano gratuito com 50 monitores, verificações a cada 5 minutos
- Pingdom: Monitoramento avançado com análise RUM integrada
- Checkly: Verificações de navegador com Playwright
- Better Uptime: Gestão de incidentes com páginas de status públicas
6. Upload de Source Maps para Debugging
Nunca Servir Source Maps em Produção
As source maps contêm o código-fonte completo. Servi-las publicamente permitiria ler a lógica de negócio.
7. Estratégias de Alertas
Níveis de Alerta Recomendados
| Nível | Gatilho | Canal | Resposta |
|---|---|---|---|
| Crítico (P0) | Site completamente em baixo, erros > 50% | SMS + Slack + PagerDuty | Imediata (15 min) |
| Alto (P1) | Funcionalidade crítica quebrada, error rate > 10% | Slack + Email | Em 1 hora |
| Médio (P2) | Performance degradada, erros > 5% | Slack | Em 4 horas |
| Baixo (P3) | Warnings, tendência negativa | Relatório semanal | Próximo sprint |
8. Dashboard de Monitoramento
9. Comparação das Ferramentas de Monitoramento
10. Implementação Completa: Checklist
Checklist de Monitoramento para o Go-Live
- Sentry configurado e funcional com error handler personalizado
- Source maps enviadas ao Sentry (e removidas do deploy)
- Web Vitals tracking ativo com envio ao Google Analytics
- Uptime monitoring configurado (verificações a cada 5 minutos)
- Alertas configurados para erros críticos (Slack, email)
- Dashboard criado com as métricas essenciais
- Compatibilidade SSR verificada (isPlatformBrowser)
- Sample rate otimizado para o volume de tráfego
Conclusão
Com este artigo concluímos a série DevOps para Desenvolvedores Frontend. O monitoramento em produção fecha o loop do DevOps.