什么是React Native崩溃报告的良好设置?

时间:2016-04-29 21:31:49

标签: react-native crashlytics twitter-fabric sentry hockeyapp

我发现getSentry现在有React Native的崩溃报告:

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

我喜欢他们,因为他们很好地将异常与您的源地图相关联。但我也想抓住本机崩溃。你基本上要设置getSentry和Crashlytics吗?

以下是讨论各种选项的主题:

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

这是一个看似很好但有点迂回的hokeyapp解决方案: http://blog.nparashuram.com/2015/10/crash-analytics-and-feedback-for.html

我想知道人们在生产中成功使用什么来捕获原生和javascript崩溃以及详细的源地图感知报告?

2 个答案:

答案 0 :(得分:6)

我是react-native-bugsnag的作者。

我并不隶属于公司,但我喜欢他们的仪表板和他们的定价模型,所以我为我们创建了这个库,让本地程序员有办法使用他们的服务。

<强> [TL / DR]:

1)复制下面的脚本,将其添加到项目根目录

2)更改脚本开头的版本以匹配本机项目本机部分的版本。

3)运行它:

sh crash_report.sh -i <BUGSNAG_KEY>捆绑并上传ios的源地图,

OR

sh crash_report.sh -a <BUGSNAG_KEY>捆绑并上传你的源码地图。

[LONGER VERSION]:

official react-native bugsnag sdk现已发布。

它支持 iOS / Android和Javascript 处理和取消隐藏的崩溃报告。

让我解释一下我是如何做到的:

我创建了一个名为crash_report.sh的文件,用于创建我的项目源图,并将它们上传到bugsnag以及我的所有项目文件,以便我可以看到如下所示的丰富错误报告: enter image description here

要使用它,您只需将其添加到项目根文件夹,将版本变量(appVersion)更改为您的xcode项目所具有的任何版本,或者您的android studio项目。  (这是非常重要的)否则你将无法在bugnsag中看到去混淆的代码然后运行它。

<强> 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

我希望这对某人有所帮助,这花了我几个小时的时间来计算。 玩得开心..!

答案 1 :(得分:2)

Sentry的native iOS client支持符号化(类似于Crashlytics),因此您可以为javascript和objc图层添加Sentry。