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

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

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

但是对我来说麻烦拍摄并没有多大帮助.我如何启用源地图以便我可以追踪问题所在？

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

1> rmevans9..：

---

对于源映射,这里是我的方式:

在我的生成构建的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
    }));
});

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

如果您将源映射存储在某处,这显然效果最佳,因为随着代码更改,行号和列号从构建更改为构建.它应该非常接近,但是如果你可以使用你选择的源代码控制设置来返回用于构建有问题的app的提交,并使用命令的附加位重新生成bundle以生成源映射.

---

在v0.32上,添加args以生成源映射更简单.只需添加```project.ext.react = [extraPackagerArgs:[" - sourcemap-output",file("$ buildDir /../../ sourcemaps/sourcemap.js")]]```到`android/app/build.gradle`就在`apply from:`行之前.

2> otusweb..：

---

Android灵感来自@ chetstone的答案

从android的v0.32开始,你可以修改你的android/app/build.gradle来完成这个.寻找线

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

就在这之上,你会看到类似的东西:

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

修改它以匹配以下内容

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

在iOS上

转到Xcode的构建阶段,获取"Bundle React Native code and images"阶段并添加:

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