What's a good setup for React Native crash reporting? [closed]

Question

I'm seeing that getSentry has crash reporting for React Native now:

https://docs.getsentry.com/hosted/clients/javascript/integrations/react-native/

I like them because they do a good job correlating exceptions with your source maps. But I also want to catch native crashes. Do you basically have to setup both getSentry and Crashlytics?

Here's a thread discussing various options:

https://github.com/facebook/react-native/issues/5378

And here's a seemingly good, but somewhat roundabout hokeyapp solution: http://blog.nparashuram.com/2015/10/crash-analytics-and-feedback-for.html

I'm wondering what people are successfully using in production to catch both native and javascript crashes with detailed source-map-aware reports??

Herson

Hey @faceyspacey.com. Long time passed since your question (hopefully not too long for you to answer the following questions :), so you may have gained experience with one or more of the tools. Can you share your experience (preferable as an addition to your question, since it is harder to read unformatted comments...). In particular, I am interested in experience using Crashlytics and Sentry with react native (one of them, not both): props and cons regarding functionality, pricing. I read that Crashlytics doesn't provide crash reporting for js crashes. True? – Northey

Answer 1

I'm the author of react-native-bugsnag.

I'm not affiliated with the company but I like their dashboard, and their pricing models so I created this library for us react-native programmers to have a way to use their service.

[TL/DR]:

1) Copy the script below, add it to your project root,

2) Change the version on the beginning of the script to match the version of your native part of your react-native project.

3) Run it:

sh crash_report.sh -i <BUGSNAG_KEY> to bundle and upload your source-maps for ios,

OR

sh crash_report.sh -a <BUGSNAG_KEY> to bundle and upload your source-maps for android.

[LONGER VERSION]:

The official react-native bugsnag sdk is now released.

It supports both iOS/Android and Javascript handled and unhanded crash reporting.

Let me explain how I do it:

I've created a file called crash_report.sh that creates my project sourcemaps, and uploads them to bugsnag, as well as ALL of my project files, so that I can see rich error reports like below:

To use this, all you have to do is add it to your project root folder, change the version variable (appVersion) to basically whatever version your xcode project has, or your android studio project has. (THIS IS VERY IMPORTANT) otherwise you won't be able to see de-obfuscated code in bugnsag and then run it.

crash_report.sh:

#!/bin/bash

appVersion='1.0.0'  # IMPORTANT, this has to be the same as the version of your native project in xcode or android studio.

# Get shell args
aflag=''
iflag=''
platform=''
bugsnagKey=''
while getopts 'i:a:' flag; do
  case "${flag}" in
    a) 
    aflag='true'
    bugsnagKey=$OPTARG
    ;;
    i) iflag='true' 
    bugsnagKey=$OPTARG
    ;;
    *) printf "Usage: %s: [-a] [-i] args\n" $0
  esac
done

if [ -n "$aflag" ] && [ -z "$iflag" ]; then
    printf "Now bundling for android.\n"
    platform='android'
fi
if [ -n "$iflag" ] && [ -z "$aflag" ]; then
    printf "Now bundling for ios.\n"
    platform='ios'
fi

if [ -z "$platform" ]; then
    printf "\nUsage: <script> -i <BUGSNAG_KEY> OR -a <BUGSNAG_KEY>. \nTerminating...\n\n"
else
    printf "Now fetching project properties from package.json\n"

    echo 'Now creating sourcemaps\n App version: '${appVersion}' for platform: '${platform}

    # #Create iOS sourcemaps
    react-native bundle --dev false --platform ${platform} --entry-file index.${platform}.js --bundle-output main.${platform}.jsbundle --sourcemap-output main.${platform}.jsbundle.map

    echo 'Now uploading with key: '${bugsnagKey}' for version '${appVersion}

    CUR_DIRR=`pwd`  # Get current directory
    CUR_DIRR=${CUR_DIRR}'/' # Append a forward slash to it

    # Here we get ALL the project files, and form them as curl params, so that we can later on pass them to curl
    PROJECT_FILES=$(find src -name '*.js'  | while read -r i; do echo '-F '$CUR_DIRR$i'=@'$i; done) # Form the right file ending for curl
    # echo ${PROJECT_FILES}

    # #Upload iOS sourcemaps
    curl -w "\n\n%{http_code}\n" --progress-bar -F apiKey=${bugsnagKey} -F appVersion=${appVersion} -F minifiedUrl="main.jsbundle" -F sourceMap=@main.${platform}.jsbundle.map -F minifiedFile=@main.${platform}.jsbundle -F overwrite=true ${PROJECT_FILES} https://upload.bugsnag.com

    echo '\nDone.\n'

fi

I hope this helps someone, this took me hours to figure. Have fun..!

Monachism

awesome, I'll check it out! – Herson

Quick update - we just rolled out official react native error reporting support for Bugsnag - which reports errors in the JS and native (java/cocoa) layers - as well as supporting source maps, proguard, and symbolication – Heelpost

Answer 2

Sentry's native iOS client supports symbolification (similar to Crashlytics), so you can add Sentry for both the javascript and objc layers.

Mellman

where do you recommend putting the get sentry try/catch error reporting. Their example has it in a render function--obviously the idea of adding that all your render functions is extremely unappealing (or hacking some monkey-patch to override all your render methods). Can you just wrap it around your registerComponent? – Herson

I'm not familiar enough with React Native to answer that. #30918849 seems to have some decent answers. I'd love to learn what you end up doing though — I've been meaning to tinker, but haven't had the time. – Mellman