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错误上报系统完成。

你可能感兴趣的:(js错误诊断,vue中简单的js错误诊断)