转转商业前端错误监控系统(Sentry)策略升级

正文

请到「今天看啥」查看全文

不过对于商业团队来说，我们会更加注重线上质量，还有处理问题的效率（效率即生命），每一个商户对我们来说都是非常重要的，我们不能因为频繁的线上问题，还有处理问题效率上让商户觉得我们很 山寨 。

所以进行了一系列的优化升级，从 项目改造优化—>上报信息优化—>sentry配置优化 。

每月线上bug折线图

从7月份我们上线了以下这套策略以后，我们能把线上用户发现错误控制在了平 2 个以内，收益明显。

下面会具体说一下我们的方案策略。

为什么要进行上报策略的调整？

我们总结了使用 Sentry 过程中遇到的一些问题，如下：

• 收集信息混乱（所有错误信息混杂在一起）；

• 定位问题相对较慢；

• 影响范围评估难；

• 错误频率无法统计；

• 部分监控缺失（不能全方位监控）；

• 小程序缺少监控；

• 接口缺少监控；

• 404请求缺少监控；

• 预警邮件过于频繁（容易让开发人员接收疲劳）；

当然，相对以前没有错误监控来说，已经能够很好的使用了。

但是，如果能把这些问题都解决了，那么我们不止线上质量和处理效率的还可以更进一步的提升，而且还能在开发阶段避免部分问题，先于用户发现问题，还能为我们大前端产出一套公共解决方案。

如何解决？

• 以攻代守（主动上报）

• 多维度标签 & 辅助差错信息 & 自定义错误分组规则

• 修改邮件发送规则（上报即重点）

• 全方位监控兼容

以攻代守（主动上报）

侵入项目，虽然前端实际工作中一直以对业务无侵入为研究方向。但在实际的业务中偶尔的侵入业务去做一些处理是很有必要的，给业务带来的收益也是可观的，我们能做的就是尽量少的侵入业务代码，导致污染。以下是我们对项目的改造策略：

以 react 为例，我们做了以下处理，vue也是类似方案：

页面改造

• 增加错误捕获组件：

• 组件错误捕获 & 页面错误捕获：

请到「今天看啥」查看全文