ReactNative 在 Debug 的情況下，其實(shí)還是很貼心的，如果出現(xiàn)崩潰的 Bug，會(huì)直接出紅屏，提示你崩潰的棧的具體信息，這些內(nèi)容可以幫助你快速的定位問(wèn)題。
而假如現(xiàn)在同樣的代碼，使用 Release 模式的話，則會(huì)直接崩潰了。來(lái)看看崩潰的 Log 輸出。

image.png

那么接下來(lái)來(lái)看看如何定位到這個(gè)崩潰的真實(shí)代碼，value@304:1133 這里，就是線索。
react-native 命令，還有一個(gè)可配置的參數(shù) —sourcemap-output，它就是我們需要的。
react-native bundle
--platform android
--dev false
--entry-file index.js
--bundle-output android/app/src/main/assets/index.android.bundle
--assets-dest android/app/src/main/res/
--sourcemap-output android-release.bundle.map

注意這段命令，需要在 ReactNative 目錄的根目錄下執(zhí)行，否者會(huì)提示你找不到 node_module 。執(zhí)行完成，就可以在 ReactNative 項(xiàng)目目錄下，看到輸出的 android-release.bundle.map 文件了。

解析這個(gè) source-map ，NodeJs 為我們提供了一個(gè)專門(mén)的庫(kù)來(lái)解析，這里不多解釋，直接上代碼。
var sourceMap = require('source-map');
var fs = require('fs');

fs.readFile('../android-release.bundle.map', 'utf8', function (err, data) {
var smc = new sourceMap.SourceMapConsumer(data);

console.log(smc.originalPositionFor({
    line: 304,
    column: 1133
}));

});

注意看這里指定的 304 行 1133 列，我們運(yùn)行一下，看看輸出。

image.png

到此，我們算是完成了 ReactNative App，崩潰分析的一個(gè)完整的鏈路邏輯，我們只需要自己寫(xiě)個(gè)腳本工具，就可以幫我們精準(zhǔn)定位了。

前面有點(diǎn)長(zhǎng)，這里總結(jié)一下本小結(jié)的內(nèi)容。

ReactNative 不同的編譯模式，使用的 JS 來(lái)源不同。Debug 模式來(lái)自 Packager Server，而 Release 模式，來(lái)自 Apk 的 assets 目錄。
Debug 模式下的崩潰，會(huì)觸發(fā)紅屏，而 Release 模式下的崩潰，會(huì)直接導(dǎo)致 App 崩潰。
Debug 模式，之所以可以顯示崩潰棧的基本信息，是因?yàn)榫幾g的 JS 文件中，包含了對(duì)應(yīng)的源文件和代碼行號(hào)。而這些在 Release 模式下的 JS 是沒(méi)有的。
Release 模式的崩潰棧是被混淆后的，可以通過(guò)崩潰棧顯示的行號(hào)和列號(hào)，來(lái)定位代碼，但是無(wú)法定位具體源文件。
通過(guò) react-native 命名，增加 --sourcemap-output參數(shù)，指定輸出需要的混淆 Mapping 文件，它其內(nèi)包含了混淆的信息。
解讀 ReactNative Mapping 文件，可以使用 source-map 這個(gè) NodeJs 庫(kù)來(lái)進(jìn)行解析，可以精準(zhǔn)定位到行號(hào)和源文件名。

另外，RN 項(xiàng)目很容易崩潰
經(jīng)常使用發(fā)行包進(jìn)行測(cè)試的開(kāi)發(fā)者們可能會(huì)發(fā)現(xiàn)，在發(fā)行版本中，如果出現(xiàn)了腳本錯(cuò)誤，還是會(huì)直接閃退。我們可能會(huì)希望捕獲這種錯(cuò)誤，給予用戶合理的提示，并采集錯(cuò)誤詳情幫助后續(xù)版本改進(jìn)。這時(shí)候可以使用如下的代碼：

require('ErrorUtils').setGlobalHandler(function(err) {
// 做你自己的任何處理
});

實(shí)驗(yàn)代碼如下：

require('react-native')
require('ErrorUtils').setGlobalHandler(function (err) {
console.log('Just ignore');
});
setTimeout(()=>{
throw new Error(‘Ouch');
}, 10000);

require('./src/app'); // 正常啟動(dòng)app