Angular Academy · Lekcja

Globalna obsługa błędów

Centralnie przechwytywać i przekształcać błędy HTTP

Globalna obsługa błędów to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Centralna obsługa błędów

Zamiast przechwytywać błędy HTTP w każdym komponencie, interceptor może obsługiwać je globalnie: rejestrować je, wyświetlać toast, przekierowywać po błędzie 401 lub ujednolicać strukturę błędu.

catchError w interceptorze

Strumień next(req) należy przepuścić przez catchError, aby przechwytywać błędy.

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);
    })
  );

Sprawdzanie HttpErrorResponse

HttpErrorResponse zawiera status, message oraz treść odpowiedzi serwera w polu error. Należy rozgałęziać logikę na podstawie statusu, aby obsługiwać różne przypadki.

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

Przekierowanie po błędzie 401

Błąd 401 zwykle oznacza wygaśnięcie sesji. Z poziomu interceptora należy przekierować użytkownika do logowania.

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);
    })
  );
};

Wyświetlanie powiadomienia

Należy wstrzyknąć usługę toastów lub powiadomień, aby spójnie prezentować błędy użytkownikowi.

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);
    })
  );
};

Ponowne zgłaszanie a tłumienie błędu

Zwykle należy ponownie zgłosić błąd za pomocą throwError(() => err), aby komponenty nadal mogły na niego reagować. Observable zastępczy (np. of(null)) należy zwracać tylko wtedy, gdy błąd ma rzeczywiście zostać ukryty przed kodem wywołującym.

Normalizowanie błędu

Przed ponownym zgłoszeniem należy mapować różne struktury błędów serwera na spójną strukturę błędu aplikacji, upraszczając obsługę w dalszej części kodu.

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

Rozróżnianie błędów klienta i serwera

err.error instanceof ErrorEvent (lub err.status === 0) wskazuje na błąd klienta lub sieci; w przeciwnym razie backend zwrócił status błędu. Należy obsługiwać te przypadki odmiennie.

Unikanie podwójnej obsługi

Jeśli interceptor wyświetla już toast, komponenty nie powinny wyświetlać kolejnego dla tego samego błędu. Należy wybrać jedną warstwę obsługi komunikatów dla użytkownika, aby uniknąć duplikatów.

Rejestrowanie w usłudze monitorującej

Centralny interceptor to idealne miejsce do przekazywania błędów do narzędzia monitorującego (Sentry itp.) wraz z kontekstem żądania.

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);
    })
  );
};

Kolejność interceptora błędów

Interceptor błędów należy umieścić tak, aby opakowywał pozostałe interceptory i mógł przechwytywać błędy z całego łańcucha, w tym z ponowień.

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

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat globalnej obsługi błędów.

Podsumowanie: globalna obsługa błędów

Interceptor błędów centralizuje obsługę błędów HTTP.

Należy używać catchError dla next(req).
Logikę należy rozgałęziać na podstawie HttpErrorResponse.status (np. przekierowanie po błędzie 401).
Błąd należy ponownie zgłaszać, aby komponenty mogły na niego reagować; tłumić go tylko wtedy, gdy jest to zamierzone.

Następnie: ponawianie żądań i wskaźniki ładowania.

Często zadawane pytania

Czy lekcja „Globalna obsługa błędów” jest bezpłatna?

Tak — pełny tekst „Globalna obsługa błędów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Globalna obsługa błędów”?

Centralnie przechwytywać i przekształcać błędy HTTP Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Globalna obsługa błędów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy