React Native 错误监控
最近在做一个RN项目，其中出现了一个崩溃问题，原因是服务端数据结构变更导致RN代码报错“r.includes is not a function”。这么小的问题在浏览器里面不算什么，但是RN就会导致崩溃，iOS表现形式是闪退，Android是卡死，非常严重，值得我们重视。
那么，都有哪些问题会导致崩溃呢？
简单来说，语法错误都会引起崩溃。这些语法错误在调试模式会显示为红屏报错，release包不会显示，会直接崩溃。
红屏示例
那RN为什么要如此设计呢？
js是弱类型语言，在转译成OC，Java或者对其调用时就需要严格处理。
我们应该注意哪些场景呢？
- 接收的服务端数据结构类型；
- 调用的NativeModule或者第三方模块；
- 容易出错的方法需要足够"健壮"；
- render等核心功能的错误处理；
如此，自然想到两个办法来应对以上场景：
- 调用方法前判断类型，不应该调用该类型没有的方法，比如string, object, array等; 比如开篇提到的错误“r.includes is not a function”，我们是提前判断对象是否为字符串来解决的：
-- r.includes('abc');
++ const isValid = typeof r == 'string';
++ isValid && r.includes('abc');
使用的bugly监控平台的数据证明了这个方法有效：
降低崩溃率.png
- 使用try, catch;
这样可以避免报错引起崩溃了。但是，这样加判断，套try, catch代码好丑，有些冗余，而且这种约定容易被忽略。
有没有自动化的解决方案呢？
1. 代码检测
代码检测又可以分为两个阶段：
- 编译阶段，这个阶段使用的工具就是Facebook提供的打包工具，已经有一些问题可以被发现，比如文件找不到等；
-
编程阶段，这个阶段就是在保存文件之前，调用编译工具之前，可以使用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，这个更适用于页面基本的错误监控，而且低版本不支持该生命周期。
