Angular Academy · Lektion

Fehler global behandeln

HTTP-Fehler zentral abfangen und umwandeln

Fehler global behandeln ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Zentrale Fehlerbehandlung

Statt HTTP-Fehler in jeder Component abzufangen, kann ein Interceptor sie global behandeln: protokollieren, einen Toast anzeigen, bei 401 umleiten oder die Fehlerstruktur vereinheitlichen.

catchError in einem Interceptor

Leiten Sie den Stream von next(req) durch catchError, um Fehler abzufangen.

import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      console.error('HTTP error', err.status);
      return throwError(() => err);
    })
  );

HttpErrorResponse untersuchen

HttpErrorResponse enthält status, message und den error-Body des Servers. Verzweigen Sie anhand des Status, um unterschiedliche Fälle zu behandeln.

catchError((err: HttpErrorResponse) => {
  if (err.status === 0) console.error('network/CORS error');
  else console.error('server error', err.status);
  return throwError(() => err);
})

Bei 401 umleiten

Ein 401 bedeutet normalerweise, dass die Sitzung abgelaufen ist. Leiten Sie aus dem Interceptor zur Anmeldung weiter.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status === 401) router.navigate(['/login']);
      return throwError(() => err);
    })
  );
};

Eine Benachrichtigung anzeigen

Beziehen Sie einen Toast-/Benachrichtigungsservice, um Fehler einheitlich für den Benutzer sichtbar zu machen.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const toast = inject(ToastService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      toast.error(err.error?.message ?? 'Something went wrong');
      return throwError(() => err);
    })
  );
};

Erneut auslösen oder verschlucken

Normalerweise sollten Sie den Fehler mit throwError(() => err) erneut auslösen, damit Components weiterhin reagieren können. Geben Sie nur dann ein Fallback-Observable (wie of(null)) zurück, wenn der Fehler wirklich vor den Aufrufern verborgen werden soll.

Den Fehler vereinheitlichen

Überführen Sie unterschiedliche Fehler-Bodies des Servers vor dem erneuten Auslösen in eine einheitliche Fehlerstruktur der Anwendung. Das vereinfacht die nachgelagerte Behandlung.

catchError((err: HttpErrorResponse) => {
  const appError = {
    code: err.status,
    message: err.error?.message ?? err.message
  };
  return throwError(() => appError);
})

Client- und Serverfehler unterscheiden

err.error instanceof ErrorEvent (oder err.status === 0) weist auf einen Client- oder Netzwerkfehler hin; andernfalls hat das Backend einen Fehlerstatus zurückgegeben. Behandeln Sie diese Fälle unterschiedlich.

Doppelte Behandlung vermeiden

Wenn der Interceptor bereits einen Toast anzeigt, sollten Components für denselben Fehler keinen weiteren anzeigen. Legen Sie eine einzige Ebene für die benutzerseitige Behandlung fest, um doppelte Meldungen zu vermeiden.

An einen Monitoring-Service protokollieren

Ein zentraler Interceptor ist der ideale Ort, um Fehler zusammen mit dem Kontext der Anfrage an ein Monitoring-Tool (Sentry usw.) weiterzuleiten.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const monitor = inject(MonitoringService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      monitor.captureHttpError(req.url, err.status, err.message);
      return throwError(() => err);
    })
  );
};

Den Fehler-Interceptor anordnen

Platzieren Sie den Fehler-Interceptor so, dass er die anderen umschließt und dadurch Fehler aus der gesamten Kette (einschließlich Wiederholungen) abfangen kann.

provideHttpClient(
  withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)

Kurzer Check

Testen Sie Ihr Verständnis der globalen Fehlerbehandlung.

Zusammenfassung: Fehler global behandeln

Ein Fehler-Interceptor bündelt die Behandlung von HTTP-Fehlern.

Verwenden Sie catchError für next(req).
Verzweigen Sie anhand von HttpErrorResponse.status (z. B. bei 401 zur Anmeldung umleiten).
Lösen Sie den Fehler erneut aus, damit Components reagieren können; verschlucken Sie ihn nur, wenn dies beabsichtigt ist.

Als Nächstes: Wiederholungen und Ladeindikatoren.

Häufig gestellte Fragen

Ist die Lektion „Fehler global behandeln“ kostenlos?

Ja — der vollständige Text von „Fehler global behandeln“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Fehler global behandeln“?

HTTP-Fehler zentral abfangen und umwandeln Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Fehler global behandeln“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy