Un article pour comprendre comment gérer les erreurs dans Angular

Comment les erreurs peuvent-elles être gérées dans

Angular ? Cet article vous présentera le mécanisme de gestion des erreurs dans Angular et vous expliquera comment gérer les erreurs.

La gestion des erreurs est une exigence qui est souvent rencontrée et doit être gérée lors de l'écriture de code. Souvent, la logique de la gestion des exceptions est d'éviter les plantages du programme. ci-dessousAngular Comment gérer les erreurs. [Recommandations de didacticiel associées : "tutoriel angulaire"]

Qu'est-ce qu'Angular

Angualr est une interface Web open source de Google Framework, né en 2009, a été créé par Misko Hevery et d'autres, puis acquis par Google. Il s'agit d'un excellent framework JS frontal qui a été utilisé dans de nombreux produits Google.

AngularJS est basé sur le modèle de programmation déclarative afin que les utilisateurs puissent développer sur la base d'une logique métier. Le framework est basé sur le remplissage de contenu HTML et la liaison de données bidirectionnelle pour compléter le mécanisme de synchronisation automatique des données. , Les opérations DOM améliorées d'AngularJS améliorent la testabilité

try/catch

La méthode la plus familière consiste à ajouter des try/catch blocs dans le code, en cas d'erreur. se produit dans try, il sera intercepté et le script continuera à s'exécuter. Cependant, à mesure que la taille de l’application augmente, cette approche devient ingérable.

ErrorHandler

Angular fournit un ErrorHandler par défaut qui peut imprimer des messages d'erreur sur la console, afin que ce comportement par défaut puisse être intercepté pour ajouter une logique de traitement de personnalisation, essayez d'écrire une classe de gestion des erreurs ci-dessous :

import { ErrorHandler, Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  handleError(error: Error | HttpErrorResponse) {
    if (!navigator.onLine) {
      console.error("Browser Offline!");
    } else {
      if (error instanceof HttpErrorResponse) {
        if (!navigator.onLine) {
          console.error("Browser Offline!");
        } else {
          // Handle Http Error (4xx, 5xx, ect.)
          console.error("Http Error!");
        }
      } else {
        // Handle Client Error (Angular Error, ReferenceError...)
        console.error("Client Error!");
      }
      console.error(error);
    }
  }
}

Créez généralement un répertoire partagé app sous shared et placez ce fichier dans le dossier providers

Désormais, le comportement par défaut de l'application doit être modifié pour utiliser notre classe personnalisée à la place ErrorHandler. Modifiez le fichier app.module.ts, importez @angular/core depuis ErrorHandler et ajoutez providers au module @NgModule Le code est le suivant :

import { NgModule, ErrorHandler } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

// Providers
import { ErrorsHandler } from "./shared/providers/error-handler";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  providers: [{ provide: ErrorHandler, useClass: ErrorsHandler }],
  bootstrap: [AppComponent]
})
export class AppModule {}

HttpInterceptor<🎜. >

Fournit un HttpInterceptormoyen d'intercepter les requêtes/réponses HTTP et de les traiter avant de les transmettre. Par exemple, une requête HTTP peut être réessayée plusieurs fois avant qu'une erreur ne soit générée. De cette façon, les délais d'attente peuvent être gérés correctement sans avoir à générer d'erreurs.

Vous pouvez également vérifier l'état de l'erreur avant de la lancer. À l'aide d'un intercepteur, vous pouvez vérifier le code d'erreur d'état 401 et rediriger l'utilisateur vers la page de connexion.

import { Injectable } from "@angular/core";
import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HttpErrorResponse } from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { retry, catchError } from "rxjs/operators";

@Injectable()
export class HttpsInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      retry(1),
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 跳转到登录页面
        } else {
          return throwError(error);
        }
      })
    );
  }
}

doit également être ajouté à

app.module.ts

import { NgModule, ErrorHandler } from "@angular/core";
import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

