Implémentation d’un gestionnaire d’erreurs global dans Angular étape par étape

Découvrez comment ajouter un service de gestion d’erreurs global dans une application Angular pour gérer efficacement les erreurs d’exécution dans l’ensemble de l’application.

Dans une application Angular, les erreurs se répartissent généralement en deux catégories :

1. Erreurs liées aux opérations HTTP
2. Erreurs résultant d’opérations d’application non valides, comme une tentative de division par zéro

Cet article de blog se penche sur l’intégration d’un gestionnaire d’erreurs global dans une application angulaire pour gérer efficacement les erreurs d’exécution dans toute l’application.

Lorsque vous travaillez avec des applications Angular, il est courant de rencontrer des erreurs d’exécution, telles que l’appel de méthodes sur des variables ou des objets non définis.

Un scénario typique consiste à tenter d’appeler des méthodes de tableau telles que sort() sur une variable qui n’a pas été correctement initialisée ou qui a une valeur indéfinie.

Par exemple, considérons le code ci-dessous.

export class AppComponent {
  title = 'Global Error Handler Demo';
  data:any;
  getAverage(){
    let a = this.data?.sort().reduce((a:any,b:any)=>a+b)/this.data.length;
    console.log(a);
  }
}

Angular déclenche une erreur lors de la tentative d’appel du sort() méthode sur une variable de données non définie, comme illustré dans l’image suivante.

Ces erreurs d’exécution, affichées en rouge dans la console du navigateur, peuvent être améliorées pour une meilleure convivialité au sein de l’application. Pour y parvenir, nous pouvons enregistrer ces erreurs et fournir des informations significatives à l’utilisateur en remplaçant la classe de gestionnaire d’erreurs par défaut.

Angulaire utilise le Gestionnaire d’erreurs classe pour gérer les erreurs d’exécution. Pour implémenter la gestion globale des erreurs, nous pouvons personnaliser le handleErreur méthode.

Décomposons les étapes :

Créer un service angulaire

Pour générer un service Angular, exécutez la commande CLI suivante : ng generate service global-error-handler. Une fois la commande exécutée avec succès, vous trouverez le service créé comme illustré dans la liste de codes ci-dessous :

import {Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GlobalErrorHandlerService  {

}

Pour remplacer le gestionnaire d’erreurs par défaut dans Angular, vous devez implémenter le ErrorHandler interface et redéfinir l’interface handleError méthode. Cette méthode spécifique est déclenchée chaque fois qu’une erreur survient dans l’application.

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class GlobalErrorHandlerService implements ErrorHandler {
  handleError(error: any): void {
    console.log('handle and log the error here and send it to the server');
    
    
  }
}

Dans cette méthode, vous devez coder pour les tâches suivantes :

• Implémentez une gestion personnalisée des erreurs.
• Transmettez le journal des erreurs au serveur.
• Redirigez vers une page d’erreur si nécessaire.

Fournir le service

Pour utiliser un service de gestion d’erreurs personnalisé dans l’application :

• Il doit être fourni au niveau de la couche application.
• Il devrait être prévu pour le ErrorHandler jeton.

Pour les versions Angular 16 et ultérieures, vous pouvez configurer le GlobalErrorHandlerService dans le fichier app.config.ts, comme indiqué ci-dessous.

import { GlobalErrorHandlerService } from './global-error-handler.service';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    {provide:ErrorHandler,useClass:GlobalErrorHandlerService},
    provideRouter(routes)
   ]
};

Lorsqu’Angular déclenche une erreur lors de la tentative d’appel du sort() sur une variable de données non définie, vous obtenez un message d’erreur, comme illustré dans l’image suivante.

Utiliser StackTrace.js

Pour utiliser StackTrace.js, vous devez l’installer en exécutant la commande suivante.

npm install --save stacktrace-js

Après une installation réussie, modifiez le handleError méthode pour inclure l’utilisation des traces de pile comme illustré ci-dessous :

import { ErrorHandler, Injectable } from '@angular/core';
import * as StackTrace from 'stacktrace-js';

@Injectable({
  providedIn: 'root',
})
export class GlobalErrorHandlerService implements ErrorHandler {
  handleError(error: any): void {
    console.log('handle and log the error here and send it to the server');
    StackTrace.fromError(error).then(stackframes => {
      const stringifiedStack = stackframes
        .map(sf => sf.toString())
        .join('\n');
      console.error(stringifiedStack);
    });
  }
}

Enregistrez l’erreur

Pour enregistrer des informations significatives sur les erreurs d’exécution, créez une interface pour capturer les informations suivantes.

• Itinéraire: L’itinéraire ou le point de terminaison spécifique où l’erreur s’est produite
• Trace de pile : La trace de la pile ou les détails de l’erreur pertinents
• Utilisateur: Informations sur l’utilisateur (par exemple, identifiant d’utilisateur, nom d’utilisateur ou contexte pertinent)
• Temps: Horodatage de l’erreur

L’interface peut être créée comme indiqué ci-dessous :

export interface LogError {  
    Time : string;
    Route : string; 
    Message : string; 
    User : string;
 }

Ensuite, créez un service pour enregistrer ces informations sur le serveur.

export class LogErrorService {

  private http = inject(HttpClient);

  logError(log: LogError):any {
    console.log(log);
    this.http.post('http://your-api-url.com', log).subscribe(
      response => {
        console.log(response);
      },
      error => {
        console.error(error);
      }
    );
  }
}

Dans le GlobalErrorHandlerServiceutiliser LogErrorService comme indiqué ci-dessous :

import { ErrorHandler, Injectable, inject } from '@angular/core';
import { Router } from '@angular/router';
import * as StackTrace from 'stacktrace-js';
import { LogError } from './LogError';
import { LogErrorService } from './log-error.service';

@Injectable({
  providedIn: 'root',
})
export class GlobalErrorHandlerService implements ErrorHandler {
  router = inject(Router);
  logErrorService = inject(LogErrorService);
  logError: LogError = {
    Message: '',
    Time: '',
    Route: '',
    User: ''
  };
  handleError(error: any): void {
    console.log('handle and log the error here and send it to the server');
    StackTrace.fromError(error).then(stackframes => {
      const stringifiedStack = stackframes
        .map(sf => sf.toString())
        .join('\n');
    
        console.log('logError is not null');
        this.logError.Message = stringifiedStack; 
        this.logError.Time = new Date().toDateString();
        this.logError.Route = this.router.url;
        this.logError.User = 'testUser';
        this.logErrorService.logError(this.logError);
        this.router.navigate(['/error-page']);
    });
  }
}

Vous remarquerez que le service injecte deux dépendances, Routeur et Service de journalisation. Le routeur est utilisé pour diriger l’utilisateur vers une page d’erreur lorsqu’une erreur se produit, et le LogService est utilisé pour enregistrer les détails de l’erreur.

Résumé

Vous avez appris à ajouter un service de gestion d’erreurs global dans Angular dans cet article de blog. Pour ce faire :

1. Créez un service.
2. Implémentez la classe ErrorHandler.
3. Remplacez la méthode handleError.
4. Fournir le service au niveau de l’application.

J’espère que vous trouverez cet article utile. Merci d’avoir lu!