UDN-企业互联网技术人气社区

板块导航

浏览  : 324
回复  : 2

[原生js] 聊聊前端代码异常监控

[复制链接]
genie1003的头像 楼主
发表于 2017-1-2 15:18:37 | 显示全部楼层 |阅读模式
  在平时的工作,js报错是比较常见的一个情景,尤其是有一些错误可能我们在本地测试的时候测试不出来,当发布到线上之后才可以发现,如果抢救及时,那还好,假如很晚才发

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

  什么是前端代码异常

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

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

  1、JS脚本里边存着语法错误;

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

  类似于这种:
  1. for(var i=0;i<l;i++){
  2.    console.log(i);
  3. }
复制代码

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

  第一种是try..catch

  第二种是 window.onerror

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

  来采用第二种方法,也就是window.onerror方法。

  window.onerror

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

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

  部分过时的浏览器只能提供部分数据。它的用法如下:
  1. window.onerror = function (message, url, lineNo, columnNo, error)
复制代码

  五个参数的含义如下:

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

  2、url {String} 发生错误对应的脚本路径,比如是你的http://a.js报错了还是http://b.js报错了。

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

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

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

  兼容性问题

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

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

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

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

  不同浏览器默认可获取的参数值:
1.png

  写一个js报错的上报库

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

  实现思路:

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

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

  3、发送到后台服务器

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

  原理比较简单,代码如下:
  1. /**
  2. * Name:    badJsReport.js
  3. * Version  1.1.0
  4. * Author   xiangyulaodi
  5. * Address: https://github.com/xianyulaodi/badJsReport
  6. * Released on: December 22, 2016
  7. */

  8. ;(function(){

  9.     'use strict';

  10.     if (window.badJsReport){

  11.        return window.badJsReport
  12.     };

  13.     /*
  14.     *  默认上报的错误信息
  15.     */
  16.     var defaults = {
  17.         msg:'',  //错误的具体信息
  18.         url:'',  //错误所在的url
  19.         line:'', //错误所在的行
  20.         col:'',  //错误所在的列
  21.         error:'', //具体的error对象
  22.     };

  23.     /*
  24.     *ajax封装
  25.     */
  26.     function ajax(options) {
  27.         options = options || {};
  28.         options.type = (options.type || "GET").toUpperCase();
  29.         options.dataType = options.dataType || "json";
  30.         var params = formatParams(options.data);

  31.         if (window.XMLHttpRequest) {
  32.            var xhr = new XMLHttpRequest();
  33.         } else {
  34.            var xhr = new ActiveXObject('Microsoft.XMLHTTP');
  35.         }

  36.         xhr.onreadystatechange = function () {
  37.            if (xhr.readyState == 4) {
  38.                var status = xhr.status;
  39.                if (status >= 200 && status < 300) {
  40.                    options.success && options.success(xhr.responseText, xhr.responseXML);
  41.                } else {
  42.                    options.fail && options.fail(status);
  43.                }
  44.            }
  45.         }

  46.         if (options.type == "GET") {
  47.            xhr.open("GET", options.url + "?" + params, true);
  48.            xhr.send(null);
  49.         } else if (options.type == "POST") {
  50.            xhr.open("POST", options.url, true);
  51.            //设置表单提交时的内容类型
  52.            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  53.            xhr.send(params);
  54.         }
  55.     }

  56.     /*
  57.     *格式化参数
  58.     */
  59.     function formatParams(data) {
  60.        var arr = [];
  61.        for (var name in data) {
  62.            arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  63.        }
  64.        arr.push(("v=" + Math.random()).replace(".",""));
  65.        return arr.join("&");
  66.     }


  67.     /*
  68.     * 合并对象,将配置的参数也一并上报
  69.     */
  70.     function cloneObj(oldObj) { //复制对象方法
  71.       if (typeof(oldObj) != 'object') return oldObj;
  72.       if (oldObj == null) return oldObj;
  73.       var newObj = new Object();
  74.       for (var prop in oldObj)
  75.         newObj[prop] = oldObj[prop];
  76.       return newObj;
  77.     };

  78.     function extendObj() { //扩展对象
  79.       var args = arguments;
  80.       if (args.length < 2) {return;}
  81.       var temp = cloneObj(args[0]); //调用复制对象方法
  82.       for (var n = 1,len=args.length; n <len; n++){
  83.         for (var index in args[n]) {
  84.           temp[index] = args[n][index];
  85.         }
  86.       }
  87.       return temp;
  88.     }

  89.    /**
  90.    * 核心代码区
  91.    **/
  92.    var badJsReport=function(params){

  93.       if(!params.url){return}
  94.       window.onerror = function(msg,url,line,col,error){

  95.           //采用异步的方式,避免阻塞
  96.           setTimeout(function(){

  97.               //不一定所有浏览器都支持col参数,如果不支持就用window.event来兼容
  98.               col = col || (window.event && window.event.errorCharacter) || 0;

  99.               defaults.url = url;
  100.               defaults.line = line;
  101.               defaults.col =  col;

  102.               if (error && error.stack){
  103.                   //如果浏览器有堆栈信息,直接使用
  104.                   defaults.msg = error.stack.toString();

  105.               }else if (arguments.callee){
  106.                   //尝试通过callee拿堆栈信息
  107.                   var ext = [];
  108.                   var fn = arguments.callee.caller;
  109.                   var floor = 3;  //这里只拿三层堆栈信息
  110.                   while (fn && (--floor>0)) {
  111.                      ext.push(fn.toString());
  112.                      if (fn  === fn.caller) {
  113.                           break;//如果有环
  114.                      }
  115.                      fn = fn.caller;
  116.                   }
  117.                   ext = ext.join(",");
  118.                   defaults.msg = error.stack.toString();
  119.                 }
  120.                 // 合并上报的数据,包括默认上报的数据和自定义上报的数据
  121.                 var reportData=extendObj(params.data || {},defaults);
  122.                
  123.                 // 把错误信息发送给后台
  124.                 ajax({
  125.                     url: params.url,      //请求地址
  126.                     type: "POST",         //请求方式
  127.                     data: reportData,     //请求参数
  128.                     dataType: "json",
  129.                     success: function (response, xml) {
  130.                         // 此处放成功后执行的代码
  131.                       params.successCallBack&&params.successCallBack(response, xml);
  132.                     },
  133.                     fail: function (status) {
  134.                         // 此处放失败后执行的代码
  135.                       params.failCallBack&&params.failCallBack(status);
  136.                     }
  137.                  });

  138.           },0);

  139.           return true;   //错误不会console浏览器上,如需要,可将这样注释
  140.       };

  141.   }
  142.    
  143.   window.badJsReport=badJsReport;

  144. })();

  145. /*===========================
  146. badJsReport AMD Export
  147. ===========================*/
  148. if (typeof(module) !== 'undefined'){
  149.     module.exports = window.badJsReport;
  150. }
  151. else if (typeof define === 'function' && define.amd) {
  152.     define([], function () {
  153.         'use strict';
  154.         return window.badJsReport;
  155.     });
  156. }
复制代码

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

  使用方法:

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

  2、简单的使用方法:(这个执行方法要放在其他代码执行之前)
  1. badJsReport({
  2.   url:'http://www.baidu.com',  //发送到后台的url  *必须
  3. })
复制代码

  3、如果需要新增上报参数,或者要知道发送给后台的回调。可以用下面的方法
  1. badJsReport({
  2.   url:'http://www.baidu.com', //发送到后台的url  *必须
  3.   data:{},   //自定义添加上报参数,比如app版本,浏览器版本  -可省略
  4.   successCallBack:function(response, xml){
  5.       // 发送给后台成功的回调,-可省略
  6.   },
  7.   failCallBack:function(error){
  8.       // 发送给后台失败的回调,-可省略
  9.   }
  10. })
复制代码

  注意点:

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

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

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

  缺点:

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

相关帖子

发表于 2017-1-2 15:19:07 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

发表于 2017-1-4 09:50:31 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部