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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 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 高性能书写
2010/12/11 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
用jscript实现新建word文档
2007/06/15 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
python修改txt文件中的某一项方法
2018/12/29 Python
django删除表重建的实现方法
2019/08/28 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
python搜索算法原理及实例讲解
2020/11/18 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
市场营销专科应届生求职信
2013/11/24 职场文书
个性大学生自我评价
2013/12/04 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
财务简历的自我评价
2014/03/05 职场文书
车间主任岗位职责
2014/03/16 职场文书
优秀员工推荐信
2014/05/10 职场文书
文明好少年事迹材料
2014/08/19 职场文书
邀请函格式范文
2015/02/02 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015年检验科工作总结
2015/04/27 职场文书
保外就医申请书范文
2015/08/06 职场文书