关于前端监控

利用前端监控信息我们可以快速发现项目的问题，更好的避免出现大规模用户体验问题，还可以帮我们统计问题的类别和占比。

加载性能信息采集

核心思路是利用window.performance获取页面加载性能数据。

错误信息采集

主要包括，静态资源加载错误、js运行时错误、Promise执行错误（需要单独捕获）。

静态资源加载错误和js运行错误可以通过给window添加一个error事件的Listener，回调要区分错误类型是js错误还是dom加载错误：

window.addEventListener('error', function(e) {
  if (!e) return
  let target = e.target || e.srcElement
  if (target instanceof HTMLElement) { // dom加载异常
    // ...封装异常信息，记录文件名，类型，地址等
  }  else { // js运行异常
    // ...封装异常信息，包括错误信息，错误js代码行数，列数等
  }
}, true)

addEventListener的第三个参数 一定要是true,表示在捕获阶段触发，如果改成false就是冒泡阶段，那是获取不到错误事件的。

Promsie执行错误使用addEventListener('unhandledrejection', callback)捕获，这里只能拿到错误信息，拿不到代码行数和列数。

最后统一时间段上报错误信息。

捕获js错误还可以使用window.onerror，不过与addEventListener用法不一样

1. addEventListener能够捕获到资源加载错误，window.onerror不能。
2. 都能捕获js运行时错误，捕获到的错误参数不同。addEventListener为msg, url, lineNo, columnNo, error一系列参数；window.onerror参数为一个event对象，event对象中都含有上述参数的信息。

参考文章：
https://blog.csdn.net/weixin_37989623/article/details/107392535