angular里的错误处理ErrorHandler

lxf2023-03-13 07:52:01

本文带大家了解一下angular里的错误处理ErrorHandler,根据事例介绍一下ErrorHandler使用方法,希望能帮助到大家!

angular里的错误处理ErrorHandler

ErrorHandler

ErrorHandler的默认设置完成将异常信息打印出到 console。要阻拦异常处理,请撰写一个自定的异常Cpu,该出现异常Cpu将此默认设置个人行为改为你运用所需要的。【有关实例教程强烈推荐:《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('api/errorLog') === -1) {
// 汇报插口不正确日志
      this.http.post('/api/errorLog', {
        url: event.url,
        type: 'INTERFACE',
        message: event.message,
        status: event.status,
        statusText: event.statusText,
        param: JSON.stringify(data['body']||undefined),
        body: JSON.stringify((event as any)['body'] || undefined),
        error:JSON.stringify( event.error),
      }).subscribe()
    }

    return of(event);
  }

// 回调函数
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ){
    return next.handle(newReq).pipe(
     // 当要求出现错误时,使用一个管路把不正确发给不正确Cpu
      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钩子函数来处理错误,那就需要将HttpErrorResponse种类错误抛出去。如下所示:

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

大量程序编写基本知识,请访问:编程视频!!

以上就是关于一起聊聊angular里的ErrorHandler的具体内容,大量欢迎关注AdminJS其他类似文章!