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

这篇文章主要介绍了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的实现方式各浏览器略有差异，但是前三个参数都是相同的，某些低版本浏览器没有后两个参数。