JavaScript代码异常监控实现过程详解


Posted in Javascript onFebruary 17, 2020

这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

JavaScript异常一般有两方面:语法错误和运行时错误。两种错误的捕获和处理方式不同,从而影响具体的方案选型。通常来说,处理JS异常的方案有两种:try...catch捕获 和 window.onerror捕获。以下就两种方案分别分析各自的优劣。

虽然语法错误本应该在开发构建阶段使用测试工具避免,但难免会有马失前蹄部署到线上的时候。

try...catch捕获

这种方案要求开发人员在编写代码的时候,在预估有异常发生的代码段使用try...catch,在发生异常时将异常信息发送给接口:

try{
//可能发生异常的代码段
}catch(e){
//将异常信息发送服务端
}

try...catch的优点是可以细化到每个代码块,并且可以自定义错误信息以便统计。

具体到上文提到的两种js异常,try...catch无法捕获语法错误,当遇到语法错误时,浏览器仍然会抛出错误Uncaught SyntaxError,但是不会被捕获,不会走进catch的代码块内。

另外,如果try代码块中有回调函数也不会被捕获,比如:

try{
var btn = $('#btn');
  btn.on('click',function(){
    //throw error
  });
}catch(e){}

上述代码中btn的监听函数里抛出的异常无法被外层的catch捕获到,必须额外套一层:

try{
var btn = $('#btn');
  btn.on('click',function(){
    try{
      //throw error
    }catch(e){}
  });
}catch(e){}

综上所述,try...catch方案的部署非常复杂,如果人工部署除了要求巨量的工作量,还跟开发人员的能力和经验有关。如果依赖编译工具部署(比如fis),那每个代码块都套一层try...catch也是非常难看的并且容易引发一些不可预估的问题。

window.onerror捕获

这种方式不需要开发人员在代码中书写大量的try...catch,通过给window添加onerror监听,在js发生异常的时候便可以捕获到错误信息,语法异常和运行异常均可被捕获到。但是window.onerror这个监听必须放在所有js文件之前才可以保证能够捕获到所有的异常信息。

window.onerror事件的详细信息参考这里。

/**
 * @param {String} errorMessage  错误信息
 * @param {String} scriptURL   出错文件的URL
 * @param {Long}  lineNumber   出错代码的行号
 * @param {Long}  columnNumber  出错代码的列号
 * @param {Object} errorObj    错误信息Object
 */
window.onerror = function(errorMessage, scriptURL, lineNumber,columnNumber,errorObj) { 
  // code..
}

onerror的实现方式各浏览器略有差异,但是前三个参数都是相同的,某些低版本浏览器没有后两个参数。

最后一个参数errorObj各浏览器实现的程度不一致,具体可参考这里。

下图是被onerror捕获到的一个异常的具体信息:

JavaScript代码异常监控实现过程详解

综上所述,window.onerror方案的优点是减少了开发人员的工作量,部署方便,并且可以捕获语法错误和运行错误。缺点是错误信息不能自定义,并且errorObj每种浏览器的实现有略微差异,导致需统计的信息有局限性。

跨域JS文件异常的捕获

为了提高web性能,目前大部分web产品架构中都有CDN这一环,将资源部署到不同的域名上,充分利用浏览器的并发请求机制。那么在跨域JS文件中发生异常的时候,onerror监听会捕获到什么信息呢?请看下图:

JavaScript代码异常监控实现过程详解

只有一个稍微有价值的信息Script error,其他什么信息都没有,为什么会这样呢?

我们都知道浏览器有同源资源限制,常规状态下是无法进行跨域请求的。而script、img、iframe标签的src属性是没有这种限制的,这也是很多跨域方案的基础。但是即使script标签可以请求到异域的js文件,此文件中的信息也并不能暴露到当前域内,这也是浏览器的安全措施所致。

那么有没有办法获取到异域资源的异常信息呢?

其实很简单,目前可以说基本上所有的web产品对于js/css/image等静态资源都在服务端设置了Access-Control-Allow-Origin: *的响应头,也就是允许跨域请求。在这个环境下,只要我们在请求跨域资源的script标签上添加一个crossorigin属性即可:

<script src="http://static.toutiao.com/test.js" crossorigin></script>

这样的话,异域的test.js文件中发生异常时便可以被当前域的onerror监听捕获到详细的异常信息。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
Vue自定义指令详解
Jul 28 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 #Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 #Javascript
Vue的双向数据绑定实现原理解析
Feb 17 #Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 #Javascript
javascript异常处理实现原理详解
Feb 17 #Javascript
Vue+webpack实现懒加载过程解析
Feb 17 #Javascript
javascript History对象原理解析
Feb 17 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
laravel自定义分页效果
2017/07/23 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
js Date概念详细介绍
2013/11/22 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
React实现todolist功能
2020/12/28 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python3图片转换二进制存入mysql
2013/12/06 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python字符串的修改方法实例
2019/12/19 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
浅析Python面向对象编程
2020/07/10 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
合伙协议书
2014/04/23 职场文书
感恩节寄语2015
2015/03/24 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
特种设备安全管理制度
2015/08/06 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS