Jak dodać sourcemap w React Native for Production?

Question

dostałam dziennik błędów jak następuje, gdy aplikacja awarii:

krytyczny wyjątek: com.facebook.react.modules.core.JavascriptException: onSelect index.android.bundle: 20: 7148 onPress indeksu. android.bundle: 20: 2435

Ale nie jest to dla mnie pomocne, gdybym miał problemy z filmowaniem. Jak mogę włączyć mapę źródłową, aby znaleźć przyczynę problemu?

AKTUALIZACJA 2018 https://docs.expo.io/versions/latest/guides/using-sentry.html Wygląda obiecująco!

Answer 1

Dla odwzorowania źródłowego tutaj jest sposób przejść o nim:

W moim wiązki polecenia dla mojego kompilacji produkcyjnej Mówię to, aby wygenerować mapę źródło:

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 - musiałem zmodyfikować plik android/app/react.gradle, aby wygenerować mapy źródłowe podczas kompilacji wydania. Nie może być łatwiejszy sposób, ale w zasadzie można znaleźć gdzie buduje polecenia wiązki w metodzie bundleReleaseJsAndAssets i dodać trochę źródło mapie, aby je:

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") 
} 

Ścieżka wyjściowa wygląda nieco dziwnie, ale to stawia go na swój poziom root (to samo miejsce co iOS.) Chciałem to w ten sposób. Możesz oczywiście umieścić go w dowolnym miejscu).

Następnie, gdy wystąpi błąd z numerem linii, który oznacza, że ​​nic nie jest uruchamiane przez pakiet NPM "mapy źródłowej". Można prawdopodobnie uzyskać bardzo skomplikowane ze swoim podejściu, ale ja po prostu poszedł z:

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 
    })); 
}); 

Gdzie wiersz i kolumna powinna być zastąpiona linią witka i numer kolumny z wyjściem przykładzie powyżej.

To oczywiście działa najlepiej, jeśli masz zapisane gdzieś mapy źródłowe, a numery kolumn zmieniają się z kompilacji na kompilację w miarę zmiany kodu. Powinno to jednak być dość bliskie, jeśli możesz użyć wybranej konfiguracji kontroli źródła, aby powrócić do zatwierdzenia, które zostało użyte do zbudowania aplikacji i ponownie wygenerować pakiet z dodatkowymi bitami do polecenia, aby wygenerować mapę źródłową.