react-native - 如何从 firebase crashlytics 堆栈跟踪文本 index.android.bundle 或 iOS main.jsbundle 获取错误源文件？

Question

如何从指向 index.android.bundle:474:6500 的 crashlytics 堆栈跟踪行获取源文件行和列信息？

crashlytics 报告堆栈跟踪文本类似于:

Non-fatal Exception: io.invertase.firebase.crashlytics.UnhandledPromiseRejection: undefined is not an object (evaluating 't.includes')
       at .removeFile(index.android.bundle:474:6500)
       at .<unknown>(index.android.bundle:758:3472)
       at .y(index.android.bundle:105:596)
       at .<unknown>(index.android.bundle:105:2546)
       at .y(index.android.bundle:105:596)
       at .o(index.android.bundle:105:1483)
       at .<unknown>(index.android.bundle:105:1626)
       at .f(index.android.bundle:101:155)
       at .<unknown>(index.android.bundle:101:1012)
       at .y(index.android.bundle:107:657)
       at .C(index.android.bundle:107:1021)
       at .callImmediates(index.android.bundle:107:3216)
       at .callImmediates([native code]:0:0)
       at .value(index.android.bundle:25:3080)
       at .<unknown>(index.android.bundle:25:1264)
       at .value(index.android.bundle:25:2772)
       at .value(index.android.bundle:25:1234)
       at .value([native code]:0:0)
       at .value([native code]:0:0)

我尝试了 stack-beautifier，但收效甚微。有没有更靠谱的方法？

Answer 1

我花了好几天时间想出一个好的解决方案。这是迄今为止我发现的最好的。

1) 从 Git 标签构建 Source Maps 或从 Crashlytics 报告中提交对应于版本的哈希

iOS

react-native bundle --platform ios --entry-file index.js --dev false --reset-cache --bundle-output /tmp/bundle.ios.js --assets-dest /tmp/ --sourcemap-output sourcemap.ios.js.map

Android 从构建 gradle 自动构建

// https://github.com/facebook/react-native/issues/7393
// https://stackoverflow.com/questions/34715106/how-to-add-sourcemap-in-react-native-for-production/34733906
project.ext.react = [
    entryFile: "index.js",
    enableHermes: false,  // clean and rebuild if changing    
    extraPackagerArgs: ["--sourcemap-output", 
    file("$buildDir/../../../sourcemap.android.js.map")]
]

或者手动构建:

react-native bundle --platform android --entry-file index.js --dev false --reset-cache --bundle-output /tmp/bundle.android.js --assets-dest /tmp/ --sourcemap-output sourcemap.android.js.map

2) 使用metro-symbolicate

1. 在您的 Google Firebase Console 中打开崩溃报告

2. 选择堆栈跟踪标签

3. 选择 TXT 选项卡并将文本保存到名为 mytrace.txt 的文件

4. 删除所有以第一行包含“[native code]”作为“[native code]”似乎会导致问题

5. 结果示例:错误源自 Utility.js:567

npx metro-symbolicate sourcemap.android.js < fs-27-stack-trace.txt                                                                 
Non-fatal Exception: io.invertase.firebase.crashlytics.UnhandledPromiseRejection: undefined is not an object (evaluating 't.includes')
       at .removeFile(/Users/eddie/Documents/projects/react-native/my-react-native-app/v1.6.1146/source/app/components/Utility.js:567:includes)
       at .<unknown>(/Users/eddie/Documents/projects/react-native/my-react-native-app/v1.6.1146/source/app/components/software-downloader/DownloadClient.js:237:oldVersion)

我希望这可以帮助其他人。