reactjs - 如何在 React Native for Production 中添加源映射？

Question

当应用程序崩溃时，我收到如下错误日志:

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

但这对我解决问题并没有太大帮助。如何启用源 map 以便我可以追踪问题所在？

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方法中构建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
    }));
});

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

如果您将源映射存储在某处，因为行号和列号随着代码的更改而在不同版本中发生变化，那么这显然效果最好。如果您可以使用您选择的源代码控制设置返回到用于构建相关应用程序的提交，并使用命令的附加位重新生成 bundle 以生成源映射，那么它应该非常接近。