Parlons d'ErrorHandler en angulaire

Cet article vous présentera la gestion des exceptions ErrorHandler dans angular et présentera l'utilisation de ErrorHandler à travers des exemples. J'espère qu'il sera utile à tout le monde !

ErrorHandler

L'implémentation par défaut de ErrorHandler imprime les messages d'erreur sur la console. Pour intercepter la gestion des erreurs, écrivez un gestionnaire d'exceptions personnalisé qui modifiera ce comportement par défaut en fonction des besoins de votre application. [Recommandations de didacticiel associées : "ErrorHandler的默认实现将错误消息打印到 console。要拦截错误处理，请编写一个自定义的异常处理器，该异常处理器将把此默认行为改成你应用所需的。【相关教程推荐：《angular教程》】

以实际开发中一个例子演示使用方式：
假如前端有提出一个新需求为前端添加全局错误处理并上报错误日志，处理如下：

1、创建错误处理的error-handler.service.ts

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

@Injectable()
export class AppGlobalErrorhandler implements ErrorHandler {
    constructor(private http:HttpClient){ }
  // 当程序中出现异常时，会自动调用 handleError 钩子，可判断是客户端还是来自服务端的异常。
  handleError(error) {
  	// 打印错处信息
    console.warn("customize catch execption:" , error.stack);
    // ...
	// 异常处理逻辑
	// ...
    if(['ExpressionChangedAfterItHasBeenCheckedError'].every(item => !error.stack.includes(item))){
    	// 上报错误日志
        this.http.post('/api/errorLog', {
            url: location.href,
            type: 'WEB',
            error: error.stack,
            message: error.toString()
        }).subscribe()
    }
  }
}

2、在app.module.ts中添加

import { AppGlobalErrorhandler } from './service/error-handler.service';
...
providers:  [
...
 { provide: ErrorHandler, useClass: GlobalErrorHandler},
...
]

当程序中出现异常时，会自动调用handleError钩子，可判断是客户端还是来自服务端的异常。

3、在上面处理的是页面发生的异常，实际开发中同时也需要上报接口等的异常，当前使用的是ng-alain框架，所以在default.interceptor.ts拦截器中添加代码，具体参考：ng-alain—拦截网络请求

  private handleData(
    event: HttpResponse<any> | HttpErrorResponse,
    data?:any
  ): Observable<any> {
	// 判断是否为错误实例
    if (event instanceof HttpErrorResponse && event.url.indexOf(&#39;api/errorLog&#39;) === -1) {
		// 上报接口错误日志
      this.http.post(&#39;/api/errorLog&#39;, {
        url: event.url,
        type: &#39;INTERFACE&#39;,
        message: event.message,
        status: event.status,
        statusText: event.statusText,
        param: JSON.stringify(data[&#39;body&#39;]||undefined),
        body: JSON.stringify((event as any)[&#39;body&#39;] || undefined),
        error:JSON.stringify( event.error),
      }).subscribe()
    }

    return of(event);
  }

// 拦截器
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ){
    return next.handle(newReq).pipe(
     // 当请求发生错误时，使用一个管道把错误发送给错误处理器
      catchError((err: HttpErrorResponse) => this.handleData(err,newReq)),
      mergeMap((event: any) => {
        // 允许统一对请求错误处理，这是因为一个请求若是业务上错误的情况下其HTTP请求的状态是200的情况下需要
        if (event instanceof HttpResponse && event.status === 200)
          return this.handleData(event);
        // 若一切都正常，则后续操作
        return of(event);
      }),
    );
  }

上面第3点的写法中的不是通过自动调用handleError钩子来处理错误的，在Interceptor拦截器中只能处理HttpErrorResponse类型的错误，如果这里处理了，那么ErrorHandler将捕获不到。所以在Interceptor中，如果一定要通过handleError钩子函数来处理错误，那么就需要将HttpErrorResponseTutoriel angulaire

"]

Démontre l'utilisation avec un exemple de développement réel :
Si le front-end a une nouvelle exigence pour ajouter une gestion globale des erreurs au front- terminez et signalez le journal des erreurs. Le traitement est le suivant :

1. Créez la gestion des erreurs error-handler.service.ts🎜

catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 跳到登录页或者刷新token
        } else {
          return throwError(error);
        }
 })

🎜2. Ajoutez 🎜rrreee🎜🎜 dans l'application . module.ts Lorsqu'une exception se produit dans le programme, le hook handleError sera automatiquement appelé pour déterminer si l'exception provient du client ou du serveur. 🎜🎜3. Ce qui est géré ci-dessus est l'exception qui se produit sur la page. Dans le développement réel, les exceptions telles que les interfaces doivent également être signalées. Le framework ng-alain est actuellement utilisé. , donc dans default.interceptor.tsAjouter du code à l'intercepteur Pour référence spécifique : ng-alain—Intercepter les requêtes réseau🎜rrreee🎜La méthode d'écriture du point 3 ci-dessus ne consiste pas à appeler automatiquement le handleError Pour gérer les erreurs, l'intercepteur <code>Interceptor ne peut gérer que les erreurs de type HttpErrorResponse S'il est géré ici, alors ErrorHandler. ne pourra pas le capturer. Par conséquent, dans Interceptor, si vous devez gérer les erreurs via la fonction hook handleError, alors vous devez générer des erreurs de type HttpErrorResponse. Comme suit : 🎜rrreee🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo 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!