vue項目中的js錯誤診斷

由於Vue的錯誤攔截機制

window.addEventListener('error', function (e) {})

並不能監聽到vue內部級別錯誤信息，退而求其次，利用vue本身錯誤監聽函數進行vue內部級別錯誤信息的收集，併發送到自定義事件，利用自定義事件處理收集到的錯誤信息。

// 利用vue內部錯誤監聽機制,監聽錯誤,併發送給自定義事件cuowu
Vue.config.errorHandler = function (err) {
  var e = new Event('cuowu');
  e.arguments = err;
  window.dispatchEvent(e);
}


// 用來接收vue產生的錯誤
window.addEventListener('cuowu', function () {
  var arr = Array.prototype.slice.apply(arguments)[0].arguments;
  // 錯誤信息上報參數
  var obj = {
    message: arr.message,
    info: arr.stack
  };
  
  // 錯誤信息上報
  errorUpload(obj);
})

再利用

  // 外部錯誤信息收集設計cdn跨域請在script標籤中加入跨域屬性
  window.addEventListener('error', function (e) {
    // 錯誤信息上報參數
    var obj = {
      message: e.message,
      info: e.stack
    };
  
    // 錯誤信息上報
    errorUpload(obj);
  })

進行外部級別error進行錯誤監聽，一個簡單的vue錯誤上報系統完成。