React Native ExpoのiOSアプリにFirebase Crashlyticsを追加する

React Native Expo の iOS アプリに Firebase Crashlytics を導入する方法を解説します。インストール手順やテストクラッシュの確認方法を詳しく紹介します。

なお、Expoのドキュメントには以下のように書かれており、Crashlyticsを使う場合はReact Native Firebaseを使うのが良さそうです。

Caveats Firebase JS SDK does not support all services for mobile apps. Some of these services are Analytics, Dynamic Links and Crashlytics. See the React Native Firebase section if you want to use these services.

Firebase プロジェクトの作成

Firebase Consoleから新しいプロジェクトを作成します。プロジェクトにiOS アプリを追加して、GoogleService-Info.plist をダウンロードし、アプリのルートディレクトリ直下に配置します。

React Native Firebase のインストール

yarn add @react-native-firebase/app @react-native-firebase/crashlytics

app.json の修正

Firebase Crashlytics を有効にする設定を追加します。

{
  "expo": {
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/crashlytics",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ],
  }
}

firebase.json の追加

firebase.json をルートディレクトリに作成します。これを作成しないと、エミュレータでテストとしてクラッシュさせようとしてもCrashlyticsが無効化されていて動きません。

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

クラッシュさせる実装

Firebase Crashlytics の動作確認のため、手動でクラッシュを発生させる関数を動かします。

import { getAnalytics } from "@react-native-firebase/analytics";
import { crash, getCrashlytics } from "@react-native-firebase/crashlytics";

console.log("crash");
const crashlytics = getCrashlytics();
crashlytics.setCrashlyticsCollectionEnabled(true);
crash(crashlytics);

Crashlytics管理画面での確認

EAS Buildをして、エミュレータにアプリをインストールし、アプリを起動します。アプリがクラッシュして、Firebase Consolの管理画面にクラッシュレポートが表示されれば確認完了です。