React Native集成Crashlytics后日志不显示JavaScript文件名如何解决

根因说明 #

该问题是由于React Native Release打包时默认未保留JS源码位置映射，且未配置JS侧SourceMap自动上传到Crashlytics后台，导致Crashlytics无法将混淆后的崩溃栈还原为原始JS代码对应的文件、行号信息。

配置步骤 #

1. 保留JS打包时的SourceMap输出 #

安卓端配置

打开android/app/build.gradle，找到project.ext.react配置块，添加extraPackagerArgs参数：

project.ext.react = [
    // 保持你原有的enableHermes配置不变
    enableHermes: false,
    // 新增以下配置
    extraPackagerArgs: [
        "--sourcemap-output", "$buildDir/intermediates/sourcemaps/react/release/index.android.bundle.map",
        "--sourcemap-sources-root", "$rootDir/../"
    ]
]

iOS端配置

用Xcode打开iOS项目，找到Build Phases -> Bundle React Native code and images脚本，修改为以下内容：

export NODE_BINARY=node
# 新增sourcemap输出配置
export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map --sourcemap-sources-root $SRCROOT/../"
../node_modules/react-native/scripts/react-native-xcode.sh

2. 配置SourceMap自动上传到Crashlytics #

安卓端配置

在android/app/build.gradle文件末尾添加以下任务，绑定到Release打包流程自动执行：

afterEvaluate {
    bundleReleaseJsAndAssets.doLast {
        def sourceMapPath = file("$buildDir/intermediates/sourcemaps/react/release/index.android.bundle.map")
        def bundlePath = file("$buildDir/intermediates/assets/release/index.android.bundle")
        exec {
            // 替换为你自己的安卓Firebase应用ID
            commandLine "npx", "firebase", "crashlytics:symbols:upload", "--app=com.your.application.id", sourceMapPath, bundlePath
        }
    }
}

iOS端配置

在Xcode的Build Phases中新增一个Run Script阶段，拖到Bundle React Native code and images之后，填写以下内容：

"${PODS_ROOT}/FirebaseCrashlytics/run"
# 替换为你自己的GoogleService-Info.plist文件路径
"${PODS_ROOT}/FirebaseCrashlytics/upload-symbols" -gsp "${PROJECT_DIR}/你的项目文件夹名/GoogleService-Info.plist" -p ios "${DERIVED_FILE_DIR}/main.jsbundle.map"

3. 可选补充配置 #

如果你开启了Hermes引擎，需要在proguard-rules.pro中添加额外混淆规则，避免Hermes栈信息被混淆：

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

如果配置后依然无法显示类名信息，可在metro.config.js中添加以下配置，关闭JS压缩时的名称混淆：

module.exports = {
  transformer: {
    minifierConfig: {
      keep_classnames: true,
      keep_fnames: true,
    },
  },
};

验证方式 #

必须打Release包进行测试，Debug包的崩溃信息不会正常上报：

• 触发JS崩溃：在代码中调用throw new Error('测试JS崩溃')
• 触发崩溃后重启应用，等待3-5分钟即可在Crashlytics后台看到带完整文件名、行号、类名的栈信息

内容的提问来源于stack exchange，提问作者akila