最近在做一個(gè)RN項(xiàng)目璧尸，其中出現(xiàn)了一個(gè)崩潰問(wèn)題涌萤，原因是服務(wù)端數(shù)據(jù)結(jié)構(gòu)變更導(dǎo)致RN代碼報(bào)錯(cuò)“r.includes is not a function”番舆。這么小的問(wèn)題在瀏覽器里面不算什么贫橙，但是RN就會(huì)導(dǎo)致崩潰，iOS表現(xiàn)形式是閃退畅姊，Android是卡死咒钟，非常嚴(yán)重，值得我們重視若未。
那么朱嘴，都有哪些問(wèn)題會(huì)導(dǎo)致崩潰呢？
簡(jiǎn)單來(lái)說(shuō)陨瘩，語(yǔ)法錯(cuò)誤都會(huì)引起崩潰腕够。這些語(yǔ)法錯(cuò)誤在調(diào)試模式會(huì)顯示為紅屏報(bào)錯(cuò)级乍，release包不會(huì)顯示，會(huì)直接崩潰帚湘。
那RN為什么要如此設(shè)計(jì)呢玫荣？
js是弱類(lèi)型語(yǔ)言，在轉(zhuǎn)譯成OC大诸，Java或者對(duì)其調(diào)用時(shí)就需要嚴(yán)格處理捅厂。
我們應(yīng)該注意哪些場(chǎng)景呢？
- 接收的服務(wù)端數(shù)據(jù)結(jié)構(gòu)類(lèi)型资柔；
- 調(diào)用的NativeModule或者第三方模塊焙贷；
- 容易出錯(cuò)的方法需要足夠"健壯"；
- render等核心功能的錯(cuò)誤處理贿堰；
如此辙芍，自然想到兩個(gè)辦法來(lái)應(yīng)對(duì)以上場(chǎng)景：
- 調(diào)用方法前判斷類(lèi)型，不應(yīng)該調(diào)用該類(lèi)型沒(méi)有的方法羹与，比如string, object, array等; 比如開(kāi)篇提到的錯(cuò)誤“r.includes is not a function”故硅，我們是提前判斷對(duì)象是否為字符串來(lái)解決的：
-- r.includes('abc');
++ const isValid = typeof r == 'string';
++ isValid && r.includes('abc');
使用的bugly監(jiān)控平臺(tái)的數(shù)據(jù)證明了這個(gè)方法有效：
- 使用try, catch;
這樣可以避免報(bào)錯(cuò)引起崩潰了。但是纵搁，這樣加判斷吃衅，套try, catch代碼好丑，有些冗余腾誉，而且這種約定容易被忽略徘层。
有沒(méi)有自動(dòng)化的解決方案呢？
1. 代碼檢測(cè)
代碼檢測(cè)又可以分為兩個(gè)階段：
- 編譯階段利职，這個(gè)階段使用的工具就是Facebook提供的打包工具趣效，已經(jīng)有一些問(wèn)題可以被發(fā)現(xiàn)，比如文件找不到等眼耀；
-
編程階段英支，這個(gè)階段就是在保存文件之前，調(diào)用編譯工具之前哮伟，可以使用vscode等編輯器配置eslint來(lái)做高亮提示，如下圖：
vscode-eslint提示.png
2. 運(yùn)行時(shí)處理
在瀏覽器環(huán)境我們可以使用window.onerror來(lái)監(jiān)聽(tīng)全局報(bào)錯(cuò)妄帘，做統(tǒng)一的錯(cuò)誤處理楞黄，或統(tǒng)計(jì)，甚至告警抡驼，對(duì)于我們及時(shí)發(fā)現(xiàn)線上問(wèn)題鬼廓，排查問(wèn)題非常有幫助。
RN環(huán)境致盟，可以使用global.ErrorUtils錯(cuò)誤工具提供的setGlobalHandler方法處理, 比如：
global.ErrorUtils.setGlobalHandler(error => {
console.log('ErrorUtils發(fā)現(xiàn)了語(yǔ)法錯(cuò)誤碎税，避免了崩潰尤慰，具體報(bào)錯(cuò)信息：');
console.log(error.name, error.message, [{ text: 'OK' }]);
}, true);
利用ErrorUtils.setGlobalHandler，我們就可以避免崩潰雷蹂，統(tǒng)一處理問(wèn)題伟端，但如果你不希望統(tǒng)一處理，那么你就可以在特殊的代碼“套上”try, catch, 這個(gè)方法可以根據(jù)返回的error對(duì)象找到對(duì)應(yīng)的錯(cuò)誤類(lèi)型匪煌，行數(shù)责蝠，文件等信息，該方法源碼請(qǐng)參考：Facebook Github: InitializeJavaScriptAppEngine.js
另外萎庭，react-native-exception-handler也可以統(tǒng)一處理報(bào)錯(cuò)霜医，另外它也可以處理Native端的報(bào)錯(cuò)。
再說(shuō)一句React的ComponentDidCatch驳规，這個(gè)更適用于頁(yè)面基本的錯(cuò)誤監(jiān)控肴敛，而且低版本不支持該生命周期。
