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


Posted in Javascript onJanuary 17, 2021

写在前面

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

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处理未可知异常错误内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 #Javascript
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
关于uniApp editor微信滑动问题
Jan 15 #Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 #Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 #Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 #Javascript
js中延迟加载和预加载的具体使用
Jan 14 #Javascript
You might like
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
vue-router单页面路由
2017/06/17 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
vue axios请求超时的正确处理方法
2018/04/02 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
开学典礼主持词
2014/03/19 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
专项资金申请报告
2015/05/15 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
绿里奇迹观后感
2015/06/15 职场文书