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 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
JQuery教学之性能优化
May 14 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
军校大学生个人的自我评价
2014/02/17 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
六一儿童节主持词
2014/03/21 职场文书
监察建议书格式
2014/05/19 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
52条SQL语句教你性能优化
2021/05/25 MySQL
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
MySQL实现配置主从复制项目实践
2022/03/31 MySQL