错误监控以及上报

1、如何设计 5W1H

• What: 发生了什么错误：逻辑错误、数据错误、网络错误、语法错误
• When: 出现的时间段，如时间戳
• Who: 影响来多少用户，包括报错事件数、IP、设备信息。
• Where: 出现的页面是哪些，包括页面、广告栈、媒体
• Why: 错误的原因是什么，报错错误堆栈、行列、SourceMap
• How: 怎么定位解决问题，我们还需要手机系统等信息。

2、错误类型

JS执行错误

网络错误

• Javascript语法错误，代码异常
• AJAX请求异常
• 静态资源加载异常
• Promise异常
• 跨站脚本错误
• 页面崩溃
• 框架错误

3、收集错误

1/try/catch

try/catch可以捕获常规运行时错误，语法错误和异步错误不行。

2/window.onerror

当JS运行时错误发生，window会触发一个ErrorEvent接口的error事件。

可以捕获：常规运行时错误、异步错误

不能捕获：语法错误、资源加载错误

3/window.addEventListener

当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件， 这些 error 事件不会向上冒泡到 window，但能被捕获。而window.onerror不能监测捕获。

可以捕获：图片、script、 css加载错误 不可以捕获: new Image()、fetch请求

4/window.addEventListener('unhandledrejection'') 捕获promise的错误

当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件； 这可能发生在 window 下，但也可能发生在 Worker 中。 这对于调试回退错误处理非常有用。

// 全局统一处理Promise
window.addEventListener("unhandledrejection", function(e){
  console.log('捕获到异常：', e);
});
fetch('https://tuia.cn/test')

5/页面崩溃

可以监听window对象的load和beforeunload事件，并结合sessionStorage对页面崩溃实施监控

6/框架的错误

react使用componentDidCatch来处理错误。

框架会通过console.error的方式来输出，可以劫持console.error来监听这些报错信息。

4、错误上报

考虑的点

• 独立的域名，跨域
• 何时上报，在页面稳定后进行上报，不要阻塞页面解析以及渲染。进行合并。

方案

• 1*1的gif，最小，不会携带cookie，无跨域问题 new Image();
• navigator.sendBeacon(); 详情参考一篇讲透自研的前端错误监控 (opens new window)以及前端开发核心知识进阶