看了[一步一步搭建前端监控系统] 觉得非常不错，记录总结一下

JS错误监控

1. 重写window.onerror 方法，来处理异步的错误
2. 重写console.error 方法,暂时没发现有什么用
3. 重写window.onunhandlerejection,用于Promise出错，但是没有catch的时候

静态资源加载监控

需要先加载监控的sdk才有用

1. 通过window.onerror方法，跨域资源加载会有问题，需要设置``crossorigin```,参考MDN
2. 利用performance.getEntries() 方法，能获取所有加载成功的资源列表，但是检查时机难掌握
3. 通过window.addEventListener('error',cb)来捕获。

function cb(e) {
  let type = e.target.localName;
  let sourceUrl = '';
  if (type == 'link') { // css
    sourceUrl = e.target.href;
  } else if (type == 'script') // js
    sourceUrl = e.target.src;
  }
  //todo: upload
}

接口请求监控

前端请求用ajax、fetch,或者其他框架都是对 window.XMLHttpRequest的封装

1. 对ajax请求，监听loadstart,loadend事件,因为事件的detail引用一样，所以能定位请求的开始和结束
2. 对fetch请求，因为浏览器内置的，现在我们代码执行，所以需要重写一下

JS截屏和录屏

1. 截屏：html2canvas
2. 录屏：rrweb

写在最后

引用MDN文档，window.onerror 和 window.addEventListener的区别：

GlobalEventHandlers 的onerror属性是用于处理error事件的事件处理程序，错误事件在各种目标对象的不同类型错误被触发：

• 当JavaScript运行时错误（包括语法错误）发生时，window会触发一个ErrorEvent接口的error事件，并执行window.onerror()。
• 当一项资源（如<img>或<script>）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的window.addEventListener捕获。

加载一个全局的error事件处理函数可用于自动收集错误报告。

参考资料

• 一步一步搭建前端监控系统
• MDN GlobalEventHandlers