浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「react-native-firebase」ライブラリでアプリにCrashlyticsを導入する

公式サイトに導入手順は載っていますが、自分の備忘録としてまとめ。
タイトルどおり React Native のアプリに Firebase の Crashlytics を導入する方法についてです。

公式サイトはこちらから。

Crashlytics | React Native Firebase
https://rnfirebase.io/crashlytics/usage

 

導入方法は、まず下記コマンドを実行してライブラリをインストールします。

npm install @react-native-firebase/crashlytics --save

// iOS の場合は下記も実行
npx pod-install

なお Android の場合は追加の設定が必要です。
android/build.gradlegoogle() を追加します。

buildscript {
  ...
  repositories {
    ...
    google()
  }
  ...
}

が、こちらの設定は私の環境では既に追加されていたので不要でした。

次に、同じく android/build.gradle に下記を追加します。

buildscript {
  ...
  dependencies {
    ...
    classpath 'com.google.firebase:firebase-crashlytics-gradle:2.5.2'
  }
  ...
}

最後に、android/app/build.gradle に下記を追加します。

apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.crashlytics'  <- この 1行を追加

なおこの時、必ず apply plugin: 'com.google.gms.google-services' の後に記述するようにしてください。

上記を全て追加したら、下記の項目でアプリを実行してください。

npx react-native run-android

無事にアプリが起動したら、Crashlytics が追加完了です!
なお、こちらの手順は下記の公式ページから確認できます。

Crashlytics – Android Setup | React Native Firebase
https://rnfirebase.io/crashlytics/android-setup

 

なお、こちらのライブラリを使うと、アプリを故意にクラッシュさせることもできます。
私は Firebase のコンソールで確認するために実行しました。
まず、クラッシュさせたいページに下記を追加し、ライブラリをインポートします。

import crashlytics from '@react-native-firebase/crashlytics';

あとは、クラッシュさせたいタイミングで下記を実行すればOKです。

crashlytics().crash();

なお、アプリがデバックモードだと Crashlytics はデフォルトで無効になっていますので、有効にしたい場合はプロジェクトのルートディレクトリに firebase.json ファイルを作成し、下記のように記述してください。

{
  "react-native": {
    "crashlytics_debug_enabled": true
  }
}

こちらを追加することで、アプリがデバックモードの場合でも Crashlytics を使用することができます。

 

以上、React Native のアプリに Firebase の Crashlytics を導入する方法についてでした。
Android はちょっとだけ設定する項目が多いですが、公式サイト通りに行えば問題なく実装出来ました。
ご参考になれば幸いです。

  • この記事いいね! (0)