关于前端错误监控日志系统

Posted 2021-04-02 多啦C梦

    即使我们前端开发完成后，会有一系列的 Web 应用的上线前的验证，如自测、QA 测试、code review 等，以确保应用能在生产上没有事故。

    但是事与愿违，很多时候我们都会接到客户反馈的一些线上问题，这些问题有时候可能是你自己代码的问题。这样的问题一般能够在测试环境重现，我们很快的能定位到问题关键位置。但是，很多时候有一些问题，我们在测试中并未发现，可是在线上却有部分人出现了，问题确确实实存在的，这个时候我们测试环境又不能重现，还有一些偶现的生产的偶现问题，这些问题都很难定位到问题的原因，让我们前端工程师头疼不已。

    而我们不可能每次都远程给用户解决问题，或者让用户按 F12 打开浏览器控制台把错误信息截图给我们吧。这时候，我们不得不借助一些工具来解决这一系列令人头疼的问题。

    前端错误监控日志系统就应用而生。当前端代码在生产运行中出现错误的时候，第一时间传递给监控系统，从而第一时间定位并且解决问题。

有很多成熟的方案可供选择：ARMS、fundebug、BadJS、Sentry。政采云当前使用的是 Sentry 的开源版本，并结合业务进行一些改造：

• 与构建系统结合，构建项目时自动生成 Sentry 项目，注入 Sentry 脚本

• 客服端注入 Sentry 客户端脚本后，按项目、页面等不同粒度配置告警事件的过滤规则

• 对接钉钉消息系统，将告警消息推送到订阅群

• 过滤接口错误和优化 Promise 错误上报信息