异常分类

• 页面js报错
• ajax请求异常
• 页面资源加载异常（如：加载某个图片资源失败）
• promise异常
• iframe加载异常
• 页面崩溃和卡顿异常

常见的try catch

不能捕获异步的错误。比如这个setTimeout内部的错误捕获不到

    try {
      setTimeout(() => {
        logErrorInfo();// 上报错误
      }, 1000);
    } catch (e) {}

处理页面js报错

    window.onerror = function(message,source,lineno,colno,error){
    message:出错误的信息
    source：出错误的文件
    lineno：出错的代码行号
    colno：出错的代码列号
    error：错误的对象，包含错误的具体信息
    }

处理页面资源加载异常

window.addEventListener('error',function(error){
       logErrorInfo()
// 要设置允许冒泡，当资源加载失败后，会触发这个资源的error事件，会向上冒泡，会被window的error事件捕获到
},true) 

promise异常

window.addEventListener('unhandledrejection',function(error){
       logErrorInfo()
})

处理vue异常 -> errHandler

Vue.config.errHandler = (err,vm,info){
       logErrorInfo()
}

处理react异常 -> componentDidCatch

class ErrorBoundat extends React.Compoent{
     componentDidCatch(error , info) {
       logErrorInfo()
  }
}

处理iframe加载异常

    window.frames[0].onerror = function (
      message,
      source,
      lineno,
      colno,
      error
    ) {
      console.log();
      return true;
    };

处理页面崩溃和卡顿异常

    window.addEventListener('load', function () {
      sessionStorage.setItem('good_exit', 'pending');
    });
    window.addEventListener('beforeunload', function () {
      sessionStorage.setItem('good_exit', 'true');
    });
    if (
      sessionStorage.getItem('good_exit') &&
      sessionStorage.getItem('good_exit') !== 'true'
    ) {
      alert('页面异常关闭');
    }

上报方式：

• 发起一个同步 XMLHttpRequest 来发送数据。或者是一个GET请求或head请求

缺点：1.跨域问题、2.接口挂掉

• 创建一个 img 元素并设置 src

    function report(error) {
      const reportUrl = 'http://www/baidu.com/report';
      new Image().src = `${reportUrl}?logs=${error}`;
    }

缺点：大部分用户代理会延迟卸载（unload）文档以加载图像。
优点：

• 没有跨域的限制，可以直接发送跨域的GET请求，不用做特殊处理；
• 兼容性好，一些静态页面可能禁用了脚本，这时script标签就不能使用了；
• 不需要将其append到文档，只需设置src属性便能成功发起请求。

• 创建一个几秒的 no-op 循环。
• navigator.sendBeacon（无阻塞发送统计数据）

Navigator.sendBeacon()

document.addEventListener("visibilitychange", function logData() {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
});

• 相较于图片的src，这种方式的更有优势：
• 不会和主要业务代码抢占资源，而是在浏览器空闲时去做发送；
• 并且在页面卸载时也能保证请求成功发送，不阻塞页面刷新和跳转；

现在的埋点监控工具通常会优先使用sendBeacon，但由于浏览器兼容性，还是需要用图片的src兜底。

localStorage暂存

localStorage暂存也可以通过localStorage暂存数据，等到浏览器空闲的时候上传，上传成功删除本地数据