web前端错误日志

1.vue (错误)

vue.config.errorHandler=function(){
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用

}

Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` 是组件的继承关系追踪
}

2.window 错误收集

window.onerror 和window.addEventListener('error')

3.图片错误

img.onerr=function(){
}

4.ajax 错误日志 收集

5.unhandledrejection promise 函数数据报错收集
6.网络传递数据()
下面的例子展示了一个理论上的统计代码——在卸载事件处理器中尝试通过一个同步的 XMLHttpRequest 向服务器发送数据。这导致了页面卸载被延迟

window.addEventListener('unload', logData, false);

function logData() {
    var client = new XMLHttpRequest();
    client.open("POST", "/log", false); // 第三个参数表明是同步的 xhr
    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    client.send(analyticsData);
}

这就是 sendBeacon() 方法存在的意义。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

    function xhrPing(url, params, callback) {
      var xhr = new window.XMLHttpRequest();
      xhr.open('POST', url, true);
      xhr.withCredentials = true;
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      if (callback) {
          xhr.onreadystatechange = function () {
              if (xhr.readyState !== 4) {
                return;
         }
              var status = xhr.status;
              var isSuccess = status >= 200 && status < 400;
              var error = null;
              if (!isSuccess) {
                error = new Error();
              }
              callback(error);
          };
      }
      xhr.send(params);
    }
    
function beaconPing(url, params) {
      if (!window.navigator.sendBeacon) {
          return window.navigator.sendBeacon(url, params);
      } else {
          return false;
      }
    }
    
 function imgPing(url, params, callback) {
      var key = '__SOME_RANDOM_KEY__' + (+new Date());
      var img = new Image();
      window[key] = img;
      img.onload = img.onerror = img.onabort = function () {
          img.onload = img.onerror = img.onabort = null;
          window[key] = null;
          img = null;
          if (callback) {
              callback();
          }
      };
      img.src = url + "?" + params + "&_=" + key;
      return true;
    }
   
function errorPing(url, params, callback) {
      if (1 <= 100 * Math.random()) {
        return;
      }
      imgPing(url, params.substring(0, 4096), callback);
    }
    
    function smartPing(api, param, callback) {
      try {
        callback = callback || function () {};
        if (2036 >= param.length) {
          imgPing(api, param, callback);
        } else if (8192 >= param.length) {
          beaconPing(api, param, callback) || xhrPing(api, param, callback) || imgPing(api, param, callback);
     } else {
          errorPing(api, param, callback);
          console.log('overflow length : ' + params.length);
        }
      } catch(e) {console.log(e);}
    };
 window.addEventListener('unhandledrejection', function(event) {
      var params = 'str=' + encodeURIComponent(JSON.stringify({url: window.location.href, err: event.reason})) + "&_=" + (+new Date());
      smartPing('/ajax/web/log/frontLog', params);
    });
    
   window.addEventListener('error', function (event) {
      var params = 'str=' + encodeURIComponent(JSON.stringify({url: window.location.href, err: event.error.stack.toString()})) + "&_=" + (+new Date());
      smartPing('/ajax/web/log/frontLog', params);
    });