React Native 避免崩溃

最近在做一个RN项目，其中出现了一个崩溃问题，原因是服务端数据结构变更导致RN代码报错“r.includes is not a function”。这么小的问题在浏览器里面不算什么，但是RN就会导致崩溃，iOS表现形式是闪退，Android是卡死，非常严重，值得我们重视。

那么，都有哪些问题会导致崩溃呢？

简单来说，语法错误都会引起崩溃。这些语法错误在调试模式会显示为红屏报错，release包不会显示，会直接崩溃。

红屏示例

那RN为什么要如此设计呢？

js是弱类型语言，在转译成OC，Java或者对其调用时就需要严格处理。

我们应该注意哪些场景呢？

1. 接收的服务端数据结构类型；
2. 调用的NativeModule或者第三方模块；
3. 容易出错的方法需要足够"健壮"；
4. render等核心功能的错误处理；

如此，自然想到两个办法来应对以上场景：

1. 调用方法前判断类型，不应该调用该类型没有的方法，比如string, object, array等; 比如开篇提到的错误“r.includes is not a function”，我们是提前判断对象是否为字符串来解决的：

-- r.includes('abc');
++ const isValid = typeof r == 'string';
++ isValid && r.includes('abc');

使用的bugly监控平台的数据证明了这个方法有效：

降低崩溃率.png

2. 使用try, catch;

这样可以避免报错引起崩溃了。但是，这样加判断，套try, catch代码好丑，有些冗余，而且这种约定容易被忽略。

有没有自动化的解决方案呢？

1. 代码检测

代码检测又可以分为两个阶段：

1. 编译阶段，这个阶段使用的工具就是Facebook提供的打包工具，已经有一些问题可以被发现，比如文件找不到等；

2. 编程阶段，这个阶段就是在保存文件之前，调用编译工具之前，可以使用vscode等编辑器配置eslint来做高亮提示，如下图：

   
   
   

   vscode-eslint提示.png

2. 运行时处理

在浏览器环境我们可以使用window.onerror来监听全局报错，做统一的错误处理，或统计，甚至告警，对于我们及时发现线上问题，排查问题非常有帮助。
RN环境，可以使用global.ErrorUtils错误工具提供的setGlobalHandler方法处理, 比如：

global.ErrorUtils.setGlobalHandler(error => {
  console.log('ErrorUtils发现了语法错误，避免了崩溃，具体报错信息：');
  console.log(error.name, error.message, [{ text: 'OK' }]);
}, true);

利用ErrorUtils.setGlobalHandler，我们就可以避免崩溃，统一处理问题，但如果你不希望统一处理，那么你就可以在特殊的代码“套上”try, catch, 这个方法可以根据返回的error对象找到对应的错误类型，行数，文件等信息，该方法源码请参考：Facebook Github: InitializeJavaScriptAppEngine.js
另外，react-native-exception-handler也可以统一处理报错，另外它也可以处理Native端的报错。
再说一句React的ComponentDidCatch，这个更适用于页面基本的错误监控，而且低版本不支持该生命周期。