Let's talk about ErrorHandler in angular

This article will take you to understand the exception handling ErrorHandler in angular, and introduce the use of ErrorHandler through examples. I hope it will be helpful to everyone!

ErrorHandler

The default implementation of ErrorHandler prints error messages to console. To intercept error handling, write a custom exception handler that will change this default behavior to what your application requires. [Related tutorial recommendations: "angular tutorial"]

Demonstrates usage with an example in actual development:
If the front-end proposes a new requirement, add a global error to the front-end Process and report error logs as follows:

1. Create error handling 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. In app.module Add

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

to .ts

. When an exception occurs in the program, the handleError hook will be automatically called to determine whether the exception is from the client or the server.

3. What is handled above is the exception that occurs on the page. In actual development, exceptions such as interfaces also need to be reported. The ng-alain framework is currently used, so in default.interceptor.tsAdd code to the interceptor, specific reference: ng-alain—Intercepting network requests

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

The writing method of point 3 above is not through automatic callhandleError Hooks are used to handle errors. In the Interceptor interceptor, only errors of type HttpErrorResponse can be processed. If they are processed here, then ErrorHandler will not be captured. arrive. So in Interceptor, if you must handle errors through the handleError hook function, then you need to throw HttpErrorResponse type errors. As follows:

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

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of Let's talk about ErrorHandler in angular. For more information, please follow other related articles on the PHP Chinese website!