Lassen Sie uns über ErrorHandler in Angular sprechen

Dieser Artikel führt Sie durch die Ausnahmebehandlung von ErrorHandler in Angular und stellt die Verwendung von ErrorHandler anhand von Beispielen vor. Ich hoffe, dass er für alle hilfreich ist!

ErrorHandler

Die Standardimplementierung von ErrorHandler gibt Fehlermeldungen an die Konsole aus. Um die Fehlerbehandlung abzufangen, schreiben Sie einen benutzerdefinierten Ausnahmehandler, der dieses Standardverhalten an die Anforderungen Ihrer Anwendung anpasst. [Verwandte Tutorial-Empfehlungen: „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钩子函数来处理错误，那么就需要将HttpErrorResponseAngular Tutorial

“]

Demonstriert die Verwendung anhand eines Beispiels in der tatsächlichen Entwicklung:
Wenn das Front-End eine neue Anforderung hat, dem Front-End eine globale Fehlerbehandlung hinzuzufügen- Beenden und melden Sie das Fehlerprotokoll. Die Verarbeitung erfolgt wie folgt:

1. Erstellen Sie eine Fehlerbehandlung error-handler.service.ts🎜

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

🎜2. module.ts Wenn im Programm eine Ausnahme auftritt, wird der Hook handleError automatisch aufgerufen, um festzustellen, ob die Ausnahme vom Client oder vom Server stammt. 🎜🎜3. Was oben behandelt wird, ist die Ausnahme, die auf der Seite auftritt. In der tatsächlichen Entwicklung müssen auch Ausnahmen wie Schnittstellen gemeldet werden , also in default.interceptor.tsCode zum Interceptor hinzufügen. Als spezifische Referenz: ng-alain – Abfangen von Netzwerkanfragen🎜rrreee🎜Die Schreibmethode in Punkt 3 oben erfolgt nicht durch automatischen Aufruf des handleError-Hook Um Fehler zu behandeln, kann der Interceptor-Interceptor nur Fehler vom Typ HttpErrorResponse verarbeiten. Wenn er hier behandelt wird, dann ErrorHandler wird es nicht einfangen können. Wenn Sie in Interceptor Fehler über die Hook-Funktion handleError behandeln müssen, müssen Sie daher Fehler vom Typ HttpErrorResponse auslösen. Wie folgt: 🎜rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über ErrorHandler in Angular sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!