Zenn
🥂

Managed WorkflowでExpoとFirebaseを連携させて、Crashlyticsを実装しました。

2024/12/14に公開
Firebase
Expo
tech

はじめに

ExpoとFirebaseを連携させて、Crashlyticsを実装しました。

前提

Firebase consoleに各環境ごとのPJを作成してください

今回はdev環境のみで連携させています。

React Native Firebaseを使用

ExpoとFirebaseを繋げるためのライブラリは2つあります。

  • Firebase JS SDK
  • React Native Firebase

この2つの中で、React Native Webを使うならFirebase JS SDK、使わないならReact Native Firebaseにした方がいいです。

なので、今回はReact Native Firebaseを使用します。
2つ併用することはできますが、Expoのアップデート時にバージョンエラーがたくさん出るのでお勧めしません。

https://blog.daiki-portfolio.com/firebase/

ExpoとFirebaseを繋げる手順

こちらのドキュメントを参考にやっていきます。
https://docs.expo.dev/guides/using-firebase/

下記コマンドを実行します。

$ npx expo install expo-dev-client
$ npx expo install @react-native-firebase/app

次はReact Native Firebaseのドキュメントを見てやっていきます。
https://rnfirebase.io/#expo

下記コマンドを実行します。

$ npm install --save @react-native-firebase/app
$ npx expo install  @react-native-firebase/crashlytics

app.jsonに下記の内容を記載します。

app.json
}
  plugins: [
    '@react-native-firebase/app',
    '@react-native-firebase/crashlytics',
    [
      'expo-build-properties',
      {
        ios: {
          useFrameworks: 'static',
        },
      },
    ],
  ],
}

サービスアカウントファイルを作成

ネイティブのAndroidとiOSのプラットフォームでFirebaseを有効にするには。Firebaseプロジェクトから各プラットフォームのサービスアカウントファイルを作成してダウンロードする必要があります。

Firebaseのホーム画面のiOSのマークかAndroidのマークのボタンを押下します。

app.jsonに記載したandroidならpackage、iOSならbundleIdentifierの名前を入力して、アプリの名前を書きます。

ここでダウンロードします。

ダウンロードしたファイルをFinderからドラックアンドドロップでアプリのルート直下に置きます。

ダウンロードしたファイルgoogle-services.jsonとGoogleService-Info.plistファイルへのパスを次のapp.jsonフィールドに入力します。

下記のように記述してください

app.json
{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json",
      "package": "com.mycorp.myapp"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist",
      "bundleIdentifier": "com.mycorp.myapp"
    },
  }
}

Crashlyticsを画面に実装する

アプリ内のどこかに、下記のコードを入れてください。

import crashlytics from '@react-native-firebase/crashlytics'
<Button text="Test Crash" onClick={() => crashlytics().crash()} />

ビルドして、アプリを再度開きます。

私は、画面の赤枠にボタンを置いて、押下するとアプリがクラッシュするようにしました。

ボタンを押下して、クラッシュさせたらFirebaseのCrashlyticsの画面を見て、表示されているか確認します。

表示されていたら成功です🎉

google-services.jsonとGoogleService-Info.plistファイルはexpo.devで管理した方がいいのでそれについてこちらの記事に書いたので、見てください。
https://zenn.dev/yumemi9808/articles/fe1c2872b80551

Discussion