web-dev-qa-db-fra.com

Comment ajouter sourcemap dans React Native for Production?

J'ai reçu un journal d'erreurs comme celui-ci lors du crash de l'application:

Exception fatale: com.facebook.react.modules.core.JavascriptException: onSelect index.Android.bundle: 20: 7148 onPress index.Android.bundle: 20: 2435

Mais ce n'est pas vraiment utile pour moi de dépanner. Comment pourrais-je activer la carte source afin de pouvoir localiser le problème?

MISE À JOUR 2018 https://docs.expo.io/versions/latest/guides/using-sentry.html Semble prometteur !

reactjsreact-nativesource-maps
32
noooooooob

Pour la cartographie des sources, voici comment je procède:

Dans ma commande de bundle pour ma production, je lui dis de générer une carte source:

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 - J'ai dû modifier le fichier Android/app/react.gradle pour obtenir les cartes sources générées lors de la compilation. Il existe peut-être un moyen plus simple, mais en gros, vous trouvez où il construit la commande bundle dans la méthode bundleReleaseJsAndAssets et y ajoutez le bit de mappage source:

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

Le chemin de sortie semble un peu étrange mais cela le place à votre niveau racine (même endroit que iOS. Je le voulais comme ça. Vous pouvez évidemment le mettre n'importe où).

Ensuite, une fois que vous avez une erreur avec le numéro de ligne qui ne signifie rien, vous l'exécutez via le package NPM "source-map". Vous pourriez probablement être très élaboré avec votre approche, mais je suis simplement allé avec:

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

Où la ligne et la colonne doivent être remplacées par le numéro de ligne et de colonne de votre exemple de sortie ci-dessus.

Cela fonctionne évidemment mieux si vous avez les cartes source stockées quelque part car les numéros de ligne et de colonne changent de génération en génération à mesure que votre code change. Cela devrait être assez proche si vous pouvez utiliser la configuration de contrôle de source de votre choix pour revenir au commit qui a été utilisé pour créer l'application en question et recréer le bundle avec les bits supplémentaires de la commande pour générer la carte source.

54
rmevans9

Android inspiré par la réponse de @ chetstone

À partir de la version 0.32 pour Android, vous pouvez modifier votre Android/app/build.gradle pour y parvenir. Cherchez la ligne

apply from: "../../node_modules/react-native/react.gradle"

Juste au-dessus de cela, vous verrez quelque chose comme:

project.ext.react = [
    entryFile: "index.js",
]

Modifiez-le pour qu'il corresponde à ce qui suit

project.ext.react = [
    entryFile: "index.js",
    extraPackagerArgs: ["--sourcemap-output", file("$buildDir/../../../sourcemap.Android.js")]
]

Sur iOS

Accédez à vos phases de construction dans Xcode pour la phase "Bundle React Code et images natifs" et ajoutez:

export EXTRA_PACKAGER_ARGS="--sourcemap-output sourcemap.ios.js"
14
otusweb

Comme indiqué, il n'existe aucun moyen évident de générer le fichier sourcemap pour React Native sur iOS. La commande bundle est appelée à partir de react-native-xcode.sh, et il n'y a aucune disposition pour ajouter des paramètres à la ligne de commande bundle. Mais j'ai trouvé un moyen propre de le faire.

react-native-xcode.sh utilise la variable d'environnement BUNDLE_CONFIG pour spécifier un fichier de configuration. Si vous créez un fichier de configuration vide, cela n'a aucun effet, puis vous pouvez ajouter des paramètres CLI supplémentaires.

Créez un fichier de configuration vide.

touch null_config

Ensemble BUNDLE_CONFIG avec votre fichier de configuration et superposez le --sourcemap-output paramètre.

export BUNDLE_CONFIG="null_config --sourcemap-output ./sourcemap.js.map"

Lorsque vous générez, le fichier sourcemap.js.map sera créé.

2
David Shayer