前端代碼錯誤日誌監控——Sentry

隨着項目工程化的發展，對於提高產品性能的要求也愈來愈多。產品即使經過研發自測，測試各類測，到了用戶使用過程當中，依然仍是會出現一些bug；這對這些bug，不是全部用戶會進行反饋（難以發現這些問題）甚至拋棄對於產品的使用；並且這些問題的復現性也相對困難。所以，對於bug的及時發現和解決，成爲產品優化的一個考慮重心。

通常狀況下，捕獲錯誤的方法——

一、window.onerror針對整個js文件進行全局錯誤監控

二、try…catch針對性的進行錯誤監控

三、throw new Error()

捕獲的錯誤的展現——

一、經過這二者進行錯誤捕獲時，瀏覽器的console就不會輸出錯誤信息，除非咱們將錯誤信息 經過console.error打印顯示。

二、瀏覽器做爲js的宿主，錯誤信息也只限於瀏覽器進行捕獲和顯示，刷新後錯誤提示可能不會復現

若是須要經過平臺實時監測並查詢錯誤日誌——解決思路：

一、若是須要一個平臺能夠查看全部日誌信息，就須要將捕獲的錯誤log進行保存，好比localStorage。

二、保存後還須要發送到服務端，便於在另外一個平臺進行統一查看。

三、期間產生跨域的問題

經過信息查詢和後臺小夥伴的推薦，瞭解的兩種能夠進行前端錯誤日誌監控的平臺——

一、https://fundebug.com/          中文版，易操做，僅限於JavaScript

二、https://sentry.io/     英文版，兼容先後端多種語言類型

目前，用了一個經過vue-cli搭建的後臺管理系統，對進行了 sentry的錯誤收集代碼測試，實現過程——————————  

一、在該平臺註冊用戶並新建項目後，安裝

 

import Vue from 'vue'
//測試錯誤獲取
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Vue.prototype.$Raven = Raven; //設置全局變量
Raven
  .config('https://')
  .addPlugin(RavenVue, Vue)
  .install();

二、全局監控代碼

 

 

window.onerror = function(msg, url, line, col, error) {
  //console.log(msg + '--' + url + '--' + line + '--' + col + '--' + error);
  //沒有URL不上報！上報也不知道錯誤
  if (msg != "Script error." && !url) {
    return true;
  }
  //採用異步的方式
  //我遇到過在window.onunload進行ajax的堵塞上報
  //因爲客戶端強制關閉webview致使此次堵塞上報有Network Error
  //我猜想這裏window.onerror的執行流在關閉前是必然執行的
  //而離開文章以後的上報對於業務來講是可丟失的
  //因此我把這裏的執行流放到異步事件去執行
  //腳本的異常數下降了10倍
  setTimeout(function() {
    var data = {};
    //不必定全部瀏覽器都支持col參數
    col = col || (window.event && window.event.errorCharacter) || 0;

    data.url = url;
    data.line = line;
    data.col = col;
    if (!!error && !!error.stack) {
      //若是瀏覽器有堆棧信息
      //直接使用
      data.msg = error.stack.toString();
    } else if (!!arguments.callee) {
      //嘗試經過callee拿堆棧信息
      var ext = [];
      var f = arguments.callee.caller,
        c = 3;
      //這裏只拿三層堆棧信息
      while (f && (--c > 0)) {
        ext.push(f.toString());
        if (f === f.caller) {
          break; //若是有環
        }
        f = f.caller;
      }
      ext = ext.join(",");
      data.msg = ext;
    }
    console.log(data);
    Raven.captureException(data, {
      level: 'info', // one of 'info', 'warning', or 'error'
      logger: 'window',
      tags: { git_commit: 'window' }
    });
    //把data上報到後臺！
  }, 0);
  return true;
}

三、單獨的方法監控

 

 

let funcLog = (func, val) => {
  try {
    if (val) {
      func(val);
    } else {
      func();
    }
  } catch (e) {
    Raven.captureBreadcrumb({
      message: '獲取方法或者參數錯誤',
      category: 'function',
    });
    Raven.captureException(e, {
      level: 'error', // one of 'info', 'warning', or 'error'
      logger: 'function',
      tags: { git_commit: 'function' }
    });
  }
}

四、ajax數據交互的監控，該項目採用的是vue-resource，僅用post方法爲例

 

 

let ajaxLog_post = (that, url, data, success_func, error_func, all_func) => {
  let _this = that;
  //console.log('get');
  _this.$http.post(url, data, {
      before: function() {
       
      }
    })
    .then(function(response) {
      //console.log('get2');
      _this.loading = false;
      if (all_func) {
        all_func(data);
        return false;
      }
      let data_return = response.body;
      //console.log(data_return);
      if (data_return.respcd == '0000') {
        try {
          if (success_func) {
            success_func(data_return);
          }
        } catch (e) {
          console.error(e);
          _this.$Raven.captureException(e, {
            level: 'error', // one of 'info', 'warning', or 'error'
            logger: 'ajaxPost_function',
            tags: { git_commit: 'ajaxPost_function' }
          });
        }
      } else {
        if (data_return.respmsg) {
          _this.toastmsg = data_return.respmsg;
        } else {
          _this.toastmsg = data_return.resperr;
        }
        _this.visible_toast = true;
        if (error_func) {
          error_func(data_return);
        }
      }
    }, function(response) {
      
    })
    .catch(function(response) {
      
    });
}

五、備註

一、參考

http://www.cnblogs.com/xianyulaodi/p/6201829.html

 

二、在ajax數據交互過程當中，執行的事件發生錯誤，window.onerror捕獲不到，故須要單獨處理；

三、對於其餘window.onerror捕獲不到的代碼，能夠經過異步處理，以便捕獲

 

let test_log = null;
test_log.indexOf('q');
setTimeout(function() {
 test_log.indexOf('q');
}, 1000);