0Pricing
Angular Academy · Leçon

Gérer les erreurs globalement

Interceptez et transformez centralement les erreurs HTTP

Gérer les erreurs globalement est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Gestion centralisée des erreurs

Au lieu d’intercepter les erreurs HTTP dans chaque composant, un intercepteur peut les gérer globalement : les enregistrer, afficher une notification, rediriger en cas de 401 ou uniformiser la structure de l’erreur.

catchError dans un intercepteur

Faites passer le flux de next(req) dans catchError pour intercepter les échecs.

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

Inspecter HttpErrorResponse

HttpErrorResponse contient status, message et le corps d’erreur du serveur error. Utilisez le statut pour gérer les différents cas.

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

Rediriger en cas de 401

Une réponse 401 signifie généralement que la session a expiré. Redirigez l’utilisateur vers la connexion depuis l’intercepteur.

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

Afficher une notification

Injectez un service de notification afin de présenter les erreurs à l’utilisateur de manière cohérente.

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

Relancer l’erreur ou l’ignorer

En général, relancez l’erreur avec throwError(() => err) afin que les composants puissent toujours réagir. Ne renvoyez un observable de secours (comme of(null)) que si vous souhaitez réellement masquer l’erreur aux appelants.

Uniformiser l’erreur

Convertissez les différents corps d’erreur du serveur en une structure d’erreur d’application cohérente avant de relancer l’erreur, afin de simplifier la gestion en aval.

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

Distinguer les erreurs côté client et côté serveur

err.error instanceof ErrorEvent (ou err.status === 0) indique une erreur côté client ou réseau ; sinon, le serveur principal a renvoyé un statut d’erreur. Gérez ces erreurs différemment.

Éviter la double gestion

Si l’intercepteur affiche déjà une notification, les composants ne doivent pas en afficher une autre pour la même erreur. Choisissez une seule couche de gestion destinée à l’utilisateur afin d’éviter les messages en double.

Journaliser dans un service de supervision

Un intercepteur central est l’endroit idéal pour transmettre les erreurs à un outil de supervision (Sentry, etc.), avec le contexte de la requête.

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

Ordonner l’intercepteur d’erreurs

Placez l’intercepteur d’erreurs de manière à ce qu’il encapsule les autres et puisse intercepter les erreurs de toute la chaîne, y compris celles des nouvelles tentatives.

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

Vérification rapide

Vérifiez votre compréhension de la gestion globale des erreurs.

Récapitulatif : gérer les erreurs globalement

Un intercepteur d’erreurs centralise la gestion des échecs HTTP.

  • Utilisez catchError sur next(req).
  • Fondez votre logique sur HttpErrorResponse.status (par exemple, redirigez en cas de 401).
  • Relancez l’erreur pour permettre aux composants de réagir ; ignorez-la uniquement lorsque c’est intentionnel.

Ensuite : nouvelles tentatives et indicateurs de chargement.

Questions Fréquemment Posées

La leçon « Gérer les erreurs globalement » est-elle gratuite ?

Oui — le texte complet de « Gérer les erreurs globalement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Gérer les erreurs globalement » ?

Interceptez et transformez centralement les erreurs HTTP Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Gérer les erreurs globalement » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Intercepteurs fonctionnels
  2. Ajouter des en-têtes d’authentification
  3. Gérer les erreurs globalement
  4. Nouvelles tentatives et indicateurs de chargement
← Retour à Angular Academy