阅读目录@H_301_2@@H_502_3@

• 什么是前端代码异常
• window.onerror
• 写一个js报错的上报库
• 注意点：
• 缺点：

在平时的工作，js报错是比较常见的一个情景，尤其是有一些错误可能我们在本地测试的时候测试不出来，当发布到线上之后才可以发现，如果抢救及时，那还好，假如很晚才发@H_502_3@

现，那就可能造成很大的损失了。如果我们前端可以监控到这种报错，并及时上报的话，那我们的问题就比较好解决了。所以我们今天来聊聊前端代码的异常监控@H_502_3@

什么是前端代码异常@H_301_2@@H_502_3@

一般语法错误以及运行时错误，浏览器都会在console里边体现出错误信息，以及出错的文件，行号，堆栈信息。@H_502_3@

我们先来说手前端代码异常是什么意思。前端代码异常指的是以下两种情况：@H_502_3@

1、JS脚本里边存着语法错误；@H_502_3@

2、JS脚本在运行时发生错误。@H_502_3@

类似于这种：@H_502_3@

@H_502_3@@H_502_3@

那么我们如何来捕获这种异常呢，有两种方法，@H_502_3@

502_3@

502_3@

由于try.catch 没法捕捉到全局的错误事件，也即是说 只有try,catch的块里边运行出错才会被你捕捉到。所以我们这里排除它的这种方案，@H_502_3@

来采用第二种方法，也就是window.onerror方法。@H_502_3@

window.onerror@H_301_2@@H_502_3@

打开浏览器自带的开发者工具，当一个错误发生时，我们可以立刻得到提示，并且知道错误发生的位置以及调用的堆栈信息。@H_502_3@

我们可以通过 window.onerror 来捕获页面上的各种脚本执行异常，它能帮助我们获取有用的信息。但是这个方法存在兼容性问题，在不同的浏览器上提供的数据不完全一致，@H_502_3@

部分过时的浏览器只能提供部分数据。它的用法如下:@H_502_3@

window.onerror = function (message,url,lineNo,columnNo,error) @H_502_3@

五个参数的含义如下：@H_301_2@@H_502_3@

1、message {String} 错误信息。直观的错误描述信息，不过有时候你确实无法从这里面看出端倪，特别是压缩后脚本的报错信息，可能让你更加疑惑。@H_502_3@

2、url {String} 发生错误对应的脚本路径，比如是你的报错了还是报错了。@H_502_3@

3、lineNo {Number} 错误发生的行号。@H_502_3@

4、columnNo {Number} 错误发生的列号。@H_502_3@

5、error {Object} 具体的 error 对象，包含更加详细的错误调用堆栈信息，这对于定位错误非常有帮助。@H_502_3@

兼容性问题@H_301_2@@H_502_3@

不同浏览器对同一个错误的 message@H_301_2@ 是不一样的。@H_502_3@

IE10以下浏览器只能获取到 message，url 和 lineNo这三个参数，获取不到columnNo 和 error@H_502_3@

不过 window.event @H_301_2@对象提供了 errorLine @H_301_2@和 errorCharacter@H_301_2@，以此来对应相应的行列号信息。@H_502_3@

在使用onerror的时候，我们可以使用arguments.callee.caller @H_301_2@来递归出调用堆栈，这一类信息是最直接的错误信息信息，所以是必须要捕获并上报的。后面我们会用js去示范。@H_502_3@

不同浏览器默认可获取的参数值：@H_502_3@

@H_502_3@@H_502_3@

写一个js报错的上报库@H_301_2@@H_502_3@

既然知道了window.onerror的用法，为啥我们不来写一个js库来监控我们的前端js,废话少说，写之。@H_502_3@

实现思路：@H_301_2@@H_502_3@

1、收集window.onerror的五个参数@H_502_3@

2、除了那五个参数，可以增加自定义参数@H_502_3@

3、发送到后台服务器@H_502_3@

我们暂且给我们的库起名为 badJsReport@H_502_3@

原理比较简单，代码如下：@H_502_3@

= 200 && status < 300) { options.success && options.success(xhr.responseText,xhr.responseXML); } else { options.fail && options.fail(status); } } } if (options.type == "GET") { xhr.open("GET",options.url + "?" + params,true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST",options.url,true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(params); } } /* *格式化参数 */ function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".","")); return arr.join("&"); } /* * 合并对象，将配置的参数也一并上报 */ function cloneObj(oldObj) { //复制对象方法 if (typeof(oldObj) != 'object') return oldObj; if (oldObj == null) return oldObj; var newObj = new Object(); for (var prop in oldObj) newObj[prop] = oldObj[prop]; return newObj; }; function extendObj() { //扩展对象 var args = arguments; if (args.length < 2) {return;} var temp = cloneObj(args[0]); //调用复制对象方法 for (var n = 1,len=args.length; n 0)) { ext.push(fn.toString()); if (fn === fn.caller) { break;//如果有环 } fn = fn.caller; } ext = ext.join(","); defaults.msg = error.stack.toString(); } // 合并上报的数据，包括默认上报的数据和自定义上报的数据 var reportData=extendObj(params.data || {},defaults); // 把错误信息发送给后台 ajax({ url: params.url,//请求地址 type: "POST",//请求方式 data: reportData,//请求参数 dataType: "json",success: function (response,xml) { // 此处放成功后执行的代码 params.successCallBack&¶ms.successCallBack(response,xml); },fail: function (status) { // 此处放失败后执行的代码 params.failCallBack&¶ms.failCallBack(status); } }); },0); return true; //错误不会console浏览器上,如需要，可将这样注释 }; } window.badJsReport=badJsReport; })(); /*=========================== badJsReport AMD Export ===========================*/ if (typeof(module) !== 'undefined'){ module.exports = window.badJsReport; } else if (typeof define === 'function' && define.amd) { define([],function () { 'use strict'; return window.badJsReport; }); }

我们封装了原生ajax,还有将上报的参数对象合并。并暴露了一个全局方法 badJsReport@H_502_3@

使用方法:@H_301_2@@H_502_3@

1、将badJsReport.js加载到其他的js之前@H_502_3@

2、简单的使用方法：（这个执行方法要放在其他代码执行之前）@H_502_3@

后台的url *必须 })

3、如果需要新增上报参数，或者要知道发送给后台的回调。可以用下面的方法@H_502_3@

后台的url *必须 data:{},//自定义添加上报参数，比如app版本，浏览器版本 -可省略 successCallBack:function(response,xml){ // 发送给后台成功的回调，-可省略 },failCallBack:function(error){ // 发送给后台失败的回调，-可省略 } })

注意点：@H_301_2@@H_502_3@

1、对于跨域的JS资源，window.onerror拿不到详细的信息，需要往资源的请求添加额外的头部。@H_502_3@

静态资源请求需要加多一个Access-Control-Allow-Origin头部，也就是需要后台加一个Access-Control-Allow-Origin，同时script引入外链的标签需要加多一个crossorigin的属性。这样就可以获取准确的出错信息。@H_502_3@

2、因为代码的最后return true，所以如果有错误信息，浏览器不会console出来，如果需要浏览器console，可以注释掉最后的return true@H_502_3@

缺点：@H_301_2@@H_502_3@

对于压缩之后的代码，我们得到错误的信息，但是我们却无法定位到错误的行数，比如jquery的源码压缩，总共才3行。这样就很难定位到具体的地方了，因为一行有很多很多的代码。@H_502_3@

代码我放到了github上：@H_502_3@

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！@H_502_3@