如何在React Native for Production中添加源地图？

Question

应用崩溃时，我收到如下错误日志：

致命异常：com.facebook.react.modules.core.JavascriptException：onSelect
index.android.bundle：20：7148 onPress index.android.bundle：20：2435

但这对我排除麻烦不是真的有帮助。如何启用源地图，以便能够找出问题所在？

UPDATE 2018 https://docs.expo.io/versions/latest/guides/using-
sentry.html
看起来很有希望！

Answer 1

对于源映射，这是我的处理方式：

在用于生产构建的bundle命令中，我告诉它生成源映射：

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方法中找到在哪个位置构建bundle命令并向其添加源映射位：

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相同。我想要这样。您显然可以将其放置在任何地方）。

然后，一旦您发现行号有错误，那就意味着什么都没有，您就可以通过“ source-map”
NPM程序包运行它。您可能会非常详细地介绍您的方法，但我只是简单地讲了：

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

上面示例输出中的行和列应替换为行和列编号的位置。

如果将源映射存储在某处，并且行和列号随着代码的更改而在构建之间进行更改，则这显然是最好的。但是，如果可以使用您选择的源代码控制设置返回到用于构建有问题的应用程序的提交，并使用命令的其他位重新生成捆绑包以生成源映射，则它应该非常接近。