Как добавить исходную карту в React Native для производства?

Question

Я получил журнал ошибок, как следующее в то время как приложение разбился:

Fatal Exception: com.facebook.react.modules.core.JavascriptException: onSelect index.android.bundle: 20: 7148 onPress индекс. android.bundle: 20: 2435

Но это не очень полезно для меня, чтобы стрелять. Как я могу включить исходную карту, чтобы я мог отслеживать, где проблема?

UPDATE 2018 https://docs.expo.io/versions/latest/guides/using-sentry.html выглядит многообещающим!

Answer 1

Для исходного отображения здесь является то, как я это сделать:

В моем расслоении команды для моего производства сборки я говорю это, чтобы создать источник карты:

IOS:

react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js 

Android - мне пришлось на самом деле изменить файл android/app/react.gradle, чтобы получить исходные карты, генерируемые при компиляции выпуска. Там может быть более простым способом, но в основном найти, где он строит команду пучка в методе bundleReleaseJsAndAssets и добавить немного источника карты к нему:

if (Os.isFamily(Os.FAMILY_WINDOWS)) { 
    commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", 
     entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js") 
} else { 
    commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", 
     entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js") 
} 

Выходной путь выглядит немного странно, но это ставит его в вашем (то же самое место, что и у iOS. Я так хотел, вы можете поместить его в любом месте).

После того, как вы получили сообщение об ошибке с номером строки, это ничего не значит, что вы запускаете ее через NPM-пакет «source-map». Вы могли бы получить очень подробно с вашим подходом, но я просто пошел с:

var sourceMap = require('source-map'); 
var fs = require('fs'); 

fs.readFile('./sourcemap.js', 'utf8', function (err, data) { 
    var smc = new sourceMap.SourceMapConsumer(data); 

    console.log(smc.originalPositionFor({ 
     line: 16, 
     column: 29356 
    })); 
}); 

Где строка и столбец должен быть заменен Withe номер строки и столбца из вашего примера выхода выше.

Это, очевидно, работает лучше всего, если у вас есть исходные карты, хранящиеся где-то, когда номера строк и столбцов меняются от сборки до сборки при изменении вашего кода. Он должен быть довольно близок, хотя, если вы можете использовать настройку управления исходным кодом, чтобы вернуться к фиксации, которая была использована для сборки рассматриваемого приложения, и повторно сгенерировать пакет с дополнительными битами в команду для создания исходной карты.