前端异常监控方案理论篇
目的
对前端线上代码错误进行排查，降低 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
