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 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
深入了解Vue动态组件和异步组件
Jan 26 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
大师制作的中短波矿石收音机
2020/04/02 无线电
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
asp.net和php的区别点总结
2019/10/10 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python 字符串常用函数详解
2019/09/11 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
四年级数学教学反思
2014/02/02 职场文书
家长通知书教师评语
2014/04/17 职场文书
一年级小学生评语
2014/04/22 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
中学生运动会口号
2014/06/07 职场文书
刑事和解协议书范本
2014/11/19 职场文书
龙猫观后感
2015/06/09 职场文书
运动会通讯稿50字
2015/07/20 职场文书
初中军训感言
2015/08/01 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书