Quelle est la bonne configuration pour le rapport de crash de React Native ?

Question

Je vois que getSentry a un rapport de crash pour React Native maintenant :

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

Je les aime parce qu'ils font un bon travail de corrélation entre les exceptions et vos cartes sources. Mais je veux aussi attraper les crashs natifs. Est-ce que vous devez configurer à la fois getSentry et Crashlytics ?

Voici un fil de discussion sur les différentes options :

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

Et voici une solution apparemment bonne, mais quelque peu détournée, de type hokeyapp : http://blog.nparashuram.com/2015/10/crash-analytics-and-feedback-for.html

Je me demande ce que les gens utilisent avec succès en production pour détecter les plantages en natif et en javascript avec des rapports détaillés tenant compte de la carte des sources ?

Answer 1

Je suis l'auteur de react-native-bugsnag .

Je ne suis pas affilié à la société, mais j'aime leur tableau de bord et leurs modèles de tarification. J'ai donc créé cette bibliothèque pour que nous, programmeurs react-native, ayons un moyen d'utiliser leur service.

[TL/DR] :

1) Copiez le script ci-dessous, ajoutez-le à la racine de votre projet,

2) Changez la version au début du script pour qu'elle corresponde à la version de votre partie native de votre projet react-native.

3) Exécutez-le :

sh crash_report.sh -i <BUGSNAG_KEY> pour regrouper et télécharger vos cartes sources pour ios,

OU

sh crash_report.sh -a <BUGSNAG_KEY> pour regrouper et télécharger vos cartes sources pour Android.

[VERSION LONGUE] :

El bugs officiels de react-nativenag sdk est maintenant disponible.

Il prend en charge à la fois iOS/Android et Javascript rapports sur les accidents manipulés et non manipulés.

Laissez-moi vous expliquer comment je fais :

J'ai créé un fichier appelé crash_report.sh qui crée les sources de mon projet, et les télécharge sur bugsnag, ainsi que TOUS les fichiers de mon projet, afin que je puisse voir des rapports d'erreur riches comme ci-dessous :

Pour l'utiliser, il suffit de l'ajouter au dossier racine de votre projet, de modifier la variable version ( appVersion ) à la version de votre projet xcode ou de votre projet Android studio. (C'EST TRÈS IMPORTANT) sinon vous ne serez pas en mesure de voir le code dé-obfusqué dans bugnsag et de l'exécuter.

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

J'espère que cela aidera quelqu'un, cela m'a pris des heures à comprendre. Amusez-vous bien !

Answer 2

Sentry's client natif iOS supporte la symbolisation (similaire à Crashlytics), donc vous pouvez ajouter Sentry pour les deux couches javascript et objc.