【原】聊聊js代码格外监控

  首先下载mongodb,若是您嫌官网慢,那么您可以去自个儿的百度云下载 链接:http://pan.baidu.com/s/1pKEWTBX
密码:v3y4
,下载之后安装,注意:你最好把那些设置到d盘(意思是你安装的时候只需求把安装地点c:改成d:),这样之后的文书你都不要求改了,作者都帮你弄好了,之后就是下一步下一步的装置到位。

window.onerror

   
 打开浏览器自带的开发者工具,当一个错误爆发时,我们可以即刻拿到晋升,并且明白不当爆发的岗位以及调用的堆栈音讯。

我们得以经过 window.onerror 来捕获页面上的各类本子执行万分,它能支持大家赢得有效的音信。可是那些艺术存在包容性难点,在差距的浏览器上提供的多少不完全一致,

有些过时的浏览器只可以提供一些数据。它的用法如下:

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

  点击确定,找到path,点击他,在头里新加那条并点击确定。

现,那就大概导致很大的损失了。如若大家前端可以监控到那种报错,并即刻申报的话,那我们的难点就比较好消除了。所以大家后天来聊天前端代码的百般监控

  安装到位后找到您的设置地方,借使你依照地点说的做那么地方应该是D:\Program
Files\MongoDB\Server\3.4,在内部新建一个mongo.conf,并复制上边代码进行保存,注意编码方式为utf-8(笔者按的时候就是被那步坑了遥遥无期)

 什么是前者代码万分  

一般语法错误以及运行时不当,浏览器都会在console里边体现出错误音讯,以及出错的文件,行号,堆栈新闻。

咱俩先来说手前端代码非凡是何许看头。前端代码万分指的是以下三种情况:

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

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

类似于那种:

for(var i=0;i<l;i++){
   console.log(i);
}

起名 2

 

那么大家怎样来捕获那种尤其呢,有三种办法,

先是种是try..catch

第三种是 window.onerror

是因为try.catch 没办法捕捉到全局的失实事件,也即是说
唯有try,catch的块里边运行出错才会被您捕捉到。所以我们那边排除它的那种方案,

来使用第几种方法,相当于window.onerror方法。

 

  之后就是拓展数据库的操作了,可以去参考小编写的那篇博客http://www.cnblogs.com/qiaohong/p/7716717.html

   
在常常的工作,js报错是比较宽泛的一个地方,尤其是有局部荒唐可能大家在当地测试的时候测试不出去,当文告到线上今后才可以发现,假诺抢救及时,这还好,借使很晚才发

MongoDB shell version v3.4.9
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.4.9
Server has startup warnings:
2017-10-22T18:37:40.715+0800 I CONTROL  [initandlisten]
2017-10-22T18:37:40.715+0800 I CONTROL  [initandlisten] ** WARNING: Access control is not enabled for the database.
2017-10-22T18:37:40.715+0800 I CONTROL  [initandlisten] **          Read and write access to data and configuration is unrestricted.
2017-10-22T18:37:40.715+0800 I CONTROL  [initandlisten]

缺点:

对于收缩之后的代码,大家收获错误的新闻,可是大家却无力回天稳定到错误的行数,比如jquery的源码压缩,总共才3行。这样就很难定位到现实的地点了,因为一行有众多居多的代码。关于这一个题材,可以看看阮一峰的那篇作品:

JavaScript Source Map
详解

 

代码作者放到了github上:https://github.com/xianyulaodi/badJsReport

 

有误之处,欢迎提出

 

参照作品:

营造可依赖的前端格外监控服务-采集篇

JSTracker:前端很是数据收集

前者代码至极监控方案window.onerror

 

  上面初始陈设环境变量,找到电脑的环境变量,此电脑右键属性,高级系统设置,环境变量,新建,变量名为 MongoDB
变量值为 D:\Program Files\MongoDB\Server\3.4\

注意点:

1、对于跨域的JS资源,window.onerror拿不到详细的音讯,须要往资源的伏乞添加额外的尾部。

