前端异常监控方案理论篇

liliangel 2021-09-02 原文

目的

对前端线上代码错误进行排查，降低 JS Error 的错误量，加强h5在不同手机的webview的兼容性，提升代码质量，优化用户体验。

四个阶段

采集

在index.html文件添加window.onerror全局监听。
可能出现异常的代码块添加try catch，如JSON.parse()等。
Promise实例抛出异常捕获，如网络请求axios添加catch函数。
在必要的代码块添加正常的log，以便追踪数据的流转以及分析代码的运行顺序。

存储

将采集到的异常信息级别分为info，warn，error，统一存储在localstorage。

上报

接口：

后端配合提供上报接口：

Methods：get
请求参数：

{
errorType： //错误级别info，warn，error
errorMsg: //错误信息
url: //出错的地址
row: //错误发生行
col: //错误发生列
time: //错误发生时间
ua: windw.navigator.userAgent
browser: //浏览器信息
osVersion: //客户端版本
machine: {
//尽量详细的手机信息
},
remark: //备注、扩展字段
}

策略：

error日志实时上报。
info或warn级别的先存在本地缓存，再10分钟为频率统一上报到服务端。
主动上报：在特定的可疑地方，实时上报必要信息

方式：

前端采取动态创建img标签，src为接口地址，并将所有错误信息拼接到地址后面。

分析

1.前期提供一个实时查看的监控控制台。
2.服务器定时任务每天凌晨将错误上报信息表统计出来，后期在运营后台添加一个错误报表界面。

注意事项

1.提供一个开关，可以随时控制是否错误上报。比如发现上报频率过高、字段信息太多、死循环等，可以暂时关闭上报功能。
2.线上的js代码是通过压缩、混淆的，采集到的信息不够精确，分析问题有一定局限性，可考虑Source Map处理，参考文章 http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html