React Native - 构建可靠的源图答案

【问题标题】：React Native - Building a reliable source mapReact Native - 构建可靠的源图
【发布时间】：2023-03-05 14:12:01
【问题描述】：

我认为我使用 Xcode 正确创建了源映射。生产版本需要这个。

我补充说：

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

到build phases 中的Bundle React Native code and images，在Xcode 中生成一个似乎可以工作的源映射。

但是，当尝试使用以下代码分析带有行号和列号的源映射时，我没有得到正确的结果

var sourceMap = require('source-map');
var fs = require('fs');

// read source-map, should be new for every build
fs.readFile('../my-app/src/sourcemap/sourcemap.js', 'utf8', function (err, data) {
    var smc = new sourceMap.SourceMapConsumer(data);

    // replace line and colum numbers with line/col from error output
    console.log(smc.originalPositionFor({
        line: 105132,
        column: 98
    }));
});

我正在使用来自 Xcode 的堆栈跟踪作为测试，但我得到了 null。 Xcode 部分输出：

2016-04-26 17:50:00.631 [error][tid:com.facebook.React.JavaScript] Can't find variable: dummyVar
2016-04-26 17:50:00.650 [fatal][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Can't find variable: dummyVar
2016-04-26 17:50:00.656 MyApp[311:84730] *** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Can't find variable: dummyVar', reason: 'Unhandled JS Exception: Can't find variable: dummyVar, stack:
render@105132:98

我尝试了行号和列号的多种组合。我知道 JS 脚本肯定正在查看源映射，因为如果我输入例如 line: 20 column: 10 我将从 Navigator/NavigatorSceneConfigs.js 中返回的 react-native 代码库中得到一行

这仅适用于index.ios.bundle 中返回的行号吗？

任何可以为我指明正确方向的想法都会很棒

谢谢

【问题讨论】：

标签： ios xcode react-native source-maps

【解决方案1】：

您可以使用诸如react-native-source-maps 之类的库来帮助您处理发布版本的源映射。 https://github.com/philipshurpik/react-native-source-maps

要生成源映射，您可以使用以下设置：

对于 android，将此添加到您的 android/app/build.gradle 文件中。

project.ext.react = [
    ...
    extraPackagerArgs: [
        "--sourcemap-output", "$buildDir/intermediates/assets/release/index.android.bundle.map",
        "--sourcemap-sources-root", "$rootDir/.."
    ]
]

从 react-native 0.55 开始，您现在可以在 iOS 上执行相同的操作。在您的 XCode 项目文件中，将 Bundle React Native code and images 构建阶段更新为：

export NODE_BINARY=node
export EXTRA_PACKAGER_ARGS=\"--sourcemap-output $CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map --sourcemap-sources-root $SRCROOT/..\"
../node_modules/react-native/scripts/react-native-xcode.sh

【讨论】：