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的blockui插件显示弹出层
Apr 14 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
jqTransform美化表单
Oct 10 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 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
php echo 输出字符串函数详解
2010/05/13 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python中os.path用法分析
2015/01/15 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
给交警的表扬信
2014/01/12 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
个人培训自我鉴定
2014/03/28 职场文书
初中家长寄语
2014/04/02 职场文书
关于安全的演讲稿
2014/05/09 职场文书
机关保密承诺书
2014/06/03 职场文书