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 解析后的xml对象的读取方法细解
Jul 25 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
js实现随机数小游戏
Jun 28 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
动态加载js的几种方法
2006/10/23 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python flask安装和命令详解
2019/04/02 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
春风行动实施方案
2014/03/28 职场文书
广播体操口号
2014/06/18 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
故宫导游词
2015/01/31 职场文书
加入学生会自荐书
2015/03/05 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript