Parlons des méthodes de gestion des erreurs couramment utilisées dans Angular-js tutoriel-php.cn

Cet article vous donnera une compréhension approfondie des méthodes de gestion des erreurs couramment utilisées dans Angular. J'espère qu'il sera utile à tout le monde !

Parlons des méthodes de gestion des erreurs couramment utilisées dans Angular

La gestion des erreurs est une exigence souvent rencontrée et qui doit être gérée lors de l'écriture de code. Souvent, la logique de gestion des exceptions est d'éviter les plantages du programme. Cet article présentera brièvement la manière dont Angular. gère les exceptions. [Recommandations de didacticiel associées : "Angular处理异常的方式。【相关教程推荐：《angular教程》】

什么是Angular

Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。

AngularJS 是基于声明式编程模式是用户可以基于业务逻辑进行开发. 该框架基于HTML的内容填充并做了双向数据绑定从而完成了自动数据同步机制. 最后, AngularJS 强化的DOM操作增强了可测试性.

try/catch

最熟悉的的方式，就是在代码中添加try/catch块，在try中发生错误，就会被捕获并且让脚本继续执行。然而，随着应用程序规模的扩大，这种方式将变得无法管理。

ErrorHandler

Angular提供了一个默认的ErrorHandler，可以将错误消息打印到控制台，因此可以拦截这个默认行为来添加自定义的处理逻辑，下面尝试编写错误处理类：

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

Copier après la connexion

通常在app下创建一个共享目录shared，并将此文件放在providers文件夹中

现在，需要更改应用程序的默认行为，以使用我们自定义的类而不是ErrorHandler。修改app.module.ts文件，从@angular/core导入ErrorHandler，并将providers添加到@NgModule模块，代码如下：

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 {}

Copier après la connexion

HttpInterceptor

HttpInterceptor提供了一种拦截HTTP请求/响应的方法，就可以在传递它们之前处理。例如，可以在抛出错误之前重试几次HTTP请求。这样，就可以优雅地处理超时，而不必抛出错误。

还可以在抛出错误之前检查错误的状态，使用拦截器，可以检查401状态错误码，将用户重定向到登录页面。

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

Copier après la connexion

同样需要添加到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 {}

Copier après la connexion

多提供者用于创建可扩展服务，其中系统带有一些默认提供者，也可以注册其他提供者。默认提供程序和其他提供程序的组合将用于驱动系统的行为。

Notifications

在控制台打印错误日志对于开发者来说非常友好，但是对于用户来说则需要一种更加友好的方式来告诉这些错误何时从GUI中发生。根据错误类型，推荐两个组件：Snackbar和Dialog

Snackbar：推荐用于简单的提示，比如表单缺少必填字段或通知用户可预见的错误（无效电子邮件、用户名太长等）。
Dialog：当存在未知的服务器端或客户端错误时，推荐使用这种方式；通过这种方式，可以显示更多的描述，甚至call-to-action，比如允许用户输入他们的电子邮件来跟踪错误。

在shared文件夹中添加一个服务来处理所有通知，新建services文件夹，创建文件：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"] });
  }
}

Copier après la connexion

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

Copier après la connexion

如果在一个组件中抛出一个错误，可以看到一个很好的snackbar消息：

日志和错误跟踪

当然不能期望用户向报告每个bug，一旦部署到生产环境中，就不能看到任何控制台日志。因此就需要能够记录错误的后端服务与自定义逻辑写入数据库或使用现有的解决方案，如Rollbar、Sentry、Bugsnag。

接下来创建一个简单的错误跟踪服务，创建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);
    }
  }
}

Copier après la connexion

将服务添加到error-handler.tsTutoriel angulaire

Qu'est-ce qu'Angular

Angualr est un Ce framework front-end Web open source de Google est né en 2009. Il 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 un modèle de programmation déclaratif qui permet aux utilisateurs de 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 un mécanisme de synchronisation automatique des données. opérations Testabilité améliorée.🎜

try/catch

🎜La méthode la plus familière est d'ajouter < code>try/catch< /code>, si une erreur se produit dans try, elle sera interceptée 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 être l'erreur Le message est imprimé sur la console, vous pouvez donc intercepter ce comportement par défaut pour ajouter une logique de traitement personnalisée. Essayez d'écrire une classe de gestion des erreurs ci-dessous : 🎜

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

Copier après la connexion

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

🎜Maintenant, nous devons modifier le comportement par défaut de l'application pour utiliser notre classe personnalisée à la place ErrorHandler. Modifiez le fichier <code>app.module.ts, importez ErrorHandler depuis @angular/core et ajoutez des providers à @NgModule, le code est le suivant : 🎜rrreee

HttpInterceptor

🎜HttpInterceptor fournit un moyen 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. 🎜rrreee🎜Doit également être ajouté à app.module.ts🎜rrreee

🎜Plusieurs fournisseurs sont utilisés pour créer des services extensibles. Le système est livré avec certains fournisseurs par défaut, et d'autres fournisseurs peuvent également l'être. enregistré qui. 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 pas pour les utilisateurs. Un moyen convivial de savoir quand ces erreurs se produisent à partir de l'interface graphique est nécessaire. Selon le type d'erreur, deux composants sont recommandés : Snackbar et Dialog🎜

🎜Snackbar : recommandé pour les invites simples, Comme par exemple dans les formulaires manquant des champs obligatoires ou informant les utilisateurs d'erreurs prévisibles (e-mail invalide, nom d'utilisateur trop long, etc.). 🎜
🎜Dialog : 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, et même ; des appels à l'action, comme permettre aux utilisateurs de saisir leur adresse e-mail pour suivre les erreurs. 🎜

🎜Ajoutez un service dans le dossier shared pour gérer toutes les notifications, créez un nouveau dossier services et créez le fichier : notification.service.ts, le code est le suivant : 🎜rrreee🎜Mettez à jour error-handler.ts et ajoutez NotificationService : 🎜rrreee🎜Si une erreur est lancé dans un composant, vous pouvez voir un joli message snackbar : 🎜

Suivi des journaux et des erreurs

🎜Of bien sûr, ce n'est pas prévu. Les utilisateurs signalent chaque bug et une fois déployé en production, aucun journal de la console n'est visible. Par conséquent, vous avez besoin d'un service backend capable de consigner les erreurs et d'écrire une logique personnalisée dans la base de données ou d'utiliser des solutions existantes, telles que Rollbar, Sentry, Bugsnagcode>. 🎜🎜Ensuite, créez un service de suivi des erreurs simple, créez logging.service.ts : 🎜rrreee🎜Ajoutez le service à error-handler.ts : 🎜rrreee🎜 À ce stade , l'ensemble du mécanisme de gestion des erreurs a été introduit, et il est fondamentalement similaire à la façon dont les projets développés dans d'autres frameworks ou langages sont gérés. 🎜

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de 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!