js错误监控

Posted 2022-12-03 vcxiaohan2

即时错误

• 概念：即未注意写出的错误
• 捕获：使用try catch或者window.onerror

资源加载错误

• 概念：js、css、img 不存在的情况
• 捕获：由于window的error事件不能冒泡，所以我们使用事件捕获

• 由于浏览器的同源策略，这里我们不使用ajax来上报数据，但是script、link、image这类资源是不受限制的，为了方便，我们选用Image对象来加载一张图片，达到调用接口来上报错误的目的，这些接口调用后一般无需知道返回结果，所以我们在后端可以设置返回状态码204，用以提高性能(埋点系统也是这种方法)

  window.addEventListener('error', err => 
      console.log(err)
      new Image().src = 'http://xxx/test.png?error=xxx'
  , true)// error不能冒泡，所以最后一个参数是true，表示开启事件捕获

跨域js错误

• 概念：捕获跨域js中的即时错误
• 捕获：参考以下文章

前端代码异常监控
如何做前端异常监控？