前言
本文只对错误收提供一些思路，对于具体的实现不做具体的讨论。
页面错误类型
页面错误大致可以分为三种：
- 资源加载错误
- Ajax请求错误
- JS运行报错
资源加载错误
资源加载错误主要包含：img、link、script 这三类错误。
对于上面这三种常规资源报错通过 window.addEventListener('error', handler, true) 监听。
但是，假如错误收集的JavaScript代码运行前，资源报错该怎么处理？可以引入提前监听的方式来收集，必须要将下面这段代码放到所有资源引用之前，这样我们在处理错误收集的逻辑时，可以对 __sourceError 中保存的错误做处理。
<script type="text/javascript">
window.addEventListener("error", function (e) {
var elem = e.target;
if(elem.tagName && /img|script|link/.test(elem.tagName.toLowerCase())){
window.__sourceError = window.sourceError || [];
window.__sourceError.push(e);
}
}, true);
</script>
数据收集
对于这类错误，我们可以收集这些数据：
- 发生错误的页面网址
- 资源开始加载的时间
- XPath页面元素定位符
- 加载失败的元素url
- 资源发生错误的 base URL网址
- ...
Ajax请求错误
对于ajax请求错误的监控，我们可以重写 XMLHttpRequest 来实现。
对于 fetch 请求，只重写 XMLHttpRequest 是不会生效的，我们需要重写 fetch 方法。
数据收集
对于这类错误，我们可以收集这些数据：
- ajax请求地址
- ajax请求方法
- ajax请求时间
- 响应的status状态码
- ajax响应的内容
- ajax响应的时间
- ...
JS运行报错
- 监听 window.onerror
- window.addEventListener('unhandledrejection', handler, true)
- Catch Vue Error
数据收集
对于这类错误，我们可以收集这些数据：
- 发生错误JS文件url
- JS错误名称
- JS错误message信息
- JS发生错误的行号
- JS发生错误的列号
- JS错误堆栈信息
- ...
