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

总结

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • DAY13 :今天来一条练习题:请问下面四个人分别是哪种类型,把你的答案写出来。 培训开始,老师要大家进行自我介绍...
    awonlaw阅读 347评论 10 1
  • 今天下午,实验中学南校区的操场,星光璀璨,礼花满天,歌声嘹亮…… 来自初二年级的全体学生和部分老师共同为...
    梅一笔阅读 898评论 0 1
  • 外甥女过些天就要中考了,端午节一起在外婆家吃饭,中考就成了讨论热点。 外甥女在本地最好的初中就读,不过近几次考试不...
    之间居阅读 275评论 0 2
  • 老兰在还是小兰的时候,长得是面如冠玉,唇红齿白,一双浓眉下的眼睛熠熠生辉,光华卓耀。 颇受附近四邻八村的小姑娘喜爱...
    mettiy阅读 309评论 0 0