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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
原生js实现放大镜组件
Jan 22 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获取网卡地址的代码
2008/04/09 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
php提取微信账单的有效信息
2018/10/01 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python中可以声明变量类型吗
2020/06/18 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
实习单位接收函
2014/01/11 职场文书
好学生评语大全
2014/05/05 职场文书
群教个人对照检查材料
2014/08/20 职场文书
房屋转让协议书
2014/10/18 职场文书
布达拉宫导游词
2015/02/02 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js