一起聊聊angular中的ErrorHandler
导读:收集整理的这篇文章主要介绍了一起聊聊angular中的ErrorHandler,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章带大家了解一下Angular中的异常处理ErrorHandler,通过例子介绍一下ErrorHandle...
收集整理的这篇文章主要介绍了一起聊聊angular中的ErrorHandler,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章带大家了解一下Angular中的异常处理ErrorHandler,通过例子介绍一下ErrorHandler的使用方法,希望对大家有所帮助!ErrorHandler
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: HttpResponseany> | HttpErrorResponse, data?:any ): Observableany> { // 判断是否为错误实例 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: HttpRequestany> , 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
钩子函数来处理错误,那么就需要将HttpErrorResponse
类型的错误抛出。如下:
catchError((error: HttpErrorResponse) => { if (error.status === 401) { // 跳到登录页或者刷新token } else { return throwError(error); } } )
更多编程相关知识,请访问:编程视频!!
以上就是一起聊聊angular中的ErrorHandler的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 一起聊聊angular中的ErrorHandler
本文地址: https://pptw.com/jishu/592503.html