聊聊前端的错误日志和监控

前端错误日志和监控能提高应用的稳定性。帮助程序员及时响应用户反馈：尽早的发现问题，解决问题。

用户在使用中遇到程序异常时，程序上报报错信息（即日志的采集和上报），通过短信等方式通知到相关负责人（即告警）。负责人通过分析上报的报错信息来定位问题。

我们提到日志时，通常指日志的采集，上报和分析。我们提到监控，通常指日志的展示和告警。

本文主要介绍错误日志和监控包含的主要功能：错误日志数据的采集，存储，上报，分析，展示，以及报错信息的告警。我们下面一个个功能来看。

错误日志的采集

错误日志的采集包含 2 步：

捕获前端的异常
记录异常的具体信息。

捕获前端的异常

需要捕获的前端异常包括:

主动捕获运行时异常。用 try-catch 来处理。
处理意料之外的全局运行时异常。给 windows 绑 error 事件来处理。
未处理的异步中的异常。给 windows 绑 unhandledrejection 事件来处理。
接口报错。
Vue，React 产生的异常。

了解更多，推荐阅读：前端异常的处理方法汇总。

记录异常的具体信息

详细的异常信息能帮我们更好的定位到错误。记录内容遵循 4W 原则：

WHO did WHAT and get WHICH exception in WHICH environment?

用户信息(WHO)
出现异常时该用户的信息，包括：用户的状态、权限等。

行为信息(did What)
用户进行什么操作时产生了异常。最好能录制用户出错的场景的视频。通过大量的截图来实现录制的性能太差了。更好的方案是通过记录操作序列(用户行为、DOM变化)，在重放的时候将操作序列再执行一遍。想了解细节的，可以看下面的文章：

《rrweb：打开 web 页面录制与回放的黑盒子》: https://zhuanlan.zhihu.com/p/60639266
《网页应该如何录屏呢？》: https://blog.fundebug.com/2019/08/06/how-to-record-web-video/

异常信息(WHICH exception)
异常的代码信息包含：报错信息，错误堆栈，出错文件，出错的源码的行和列，页面url，用户操作的 DOM元素节点等。

环境信息(WHICH environment)
环境信息包含：手机品牌，操作系统，浏览器及版本，调用的接口地址，参数信息等。

日志存储

单纯一条异常日志并不能帮助我们快速定位到问题，需要记录一系列的用户操作。但如果用户每一个操作后，就立即将该行为日志传到服务器，会浪费用户的网络资源。因此，一般会这些日志存储在用户客户端本地，达到一定条件之后，再同时打包上传一组日志。

日志存储一般用 IndexedDB 来存储。日志的数据会比较大。IndexedDB 具备容量大、支持部分关系型数据库的功能(分库，表，索引等)、支持异步的特性。异步的特性保证它不会对界面的渲染产生阻塞。

推荐阅读: 《打造前端离线日志(一): IndexedDB》: https://juejin.cn/post/6844903800482840584#heading-3

日志上报

日志上报需要设计一些接口来上传异常日志。这里就不展开了。

日志上报的时机可以简单的分为 2 种：即时上报和批量上报。

即时上报

严重的异常即时上报。考虑到网络存在不稳定的情况，严重的异常上报需要有一个确认机制，只有确认服务端已经成功接收到该上报信息之后，才算完成。否则需要有一个循环机制，确保上报成功。

批量上报

非严重的异常批量上报。批量上传的时机可以是日志达到一定数量，也可以按一定的时间间隔。

传批量数据时，必然遇到数据量大的情况，因此要压缩上报数据。压缩可以用 lz-string。lz-string是一个非常优秀的字符串压缩类库，兼容性好，代码量少，压缩比高，压缩时间短，压缩率达到惊人的60%。

日志分析和展示

日志分析和展示的核心点在于数据可视化：将采集到数据，转化为可理解的指标。根据不同的使用场景，设计合适的展示方式：表格，折现图，饼图等等。推荐一个选择可视化网站：图之典(http://tuzhidian.com/)。

日志分析也要考虑查询性能。毕竟日志数据日积月累会是海量的。这里不做展开。

告警

告警就是错误发生时，通知到相关人员。具体包含的一些配置规则有：

触发规则。满足什么条件时触发。条件如：异常的严重等级，包含的内容，向符合什么条件的用户告警。
推送渠道。如：短信，电话，邮件，企业微信，钉钉等方式。
推送频率。如：严重的告警 10 分钟循环推送，直到手动关闭。不严重的一条发一次。
后置动作。告警后，自动触发的行为。如：自动建 Bug 工单。

总结

前端错误日志和监控提高应用的稳定性的有效手段。前端错误日志和监控是很大，很复杂的系统，主要包含：错误日志的采集，存储，上报，分析，展示，以及报错信息的告警。

最后，推荐几个前端日志和监控工具：

Sentry: 专业的应用错误监控平台。可以自己部署。
FunDebug: 国内专业的应用错误监控平台。
bad.js: 国内优秀的前端监控开源方案。
Grafana: 开源的可视化面板。配置数据源，设置展示规则，能生成图表(表格,折线图，热力图等)。也支持配置告警。

参考文档

《前端异常监控解决方案研究 – 腾讯CDC》: https://juejin.cn/post/6844903924013465608
《打造前端离线日志(一): IndexedDB》: https://juejin.cn/post/6844903800482840584#heading-3

原文始发于微信公众号（前端GoGoGo）：聊聊前端的错误日志和监控

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/45631.html