// Providers
import { ErrorsHandler } from "./shared/providers/error-handler";
import { HttpsInterceptor } from "./shared/providers/http-interceptor";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  providers: [
    { provide: ErrorHandler, useClass: ErrorsHandler },
    { provide: HTTP_INTERCEPTORS, useClass: HttpsInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Plusieurs fournisseurs sont utilisés pour créer des services évolutifs. Le système est livré avec certains fournisseurs par défaut, et d'autres fournisseurs peuvent également être enregistrés. . Une combinaison du fournisseur par défaut et d'autres fournisseurs sera utilisée pour piloter le comportement du système.

Notifications

L'impression des journaux d'erreurs sur la console est très conviviale pour les développeurs, mais pour les utilisateurs, une méthode plus conviviale est nécessaire pour savoir quand ces erreurs se produisent. à partir de l'interface graphique. Selon le type d'erreur, deux composants sont recommandés :

et SnackbarDialog

•  : recommandés pour les invites simples, comme un formulaire manquant un champ obligatoire ou pour notifier l'utilisateur fait des erreurs prévisibles (e-mail invalide, nom d'utilisateur trop long, etc.). Snackbar

•  : Cette méthode est recommandée lorsqu'il y a des erreurs inconnues côté serveur ou côté client ; de cette manière, plus de descriptions peuvent être affichées, même Dialog , telles que permettant aux utilisateurs de saisir leur e-mail pour suivre les bugs. call-to-action

Ajouter un service dans le dossier

pour gérer toutes les notifications, créer un nouveau dossier shared, créer le fichier : services, le code est le suivant : notification.service.ts

import { Injectable } from "@angular/core";
import { MatSnackBar } from "@angular/material/snack-bar";

@Injectable({
  providedIn: "root"
})
export class NotificationService {
  constructor(public snackBar: MatSnackBar) {}

  showError(message: string) {
    this.snackBar.open(message, "Close", { panelClass: ["error"] });
  }
}

Mise à jour

, ajouté error-handler.ts : NotificationService

import { ErrorHandler, Injectable, Injector } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
// Services
import { NotificationService } from "../services/notification.service";

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  //Error handling需要先加载，使用Injector手动注入服务
  constructor(private injector: Injector) {}
  handleError(error: Error | HttpErrorResponse) {
    const notifier = this.injector.get(NotificationService);
    if (!navigator.onLine) {
      //console.error("Browser Offline!");
      notifier.showError("Browser Offline!");
    } else {
      if (error instanceof HttpErrorResponse) {
        if (!navigator.onLine) {
          //console.error("Browser Offline!");
          notifier.showError(error.message);
        } else {
          // Handle Http Error (4xx, 5xx, ect.)
          // console.error("Http Error!");
          notifier.showError("Http Error: " + error.message);
        }
      } else {
        // Handle Client Error (Angular Error, ReferenceError...)
        // console.error("Client Error!");
        notifier.showError(error.message);
      }
      console.error(error);
    }
  }
}

Si une erreur est générée dans un composant, un joli

message peut être vu : snackbar

log Et le suivi des erreurs

ne peut certainement pas s'attendre à ce que les utilisateurs signalent chaque

et ne voient aucun journal de la console une fois déployé en production. Par conséquent, vous avez besoin d'un service backend capable de consigner les erreurs avec une logique personnalisée écrite dans la base de données ou d'utiliser des solutions existantes telles que bug, Rollbar, Sentry. Bugsnag

Créez ensuite un service de suivi des erreurs simple, créez

 : logging.service.ts

import { Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class LoggingService {
  constructor() {}

  logError(error: Error | HttpErrorResponse) {
    // This will be replaced with logging to either Rollbar, Sentry, Bugsnag, ect.
    if (error instanceof HttpErrorResponse) {
      console.error(error);
    } else {
      console.error(error);
    }
  }
}

Ajoutez le service à

 : error-handler.ts

import { ErrorHandler, Injectable, Injector } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
// Services
import { NotificationService } from "../services/notification.service";
import { LoggingService } from "../services/logging.service";

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  //Error handling需要先加载，使用Injector手动注入服务
  constructor(private injector: Injector) {}
  handleError(error: Error | HttpErrorResponse) {
    const notifier = this.injector.get(NotificationService);
    const logger = this.injector.get(LoggingService);
    if (!navigator.onLine) {
      //console.error("Browser Offline!");
      notifier.showError("Browser Offline!");
    } else {
      if (error instanceof HttpErrorResponse) {
        if (!navigator.onLine) {
          //console.error("Browser Offline!");
          notifier.showError(error.message);
        } else {
          // Handle Http Error (4xx, 5xx, ect.)
          // console.error("Http Error!");
          notifier.showError("Http Error: " + error.message);
        }
      } else {
        // Handle Client Error (Angular Error, ReferenceError...)
        // console.error("Client Error!");
        notifier.showError(error.message);
      }
      // console.error(error);
      logger.logError(error);
    }
  }
}

À ce stade, toute la gestion des erreurs Un mécanisme a été introduit et il est fondamentalement similaire à la façon dont les projets développés par d'autres frameworks ou langages sont gérés.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!