今天我们回顾这样的一个线上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。
