前端异常监控方案理论篇

目的

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

四个阶段

采集

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

存储

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

上报

接口:

后端配合提供上报接口:

Methods:get
请求参数:

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

策略:

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

方式:

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

分析

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

注意事项

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

posted @ 2019-03-26 10:06  微人类  阅读(189)  评论(0编辑  收藏