Symbolication/Deobfuscation for React Native

Explained here is how to symbolicate your crashes to get more details from the stack trace for your React Native app.

iOS Crash Reporting

Native iOS Crashes

For iOS native crashes and details regarding symbolication and uploading dSYMs, please refer to the native iOS crash reporting documentation here.

JavaScript Crashes

Uploading iOS Source Map Files

You can follow these steps to generate iOS sourcemap files and upload them.

  1. Go to your root directory.
  2. Run the following script.
react-native bundle --platform ios \
  --entry-file index.js \
  --dev false \
  --bundle-output ./ios/main.jsbundle \
  --sourcemap-output ./ios-sourcemap.json &&
  zip ./ios-sourcemap.zip ./ios-sourcemap.json
  1. Upload the generated file "ios-sourcemap.json" at your project’s root directory.

Android Crash Reporting

Native Android Crashes

For Android native crashes and details regarding obfuscation and uploading mapping files, please refer to the documentation here.

JavaScript Crashes

Uploading Android Source Map Files

You can follow these steps to generate Android sourcemap files and upload them.

  1. Go to your root directory.
  2. Run the following script.
react-native bundle --platform android \
  --entry-file index.js \
  --dev false \
  --bundle-output ./android/main.jsbundle \
  --sourcemap-output ./android-sourcemap.json &&
  zip ./android-sourcemap.zip ./android-sourcemap.json
  1. Upload the generated file "android-sourcemap.json" at your project’s root directory.

Uploading Source Maps Automatically

For your app crashes to show up with a fully symbolicated/deobfuscated stack trace, we will automatically generate the source map files and upload them to your dashboard on release build. To do so, we rely on your app token being explicitly added to Instabug.startWithToken('YOUR_APP_TOKEN') in JavaScript.

If your app token is defined as a constant or you have different tokens for both iOS and Android apps, set the token as shown in the sections below.

iOS

To enable automatic uploading on iOS, follow the below steps:
1 - Navigate to the build phases of your project in Xcode
2 - Expand "Upload Sourcemap"
3 - You should find the below lines. You only need to replace YOUR_APP_TOKEN with your token from the dashboard.

export INSTABUG_APP_TOKEN="YOUR_APP_TOKEN"
bash "../node_modules/instabug-reactnative/ios/upload_sourcemap.sh"

Android

For your app crashes to show up with a fully deobfuscated stack trace, we will automatically generate the source map files and upload them to your dashboard on release build. To do so, we rely on your app token being explicitly added to Instabug.start('YOUR_APP_TOKEN') in JavaScript.
If your app token is defined as a constant, you can set an environment variable INSTABUG_APP_TOKEN to be used instead.

We also automatically read your versionName and versionCode to upload your sourcemap file. Alternatively, you can also set the environment variables INSTABUG_APP_VERSION_NAME and INSTABUG_APP_VERSION_CODE to be used instead.

To disable the automatic upload, you can set the environment variable INSTABUG_SOURCEMAPS_UPLOAD_DISABLE to TRUE.

Uploading Files via API

Additionally, we have an API end point that you can use to upload your dSYMs, mapping files, and source map files directly from the console. dSYMs must be uploaded as a .zip file. Mapping files must be uploaded as .txt files, and source map files must be uploaded as JSON files. Files should be uploaded one by one.

URL:
https://api.instabug.com/api/sdk/v3/symbols_files
METHOD:
POST
PARAMS:
symbols_file
platform=react_native&os=ios or platform=react_native&os=android
application_token
app_version="{\"code\":\"APP_VERSION_CODE\",\"name\":\"APP_VERSION_NAME\"}"

What’s Next

After a crash has been symbolicated/deobfuscated and the fix is done, reach out to your affected users and let them know to update.