Einführung: Das Deployment Ist Nicht das Ende, Sondern der Anfang
Eine perfekte CI/CD-Pipeline ist nutzlos, wenn wir nicht wissen, was nach dem Deployment passiert. Überwachung und Alerting schließen den DevOps-Kreislauf.
Was Sie in Diesem Artikel Lernen Werden
- Die drei Kategorien der Frontend-Überwachung
- Wie man Sentry in eine Angular-Anwendung integriert
- Wie man Real User Monitoring (RUM) implementiert
- Wie man Synthetic Monitoring (Uptime Check) konfiguriert
- Wie man einen benutzerdefinierten Error Handler in Angular erstellt
- Wie man Source Maps für Produktions-Debugging hochlädt
- Effektive Alerting-Strategien
- Wie man Überwachungs-Dashboards konfiguriert
1. Die Drei Kategorien der Frontend-Überwachung
Überwachungskategorien
| Kategorie | Was Überwacht Wird | Typische Tools | Priorität |
|---|---|---|---|
| Error Tracking | JavaScript-Exceptions, HTTP-Fehler, Crashes | Sentry, Bugsnag, Rollbar | Kritisch |
| Performance Monitoring | Core Web Vitals, Ladezeiten | web-vitals, SpeedCurve, Datadog RUM | Hoch |
| User Behavior | Navigation, Interaktionen, Funnels | Google Analytics, Mixpanel | Mittel |
2. Error Tracking mit Sentry
Achtung beim Sample Rate
Der tracesSampleRate bestimmt, wie viele Transaktionen an Sentry gesendet werden.
Ein Wert von 1.0 ist in der Entwicklung nützlich, aber in der Produktion zu teuer.
3. Benutzerdefinierter Error Handler in Angular
4. Real User Monitoring (RUM)
5. Synthetic Monitoring (Uptime Check)
Synthetic-Monitoring-Dienste
- UptimeRobot: Kostenloser Plan mit 50 Monitoren, Prüfungen alle 5 Minuten
- Pingdom: Erweiterte Überwachung mit integrierter RUM-Analyse
- Checkly: Browser-Checks mit Playwright
- Better Uptime: Incident-Management mit öffentlichen Statusseiten
6. Source Map Upload für Debugging
Niemals Source Maps in der Produktion Ausliefern
Source Maps enthalten den vollständigen Quellcode. Sie öffentlich auszuliefern würde es ermöglichen, die Geschäftslogik zu lesen.
7. Alerting-Strategien
Empfohlene Alert-Stufen
| Stufe | Auslöser | Kanal | Reaktion |
|---|---|---|---|
| Kritisch (P0) | Seite komplett nicht erreichbar, Fehler > 50% | SMS + Slack + PagerDuty | Sofort (15 Min) |
| Hoch (P1) | Kritische Funktionalität defekt, Error Rate > 10% | Slack + E-Mail | Innerhalb 1 Stunde |
| Mittel (P2) | Performance beeinträchtigt, Fehler > 5% | Slack | Innerhalb 4 Stunden |
| Niedrig (P3) | Warnungen, negativer Trend | Wochenbericht | Nächster Sprint |
8. Überwachungs-Dashboard
9. Vergleich der Überwachungs-Tools
10. Vollständige Implementierung: Checkliste
Überwachungs-Checkliste für den Go-Live
- Sentry konfiguriert und funktionsfähig mit benutzerdefiniertem Error Handler
- Source Maps auf Sentry hochgeladen (und aus dem Deployment entfernt)
- Web Vitals Tracking aktiv mit Senden an Google Analytics
- Uptime-Monitoring konfiguriert (Prüfungen alle 5 Minuten)
- Alerts für kritische Fehler konfiguriert (Slack, E-Mail)
- Dashboard mit den wesentlichen Metriken erstellt
- SSR-Kompatibilität verifiziert (isPlatformBrowser)
- Sample Rate für das Verkehrsvolumen optimiert
Fazit
Mit diesem Artikel schließen wir die Serie DevOps für Frontend-Entwickler ab. Die Produktionsüberwachung schließt den DevOps-Kreislauf.