静态资源请求须要加多一个Access-Control-Allow-Origin底部,相当于索要后台加一个Access-Control-Allow-Origin,同时script引入外链的价签需要加多一个crossorigin的本性。那样就可以取得精确的失误消息。

2、因为代码的最终return
true,所以假如有错误新闻,浏览器不会console出来,假设急需浏览器console,可以注释掉最后的return
true

 

  在3.4文本夹下新建多少个子文件夹,起名分别为data、etc和logs,在logs文件夹下新建一个名为mong.log。

写一个js报错的上报库

既然如此知道了window.onerror的用法,为何大家不来写一个js库来监督大家的前端js,废话少说,写之。

 

贯彻思路:

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

起名,2、除了那七个参数,可以追加自定义参数

3、发送到后台服务器

 

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

 

原理相比较容易,代码如下:

/**
 * Name:    badJsReport.js
 * Version  1.1.0
 * Author   xianyulaodi
 * Address: https://github.com/xianyulaodi/badJsReport
 * Released on: December 22, 2016
 */

;(function(){

    'use strict';

    if (window.badJsReport){ 

       return window.badJsReport 
    };

    /*
    *  默认上报的错误信息
    */ 
    var defaults = {
        msg:'',  //错误的具体信息
        url:'',  //错误所在的url
        line:'', //错误所在的行
        col:'',  //错误所在的列
        error:'', //具体的error对象
    };

    /*
    *ajax封装
    */
    function ajax(options) {
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.dataType = options.dataType || "json";
        var params = formatParams(options.data);

        if (window.XMLHttpRequest) {
           var xhr = new XMLHttpRequest();
        } else { 
           var xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        xhr.onreadystatechange = function () {
           if (xhr.readyState == 4) {
               var status = xhr.status;
               if (status >= 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 <len; n++){
        for (var index in args[n]) {
          temp[index] = args[n][index];
        }
      }
      return temp;
    }

   /**
   * 核心代码区
   **/
   var badJsReport=function(params){

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

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

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

              defaults.url = url;
              defaults.line = line;
              defaults.col =  col;

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

              }else if (arguments.callee){
                  //尝试通过callee拿堆栈信息
                  var ext = [];
                  var fn = arguments.callee.caller;
                  var floor = 3;  //这里只拿三层堆栈信息
                  while (fn && (--floor>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&&params.successCallBack(response, xml);
                    },
                    fail: function (status) {
                        // 此处放失败后执行的代码
                      params.failCallBack&&params.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

 

选用办法:

1、将badJsReport.js加载到别的的js以前

2、简单的选拔格局:(那一个执行办法要放在其余代码执行以前)

badJsReport({
  url:'http://www.baidu.com',  //发送到后台的url  *必须
})

3、若是急需新增上报参数,或然要精通发送给后台的回调。可以用下边的艺术

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

  想了想要么把这么些写上啊,毕竟网上的学科有众多坑的。

%MongoDB%\bin;D:\Program Files\MongoDB\Server\3.4\bin;
dbpath=D:\Program Files\MongoDB\Server\3.4\data #数据库路径  
logpath=D:\Program Files\MongoDB\Server\3.4\logs\mongo.log #日志输出文件路径  
logappend=true #错误日志采用追加模式  
journal=true #启用日志文件,默认启用  
quiet=true #这个选项可以过滤掉一些无用的日志信息,若需要调试使用请设置为false  
port=27017 #端口号 默认为27017 

   

mongod --config "D:\Program Files\MongoDB\Server\3.4\mongo.conf" --install --serviceName "MongoDB" 

  以管理员方式运行cmd(表示重点!!!)进入到D:\Program
Files\MongoDB\Server\3.4\bin里面,输入上面的下令并回车,假诺没有报错就关了他啊,没什么用了

  找到服务,如若您找不到,那么看那些https://jingyan.baidu.com/article/e5c39bf5ad52ed39d7603328.html,找到之后去找MongoDB服务,点击启动,等待启动完毕,打开cmd输入mongo,你会看到下面这段代码,说明你安装成功了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图