[🐛] Crashlytics not handling JS errors correct in background

[theobouwman]

Issue

I am getting a non-fatal error when the background job is running. But I still do not see correct JS traces. With the provided firebase.json I should be getting detailed JS traces right? I used the recommended settings from the articles that was linked on the documentation https://invertase.io/blog/react-native-firebase-crashlytics-configuration

package.json:

"dependencies": {
    "@georstat/react-native-image-cache": "^2.4.0",
    "@gorhom/bottom-sheet": "^4",
    "@react-native-firebase/analytics": "^16.4.3",
    "@react-native-firebase/app": "^16.4.3",
    "@react-native-firebase/auth": "^16.4.3",
    "@react-native-firebase/crashlytics": "^16.4.3",
    "@react-native-firebase/messaging": "^18.0.0",
    "@react-native-firebase/perf": "^17.5.0",
    "@react-native-firebase/remote-config": "^16.4.3",
    "@react-native-firebase/storage": "^17.5.0",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",
    "@reduxjs/toolkit": "^1.6.1",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.2",
    "@types/react-geocode": "^0.2.1",
    "@types/react-native": "^0.70.5",
    "@types/react-native-vector-icons": "^6.4.12",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "moment": "^2.29.4",
    "promise": "^8.3.0",
    "react": "18.1.0",
    "react-geocode": "^0.2.3",
    "react-native": "0.70.5",
    "react-native-background-fetch": "^4.1.8",
    "react-native-config": "^1.4.11",
    "react-native-device-info": "^10.3.0",
    "react-native-file-access": "^3.0.3",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-image-crop-picker": "^0.40.0",
    "react-native-maps": "^1.3.2",
    "react-native-pell-rich-editor": "^1.8.8",
    "react-native-permissions": "^3.8.0",
    "react-native-reanimated": "^2.10.0",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-vector-icons": "^9.2.0",
    "react-native-webview": "^11.23.1",
    "react-redux": "^7.2.5",
    "reanimated-color-picker": "^2.3.0",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "typescript": "^4.8.4"
  },
  "reactNativePermissionsIOS": [
    "LocationAccuracy",
    "LocationAlways",
    "LocationWhenInUse",
    "MediaLibrary",
    "Notifications",
    "PhotoLibrary"
  ],
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "0.72.3",
    "react-test-renderer": "18.1.0",
    "pod-install": "0.1.38"
  },

firebase.json for react-native-firebase v6:

{
  "react-native": {
    "crashlytics_debug_enabled": false,
    "crashlytics_disable_auto_disabler": true,
    "crashlytics_auto_collection_enabled": true,
    "crashlytics_is_error_generation_on_js_crash_enabled": true,
    "crashlytics_javascript_exception_handler_chaining_enabled": false,
    "perf_auto_collection_enabled": true
  }
}

[developerdanx]

Any update on this? I have the problem... :)

[theobouwman]

No..

[developerdanx]

Maybe @mikehardy can help here :)

[theobouwman]

@mikehardy do you know how to fix this?

[mikehardy]

There are some related issues if you search for javascript symbolocation - you are getting stacks and they are the stack into your compiled bundle, you need to maintain a tag in your version control that correlates to the build so you can generate the symbol map tables again to dereference into the original code. Firebase cannot do this for you as it is unaware of your toolchain (typescript, metro bundler or other options etc) and doesn't have the option to upload symbol tables.

[theobouwman]

@mikehardy is there a simple way to do this?

[mikehardy]

@mikehardy is there a simple way to do this?

Sadly, I'm not aware of one @theobouwman - the general idea (to make it ... "easy") is to get your local toolchains sorted well, document exactly how to build sourcemaps at each transform step (e.g. typescript->javascript, then javascript->release bundle) so you can do it with a single command, then use one of the available javascript packages that decodes stack traces when provided a trace and sourcemaps, so you can then feed the firebase crashlytics trace into the script + the sourcemaps as input and out pops the original source lines.

It is possible, but not awesome. I will freely admit that in my personal development for my own projects I typically just look at the error message / topline, look at the log breadcrumbs which I've placed semi-regularly in the code, and make a best guess as to what was undefined (or whatever the problems was) and why by visual inspection of the source code. That's an imprecise + intuitive process but I've typically been able to reproduce errors within a few minutes that way and then I go on my merry way without messing with the source maps.

Maybe not the answer you're hoping for but it's what I've got. I hope it helps

[theobouwman]

@mikehardy thanks. I noticed that these errors are mainly unhandled promises etc. and no fatal crashes which is good to know.

[github-actions[bot]]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.