Angular处理未可知异常错误的方法详解

 更新时间:2021年01月17日 09:46:51   作者:cipchk  
这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

写在前面

代码写得再好,始终都无法完整的处理所有可能产生异常,特别是生产环境中的应用,很大一部分是数据来自用户、远程,很难保证所有数据都按程序规定的产生。事实上,除非测试人员发现或者客户报告,否则都无法得知。因此,将应用产生的未可知异常进而上报是非常重要的环节。

Angular 默认情况下也提供了全局的异常管理,当发生异常时,会把它扔到 Console 控制台上。如果你在使用 NG-ZORRO 时,可能经常就会遇到 ICON 未加载的异常消息,这也是异常消息的一种:

core.js:5980 ERROR Error: [@ant-design/icons-angular]:the icon setting-o does not exist or is not registered.
 at IconNotFoundError (ant-design-icons-angular.js:94)
 at MapSubscriber.project (ant-design-icons-angular.js:222)
 at MapSubscriber._next (map.js:29)
 at MapSubscriber.next (Subscriber.js:49)
 at RefCountSubscriber._next (Subscriber.js:72)
 at RefCountSubscriber.next (Subscriber.js:49)
 at Subject.next (Subject.js:39)
 at ConnectableSubscriber._next (Subscriber.js:72)
 at ConnectableSubscriber.next (Subscriber.js:49)
 at CatchSubscriber.notifyNext (innerSubscribe.js:42)

而 Angular 是通过 ErrorHandler 统一管理异常消息,而且只需要覆盖其中的 handleError 方法并重新处理异常消息即可。

ErrorHandler

首先创建一个 custom-error-handler.ts 文件:

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

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
 handleError(error: any): void {
 super.handleError(error);
 }
}

CustomErrorHandler 可以完整的获取当前用户数据、当前异常消息对象等,并允许通过 HttpClient 上报给后端。

以下是 NG-ALAIN 的文档站,由于是使用 Google Analytics 来分析,只需要将异常消息转给 onerror 即可:

import { DOCUMENT } from '@angular/common';
import { ErrorHandler, Inject, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
 constructor(@Inject(DOCUMENT) private doc: any) {
 super();
 }

 handleError(error: any): void {
 try {
  super.handleError(error);
 } catch (e) {
  this.reportError(e);
 }
 this.reportError(error);
 }

 private reportError(error: string | Error): void {
 const win = this.doc.defaultView as any;
 if (win && win.onerror) {
  if (typeof error === 'string') {
  win.onerror(error);
  } else {
  win.onerror(error.message, undefined, undefined, undefined, error);
  }
 }
 }
}

最后,在 AppModule 模块内注册 CustomErrorHandler :

@NgModule({
 providers: [
  { provide: ErrorHandler, useClass: CustomErrorHandler },
 ]
})
export class AppModule { }

结论

事实上还有一项非常重要的工作,生产环境中都是打包压缩过后的,换言之所产生的异常消息也是无法与实际代码行数相同的数字,这就需要 SourceMap 的支持,当然正常的生产环境是不会发布这份文件的,所以如果想要得到正确的行列数,还是需要借助一层中间层,在后端利用 source-map 模块来解析出真正的行列数值。

Angular 的依赖注入(DI)系统可以使我们快速替换一些 Angular 内置模块,从而实现在不修改业务层面时快速解决一些特殊需求。

总结

到此这篇关于Angular如何处理未可知异常错误的文章就介绍到这了,更多相关Angular处理未可知异常错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解如何在Angular优雅编写HTTP请求

    详解如何在Angular优雅编写HTTP请求

    这篇文章主要介绍了详解如何在Angular优雅编写HTTP请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Angular.js实现扫码枪扫码并生成二维码

    Angular.js实现扫码枪扫码并生成二维码

    这篇文章主要为大家介绍了Angular.js实现扫码枪扫码并生成二维码示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • AngularJS中监视Scope变量以及外部调用Scope方法

    AngularJS中监视Scope变量以及外部调用Scope方法

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示,接下来通过本文给大家介绍AngularJS中监视Scope变量以及外部调用Scope方法,需要的朋友参考下吧
    2016-01-01
  • Angular angular-file-upload文件上传的示例代码

    Angular angular-file-upload文件上传的示例代码

    这篇文章主要介绍了Angular angular-file-upload文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Angular事件之不同组件间传递数据的方法

    Angular事件之不同组件间传递数据的方法

    这篇文章主要介绍了Angular事件之不同组件间传递数据的方法,利用Angular Event在不同组件之间传递数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • angular中的cookie读写方法

    angular中的cookie读写方法

    本篇文章主要介绍了angular中的cookie读写方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 关于Angular2 + node接口调试的解决方案

    关于Angular2 + node接口调试的解决方案

    这篇文章主要给大家介绍了关于Angular2 + node接口调试的解决方案,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • AngularJS的ng-repeat指令与scope继承关系实例详解

    AngularJS的ng-repeat指令与scope继承关系实例详解

    这篇文章主要介绍了AngularJS的ng-repeat指令与scope继承关系,结合实例形式通过ng-repeat指令详细分析了scope继承关系,需要的朋友可以参考下
    2017-01-01
  • 基于Angularjs实现分页功能

    基于Angularjs实现分页功能

    这篇文章主要介绍了基于Angularjs实现分页功能的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • AngularJS 输入验证的原理解析

    AngularJS 输入验证的原理解析

    AngularJS 的输入验证是一个强大的功能,可以帮助开发者确保用户输入的数据是准确和完整的,这篇文章主要介绍了AngularJS 输入验证,需要的朋友可以参考下
    2024-07-07

最新评论