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

5,084 阅读5分钟

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

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

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

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

错误日志的采集

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

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

捕获前端的异常

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

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

了解更多,推荐阅读:前端异常的处理方法汇总

记录异常的具体信息

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

WHO did WHAT and get WHICH exception in WHICH environment?

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

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

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

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

日志存储

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

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

推荐阅读: 《打造前端离线日志(一): IndexedDB》: juejin.cn/post/684490…

日志上报

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

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

即时上报

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

批量上报

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

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

日志分析和展示

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

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

告警

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

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

总结

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

开发一个前端错误日志和监控系统的工作量很大,可以接入一些第三方日志和监控工具::

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

参考文档