react-native错误监控

在h5页面我们可以使用window.onerror来监听全局报错，对于我们排查线上问题非常有帮助，并且结合sourceMap几乎可以很快定位到问题。但是在rn中是没有这个事件的，那么如果监控这些错误呢？

需求

我们要监控线上的报错，并且针对特殊用户做白名单上报，以便于排查特定场景问题。

问题

rn并没有全局监控错误接口提供

解决方案

在查了一些资料后，发现在rn源码中就有相应的错误监听，所以我们自定义错误处理的时候同样可以使用这些。

1.global.ErrorUtils

在rn中有个ErrorUtils，是作为解析错误处理用的，其中有个函数setGlobalHandler，可以看到是专门为了自定义错误处理而设置的。

image.png
而默认设置是把错误打印出来
image.png

因此我们根据这个便可以定义我们自己的错误处理方案。当然我们不会把默认设置的错误处理干掉，所以可以先保存下原来的错误处理函数，也就是global.ErrorUtils._globalHandler。
这里返回的错误信息有

{
  line: num,
  column: num,
  sourceURL: url,
  stack: error stack
}

基本来说我们需要的信息都有了。
错误信息通过stack来获取，而错误位置，我们可以结合sourceMap和错误位置来定位源码。

2.promise错误

对于异步错误的捕获同样在rn源码中也有，直接copy来用

if (__DEV__) {
  require('promise/setimmediate/rejection-tracking').enable({
    allRejections: true,
    onUnhandled: (id, error) => {
      const {message, stack} = error;
      const warning =
        `Possible Unhandled Promise Rejection (id: ${id}):\n` +
        (message == null ? '' : `${message}\n`) +
        (stack == null ? '' : stack);
      console.warn(warning);
    },
    onHandled: (id) => {
      const warning =
        `Promise Rejection Handled (id: ${id})\n` +
        'This means you can ignore any previous messages of the form ' +
        `"Possible Unhandled Promise Rejection (id: ${id}):"`;
      console.warn(warning);
    },
  });
}

3.其他

除了上述直接获取之外，还有一些其他的npm包可以做，比如react-native-exception-handler，具体可以参考https://www.ctolib.com/master-atul-react-native-exception-handler.html

总结

本地开发定位错误很方便，但是线上的问题很不好定位，这就需要我们有完整监控日志，因此错误上报很重要，当然上报方式也要注意，首先不能影响正常业务的运行，其次要注意服务器压力（上报频率以及内容大小）。