前端线上bug回顾—Sentry日志异常引起的故障

今天我们回顾这样的一个线上bug，这个线上bug引起了整个拿去花产品的所有用户的还款失败，用户在点击还款按钮的时候，会提示：“出错啦，请稍后再试”。

这个bug同样也导致我们的前端同事泪眼含珠，测试同学梨花带雨。

bug原因是在点击还款按钮的时候，调用了下面的代码：

let summary = {}
try {
  summary = JSON.parse(payorderSummary);
} catch (e) {
  summary = {}
  Sentry.errorWithScope({
    level: 'fatal',
    tag: { msg: '跳转C端支付错误' },
    err: e
  })
}

上面的 Sentry.errorWithScope 函数的作用，是将异常上报到sentry服务器中，不过因为大意，Sentry.errorWithScope 这个函数的内部代码也会报错往外抛异常，最终导致在上报异常的时候发生异常，影响外层的业务逻辑。

那Sentry. errorWithScope 中是哪一行报了错呢：

if (tag) Object.keys.map(key => /* 此处省略n行 */)

可以看出 Object.keys 是个方法，而不是数组，所以没有 map 方法，因此会报错。

这个bug其实反映了不少的问题：

第一，Sentry.errorWithScope 的代码实现，是我们开发拷贝另外一个项目组的同事的，因为其主要的功能是上报日志，跟业务无关，因此这种代码应该独立出业务项目，做成一个npm包来使用。

第二，上报异常的时候，我们发现，需要手动的在catch中填写相对应的上报代码，并不是非常的友好，能不能使用自动化的方式，自动的帮助我们添加上报代码呢？答案是肯定的，我们可以利用babel插件来转化我们的代码，也就是说，当babel在转化我们的代码的时候，如果遇到catch，就自动的在catch下面添加Sentry上报异常的代码：

try {
  const num = JSON.parse("123") // 这行会抛异常
} catch (e) {
  Sentry. errorWithScope(e) // 这行是通过babel插件转化代码时，自动添加的
  // 你的处理代码
}

上面的插件已经写出来了，只不过略微变通的一下，可以点击查看并使用：babel-plugin-catch-log

这个插件会自动的识别出你代码的catch语句，并且自动的加上一个收集异常的代码：__elog.push(e)(红框部分)：

因此，我们在使用Sentry进行日志上报的时候，就不需要在每个try...catch...中手动的添加捕获代码，只需要统一在某个地方定时监控一下__elog数组，如果里面有异常，就取出来上报：

setInterval(() => {
  const err = __elog.shift()
  Sentry. errorWithScope({err})
}, 1000)

总结：通过babel-plugin-catch-log插件，可以自动收集和处理异常，减少人工参与，也避免了不必要的bug。