携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

为什么需要错误监控

• 在开发过程中，难免会遇到有些错误场景，但我们不希望这种错误中断JS的执行，因此就需要捕获错误
• 有些时候，我们也需要监控特定的错误信息上报到后台，因此也需要错误监控

错误监控的捕获

1.运行时的错误捕获方式

• try...catch
  • 用于捕获即时运行错误，不至于使得JS代码由于一处错误无法继续执行
• window.onerror
  • 全局监听异常来捕获
• Vue.config.errorHandler
  • VUE组件内部中的错误
• Vue.prototype.$throw
  • VUE的错误捕获

• window.onunhandledrejection
  • 监听未捕获到的Promise错误

2.资源加载错误的捕获方式

• object.onerror

  • 不能使用window.onerror无法冒泡到window

• performance.getEntries()

  • 返回的是一个数组，里面每项.name都是成功加载的资源的名称
  • 通过doncumet.getElementsByTagName('img')可以得到所有需要加载的img标签
  • 对比两个数组，可以得到没有成功加载的资源

• Error事件捕获

  • error不能冒泡，但可以捕获

    //可以成功捕获到加载错误的资源
    window.addEventListener('error',function(e){
        console.log('捕获', e)
    },true)
    

3.跨域的js运行错误

跨域的js运行错误跨域捕获吗，错误提示什么，应该怎么处理？

可以用window.onerror捕获，但是拿不到具体信息，都是Script error

• 如果想要拿到具体信息

  1. 在script标签增加crossorigin属性

     <script src="/dd/cc.js" crossorigin="anonymous"></script>
     

  2. 在服务端设置js资源响应头Access-Control-Allow-Origin:*

上报错误的方式

• 采用Image对象上报（推荐）
  • 所有浏览器都支持 Image 对象，包括那些不支持XMLHttpRequest对象的浏览器，兼容性更好
  • 还可以避免跨域限制

    // 这样写比ajax简单得多，而且不用借助任何第三方库，直接发送请求上报
    (new Image()).src = 'http://(上报路径)'
    

• 采用Ajax通信的方式上报（不推荐）