如何在 React Native 中为生产添加源映射? [英] How to add sourcemap in React Native for Production?

问题描述

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

I received error log like the following while the app crashed:

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

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

但是解决问题对我来说并没有什么帮助.如何启用源映射以便我可以追踪问题所在?

But it's not really helpful for me to trouble shoot. How could I enable source map so that I could track down where the issue is ?

2018 年更新https://docs.expo.io/versions/latest/guides/using-sentry.html 看起来很有前途！

推荐答案

对于源映射，我是这样处理的:

For source mapping here is the way I go about it:

在我的生产版本的 bundle 命令中，我告诉它生成一个源映射:

In my bundle command for my production build I tell it to generate a source map:

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 命令的位置，并向其中添加源映射位:

Android - I had to actually modify the android/app/react.gradle file to get source maps generating on release compile. There might be an easier way but basically you find where it builds up the bundle command in the bundleReleaseJsAndAssets method and add the source map bit to it:

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 相同的位置.我想要那样.您显然可以将它放在任何地方).

The output path looks a bit odd but that puts it at your root level (same spot as iOS. I wanted it that way. You can obviously put it anywhere).

然后，一旦您的行号出现错误，您就可以通过源映射"NPM 包运行它.您的方法可能会非常详细，但我只是采用了:

Then once you have an error with the line number that means nothing you run it through the "source-map" NPM package. You could probably get very elaborate with your approach but I simply went with:

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

应使用上面示例输出中的行号和列号替换行和列的位置.

Where line and column should be replaced withe line and column number from your example output above.

如果您将源映射存储在某处，因为随着代码的变化，行号和列号随构建而变化，这显然最有效.但是，如果您可以使用您选择的源代码控制设置返回用于构建相关应用程序的提交，并使用命令的附加位重新生成包以生成源映射，它应该会非常接近.

This obviously works best if you have the source maps stored somewhere as the line and column numbers change from build to build as your code changes. It should get pretty close though if you can use you source control setup of choice to go back to the commit that was used to build the app in question and re-generate the bundle with the additional bits to the command to generate the source map.

这篇关于如何在 React Native 中为生产添加源映射?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！