Angular Academy · Lezione

Gestire globalmente gli errori

Intercettare e trasformare centralmente gli errori HTTP

Gestire globalmente gli errori è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Gestione centralizzata degli errori

Invece di intercettare gli errori HTTP in ogni componente, un interceptor può gestirli globalmente: registrarli, mostrare un toast, reindirizzare in caso di 401 o uniformare la struttura dell'errore.

catchError in un interceptor

Faccia passare il flusso di next(req) attraverso catchError per intercettare i fallimenti.

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

Ispezionare HttpErrorResponse

HttpErrorResponse contiene status, message e il corpo error del server. Usi lo status per gestire i diversi casi.

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

Reindirizzare in caso di 401

Un 401 indica solitamente che la sessione è scaduta. Reindirizzi al login dall'interceptor.

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

Mostrare una notifica

Inietti un servizio di toast/notifiche per presentare gli errori all'utente in modo coerente.

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

Rilanciare o ignorare

Di solito rilanci l'errore con throwError(() => err), così i componenti possono ancora reagire. Restituisca un observable di fallback (come of(null)) solo quando desidera davvero nascondere l'errore ai chiamanti.

Uniformare l'errore

Converta i diversi corpi degli errori del server in una struttura di errore coerente prima di rilanciarli, semplificando la gestione successiva.

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

Distinguere gli errori client da quelli server

err.error instanceof ErrorEvent (o err.status === 0) indica un errore del client o di rete; altrimenti il backend ha restituito uno status di errore. Li gestisca in modo diverso.

Evitare la doppia gestione

Se l'interceptor mostra già un toast, i componenti non dovrebbero mostrarne un altro per lo stesso errore. Scelga un solo livello per la gestione visibile all'utente, così evita messaggi duplicati.

Registrare gli errori in un servizio di monitoraggio

Un interceptor centralizzato è il punto ideale per inoltrare gli errori a uno strumento di monitoraggio (Sentry, ecc.), allegando il contesto della richiesta.

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

Ordinare l'interceptor degli errori

Posizioni l'interceptor degli errori in modo che avvolga gli altri, consentendogli di intercettare gli errori dell'intera catena, inclusi i tentativi.

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

Verifica rapida

Verifichi la Sua comprensione della gestione globale degli errori.

Riepilogo: gestire gli errori globalmente

Un interceptor degli errori centralizza la gestione dei fallimenti HTTP.

Usi catchError su next(req).
Usi HttpErrorResponse.status per distinguere i casi (ad esempio, reindirizzamento per 401).
Rilanci l'errore per consentire ai componenti di reagire; lo ignori solo quando è una scelta intenzionale.

Prossimo argomento: retry e indicatori di caricamento.

Domande Frequenti

La lezione «Gestire globalmente gli errori» è gratuita?

Sì — il testo completo di «Gestire globalmente gli errori» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Gestire globalmente gli errori»?

Intercettare e trasformare centralmente gli errori HTTP Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Gestire globalmente gli errori»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy