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 相关文章推荐
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
2016/11/28 Javascript
实例浅析js的this
2016/12/11 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
详解Python字典小结
2018/10/20 Python
python自动化生成IOS的图标
2018/11/13 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
工地门卫岗位职责
2013/12/30 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
田径运动会通讯稿
2015/07/18 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL