Introduction : Le Déploiement N'est Pas la Fin, C'est le Début
Un pipeline CI/CD parfait ne sert à rien si nous ne savons pas ce qui se passe après le déploiement. La surveillance et les alertes ferment le cycle DevOps.
Ce Que Vous Apprendrez dans Cet Article
- Les trois catégories de surveillance frontend
- Comment intégrer Sentry dans une application Angular
- Comment implémenter le Real User Monitoring (RUM)
- Comment configurer le synthetic monitoring (uptime check)
- Comment créer un Error Handler personnalisé dans Angular
- Comment télécharger les source maps pour le débogage en production
- Stratégies d'alertes efficaces
- Comment configurer des tableaux de bord de surveillance
1. Les Trois Catégories de la Surveillance Frontend
Catégories de Surveillance
| Catégorie | Ce Qu'elle Surveille | Outils Typiques | Priorité |
|---|---|---|---|
| Error Tracking | Exceptions JavaScript, erreurs HTTP, crashs | Sentry, Bugsnag, Rollbar | Critique |
| Performance Monitoring | Core Web Vitals, temps de chargement | web-vitals, SpeedCurve, Datadog RUM | Haute |
| User Behavior | Navigation, interactions, funnels | Google Analytics, Mixpanel | Moyenne |
2. Error Tracking avec Sentry
Attention au Sample Rate
Le tracesSampleRate détermine combien de transactions sont envoyées à Sentry.
Une valeur de 1.0 est utile en développement mais trop coûteuse en production.
3. Error Handler Personnalisé dans Angular
4. Real User Monitoring (RUM)
5. Synthetic Monitoring (Uptime Check)
Services de Synthetic Monitoring
- UptimeRobot : Plan gratuit avec 50 moniteurs, vérifications toutes les 5 minutes
- Pingdom : Surveillance avancée avec analyse RUM intégrée
- Checkly : Vérifications navigateur avec Playwright
- Better Uptime : Gestion des incidents avec pages de statut publiques
6. Téléchargement des Source Maps pour le Débogage
Ne Jamais Servir les Source Maps en Production
Les source maps contiennent le code source complet. Les servir publiquement permettrait de lire la logique métier.
7. Stratégies d'Alertes
Niveaux d'Alerte Recommandés
| Niveau | Déclencheur | Canal | Réponse |
|---|---|---|---|
| Critique (P0) | Site complètement inaccessible, erreurs > 50% | SMS + Slack + PagerDuty | Immédiate (15 min) |
| Haut (P1) | Fonctionnalité critique cassée, error rate > 10% | Slack + Email | Sous 1 heure |
| Moyen (P2) | Performances dégradées, erreurs > 5% | Slack | Sous 4 heures |
| Bas (P3) | Warnings, tendance négative | Rapport hebdomadaire | Prochain sprint |
8. Tableau de Bord de Surveillance
9. Comparaison des Outils de Surveillance
10. Implémentation Complète : Checklist
Checklist de Surveillance pour le Go-Live
- Sentry configuré et fonctionnel avec error handler personnalisé
- Source maps téléchargées sur Sentry (et supprimées du déploiement)
- Web Vitals tracking actif avec envoi à Google Analytics
- Uptime monitoring configuré (vérifications toutes les 5 minutes)
- Alertes configurées pour les erreurs critiques (Slack, email)
- Tableau de bord créé avec les métriques essentielles
- Compatibilité SSR vérifiée (isPlatformBrowser)
- Sample rate optimisé pour le volume de trafic
Conclusion
Avec cet article, nous concluons la série DevOps pour Développeurs Frontend. La surveillance en production ferme la boucle DevOps.