【原】聊聊js代碼異常監控

時間  2019-11-11
標籤 聊聊 代碼 異常 監控 欄目 JavaScript 简体版
原文   原文鏈接

    在平時的工做，js報錯是比較常見的一個情景，尤爲是有一些錯誤可能咱們在本地測試的時候測試不出來，當發佈到線上以後才能夠發現，若是搶救及時，那還好，假如很晚才發javascript

現，那就可能形成很大的損失了。若是咱們前端能夠監控到這種報錯，並及時上報的話，那咱們的問題就比較好解決了。因此咱們今天來聊聊前端代碼的異常監控html

 什麼是前端代碼異常  

通常語法錯誤以及運行時錯誤，瀏覽器都會在console裏邊體現出錯誤信息，以及出錯的文件，行號，堆棧信息。前端

咱們先來講手前端代碼異常是什麼意思。前端代碼異常指的是如下兩種狀況：java

一、JS腳本里邊存着語法錯誤；jquery

二、JS腳本在運行時發生錯誤。git

相似於這種：github

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

 

那麼咱們如何來捕獲這種異常呢，有兩種方法，ajax

第一種是try..catchjson

第二種是 window.onerror跨域

因爲try.catch 無法捕捉到全局的錯誤事件，也便是說 只有try,catch的塊裏邊運行出錯纔會被你捕捉到。因此咱們這裏排除它的這種方案，

來採用第二種方法，也就是window.onerror方法。

 

window.onerror

     打開瀏覽器自帶的開發者工具，當一個錯誤發生時，咱們能夠馬上獲得提示，而且知道錯誤發生的位置以及調用的堆棧信息。

咱們能夠經過 window.onerror 來捕獲頁面上的各類腳本執行異常，它能幫助咱們獲取有用的信息。可是這個方法存在兼容性問題，在不一樣的瀏覽器上提供的數據不徹底一致，

部分過期的瀏覽器只能提供部分數據。它的用法以下:

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

 

五個參數的含義以下：

一、message {String} 錯誤信息。直觀的錯誤描述信息，不過有時候你確實沒法從這裏面看出端倪，特別是壓縮後腳本的報錯信息，可能讓你更加疑惑。

二、url {String} 發生錯誤對應的腳本路徑，好比是你的http://a.js報錯了仍是http://b.js報錯了。

三、lineNo {Number} 錯誤發生的行號。

四、columnNo {Number} 錯誤發生的列號。

五、error {Object} 具體的 error 對象，包含更加詳細的錯誤調用堆棧信息，這對於定位錯誤很是有幫助。

 

兼容性問題

不一樣瀏覽器對同一個錯誤的 message 是不同的。

IE10如下瀏覽器只能獲取到 message，url 和 lineNo這三個參數，獲取不到columnNo 和 error 

不過 window.event 對象提供了 errorLine 和 errorCharacter，以此來對應相應的行列號信息。

在使用onerror的時候，咱們可使用arguments.callee.caller 來遞歸出調用堆棧，這一類信息是最直接的錯誤信息信息，因此是必需要捕獲並上報的。後面咱們會用js去示範。

 

不一樣瀏覽器默承認獲取的參數值：

寫一個js報錯的上報庫

既然知道了window.onerror的用法，爲啥咱們不來寫一個js庫來監控咱們的前端js,廢話少說，寫之。

 

實現思路：

一、收集window.onerror的五個參數

二、除了那五個參數，能夠增長自定義參數

三、發送到後臺服務器

 

咱們暫且給咱們的庫起名爲 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

 

使用方法:

一、將badJsReport.js加載到其餘的js以前

二、簡單的使用方法：（這個執行方法要放在其餘代碼執行以前）

badJsReport({
  url:'http://www.baidu.com',  //發送到後臺的url  *必須
})

三、若是須要新增上報參數，或者要知道發送給後臺的回調。能夠用下面的方法

badJsReport({
  url:'http://www.baidu.com', //發送到後臺的url  *必須
  data:{},   //自定義添加上報參數，好比app版本，瀏覽器版本  -可省略
  successCallBack:function(response, xml){
      // 發送給後臺成功的回調，-可省略
  },
  failCallBack:function(error){
      // 發送給後臺失敗的回調，-可省略
  }
})

注意點：

一、對於跨域的JS資源，window.onerror拿不到詳細的信息，須要往資源的請求添加額外的頭部。

靜態資源請求須要加多一個Access-Control-Allow-Origin頭部，也就是須要後臺加一個Access-Control-Allow-Origin，同時script引入外鏈的標籤須要加多一個crossorigin的屬性。這樣就能夠獲取準確的出錯信息。

二、由於代碼的最後return true，因此若是有錯誤信息，瀏覽器不會console出來，若是須要瀏覽器console，能夠註釋掉最後的return true

 

缺點：

對於壓縮以後的代碼，咱們獲得錯誤的信息，可是咱們卻沒法定位到錯誤的行數，好比jquery的源碼壓縮，總共才3行。這樣就很難定位到具體的地方了，由於一行有不少不少的代碼。關於這個問題，能夠看看阮一峯的這篇文章：

JavaScript Source Map 詳解

 

代碼我放到了github上：https://github.com/xianyulaodi/badJsReport

 

有誤之處，歡迎指出

 

參考文章：

構建可靠的前端異常監控服務-採集篇

JSTracker：前端異常數據採集

前端代碼異常監控方案window.onerror

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程