📈 Angular Observability – Logs, Metrics & Fehler richtig erfassen

Du hast eine tolle Angular-App gebaut – aber was passiert nach dem Deployment?
Observability sorgt dafür, dass du Fehler, Verhalten und Performance verstehst.

🔍 1. Logging mit Context

console.log('Login failed', { user: email, reason: err });

• Nutze strukturierte Logs
• Kein console.error() in Production
• Optional: Remote Logging (z. B. LogRocket, Sentry, Elastic)

🧠 2. Global Error Handling

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any) {
    // Log, track, user notify
    console.error('Global Error:', error);
  }
}

→ Im providers registrieren

🚨 3. HTTP-Fehler zentral abfangen

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError(error => {
        // Fehler tracken
        return throwError(() => error);
      })
    );
  }
}

📊 4. Metrics + User Behavior

• Tools: PostHog, Plausible, Matomo, Amplitude
• Tracke: Klicks, Navigation, Ladezeiten
• DSGVO beachten

window._paq?.push(['trackEvent', 'Formular', 'Absenden']);

🔁 5. Custom Events & Lifecycle Hooks

• Nutze ngOnInit, ngAfterViewInit für Sichtbarkeit
• Tracke Formulare, Feature Usage, Scroll Depth

✅ Fazit

Logs ≠ Observability.
Baue ein System, das dir zeigt, was passiert – und warum.
So bist du nicht blind, wenn’s ernst wird. 🧠👁️

📍 Nächster Beitrag:
📦 Angular Dependency Injection Deep Dive – Advanced Techniques & Patterns