Question

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

致命异常：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看起来很有希望！

Answer 1

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

在我的生成构建的bundle命令中，我告诉它生成一个源映射：

的iOS：

someString.stringByReplacingOccurrencesOfString("\\", withString: "")

Android - 我必须实际修改android / app / react.gradle文件，以便在发布编译时生成源映射。可能有一种更简单的方法，但基本上你可以找到它在bundleReleaseJsAndAssets方法中构建bundle命令的位置，并将源映射位添加到它：

react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js

输出路径看起来有点奇怪，但是它把它放在你的根级别（与iOS相同的位置。我想那样。显然你可以把它放在任何地方）。

然后，如果您的行号出现错误，则无法通过＆＃34; source-map＆＃34; NPM包。你可能会对你的方法非常详细，但我只是跟着：

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

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

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

Answer 2

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"

Answer 3

如上所述，没有明显的方法可以在iOS上为React Native生成sourcemap文件。从bundle调用react-native-xcode.sh命令，并且没有为bundle命令行添加参数的规定。但我找到了一个干净的方法来做到这一点。

react-native-xcode.sh使用环境变量BUNDLE_CONFIG来指定配置文件。如果您创建一个空配置文件它没有任何效果，然后您可以添加其他CLI参数。

创建一个空的配置文件。

touch null_config

使用您的配置文件设置BUNDLE_CONFIG，然后搭载--sourcemap-output参数。

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

构建时，将创建文件sourcemap.js.map。

Answer 4

这仅适用于iOS。

步骤1：使用以下命令生成sourcemap.js文件。

将此行添加到package.json文件中

 "bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js"

运行此命令，它将在$PROJECT_DIR/ios/source-map/文件夹下创建sourcemap.js文件

$ yarn bundle:ios

第2步：在$PROJECT_DIR/ios/source-map/下创建文件sourcemap-decoder.js

$ cd ios/source-map/

$ touch sourcemap-decoder.js

sourcemap-decoder.js的内容是

const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');

fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
  if (err) {
    console.log('err', err,);
  }
  const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));

  console.log(consumer.originalPositionFor({
    line: 1408,
    column: 7762
  }));
});

步骤3：执行脚本进行解码

$ node ios/source-map/sourcemap-decoder.js

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

4 个答案: