Firebase Crashlytics を使ってみる


このクイックスタートでは、Firebase コンソールで包括的なクラッシュ レポートを表示できるよう、Crashlytics Flutter プラグインを使用してアプリに Firebase Crashlytics を設定する方法について説明します。

Crashlytics の設定には、コマンドライン ツールと IDE の両方を使用します。設定を完了するには、強制的にテスト例外をスローして、最初のクラッシュ レポートを Firebase に送信する必要があります。

始める前に

  1. まだ行っていない場合は、Flutter プロジェクトで Firebase の構成と初期化を行います。

  2. 推奨: パンくずリストのログを自動的に取得して、クラッシュ イベント、非致命的イベント、ANR イベントに至るまでのユーザー操作を把握するには、Firebase プロジェクトで Google Analytics を有効にする必要があります。

    • 既存の Firebase プロジェクトで Google Analytics が有効になっていない場合は、Firebase コンソールで [] > [プロジェクトの設定] の [統合] タブGoogle Analytics を有効にします。

    • 新しい Firebase プロジェクトを作成する場合は、プロジェクトの作成ワークフローで Google Analytics を有効にします。

    パンくずリストのログは、Crashlytics でサポートされているすべての Android プラットフォームおよび Apple プラットフォーム(watchOS を除く)で利用できます。

ステップ 1: Flutter プロジェクトに Crashlytics を追加する

  1. Flutter プロジェクトのルートから、次のコマンドを実行して Crashlytics の Flutter プラグインをインストールします。

    パンくずリスト ログを利用するには、Google Analytics 用の Flutter プラグインもアプリに追加します。Firebase プロジェクトで Google アナリティクスが有効になっていることを確認してください。

    flutter pub add firebase_crashlytics && flutter pub add firebase_analytics
    
  2. Flutter プロジェクトのルート ディレクトリから、次のコマンドを実行します。

    flutterfire configure
    

    このコマンドを実行すると、Flutter アプリの Firebase 構成が最新の状態になります。さらに、Android の場合は、必要な Crashlytics Gradle プラグインがアプリに追加されます。

  3. 完了したら、Flutter プロジェクトを再ビルドします。

    flutter run
    
  4. (省略可)Flutter プロジェクトで --split-debug-info フラグ(および必要に応じて --obfuscate フラグ)を使用する場合は、アプリで読み取り可能なスタック トレースを表示するために追加の手順が必要になります。

    • Apple プラットフォーム: プロジェクトで推奨されるバージョン構成(Flutter 3.12.0 以降、Crashlytics Flutter プラグイン 3.3.4 以降)を使用していることを確認して、プロジェクトで Flutter シンボル(dSYM ファイル)を自動的に生成して Crashlytics にアップロードできるようにします。

    • Android: Firebase CLI(v.11.9.0 以降)を使用して、Flutter デバッグ シンボルをアップロードします。難読化されたコードビルドのクラッシュを報告する前に、デバッグ シンボルをアップロードする必要があります。

      Flutter プロジェクトのルート ディレクトリから、次のコマンドを実行します。

      firebase crashlytics:symbols:upload --app=FIREBASE_APP_ID PATH/TO/symbols
      • FIREBASE_APP_ID: Firebase Android アプリ ID(パッケージ名ではありません)
        Firebase Android アプリ ID の例: 1:567383003300:android:17104a2ced0c9b9b

      • PATH/TO/symbols: アプリケーションのビルド時に --split-debug-info フラグに渡すのと同じディレクトリ

ステップ 2: クラッシュ ハンドラを構成する

FlutterError.onErrorFirebaseCrashlytics.instance.recordFlutterFatalError でオーバーライドすると、Flutter フレームワーク内でスローされたすべてのエラーを自動的にキャッチできます。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();

  // Pass all uncaught "fatal" errors from the framework to Crashlytics
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

  runApp(MyApp());
}

Flutter フレームワークで処理されない非同期エラーをキャッチするには、PlatformDispatcher.instance.onError を使用します。

Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    FlutterError.onError = (errorDetails) {
      FirebaseCrashlytics.instance.recordFlutterFatalError(errorDetails);
    };
    // Pass all uncaught asynchronous errors that aren't handled by the Flutter framework to Crashlytics
    PlatformDispatcher.instance.onError = (error, stack) {
      FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
      return true;
    };
    runApp(MyApp());

}

他のタイプのエラーの処理方法の例については、クラッシュ レポートをカスタマイズするをご覧ください。

ステップ 3: 強制的にテスト クラッシュを発生させて設定を完了する

Crashlytics の設定を完了し、Firebase コンソールの Crashlytics ダッシュボードで最初のデータを確認します。そのためには、強制的にテスト例外をスローさせる必要があります。

  1. テスト例外を強制的にスローするためのコードをアプリに追加します。

    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true) を呼び出すエラーハンドラを最上位の Zone に追加している場合は、次のコードを使用してアプリにボタンを追加します。このボタンを押すと、テスト例外がスローされます。

    TextButton(
        onPressed: () => throw Exception(),
        child: const Text("Throw Test Exception"),
    ),
    
  2. アプリをビルドして実行します。

  3. アプリの最初のレポートを送信するために、テスト例外を強制的にスローします。

    1. テスト用のデバイスまたはエミュレータからアプリを開きます。

    2. アプリで、上述のコードを使用して追加したテスト例外のボタンを押します。

  4. Firebase コンソールの Crashlytics ダッシュボードに移動して、テスト クラッシュを確認します。

    コンソールを更新し、5 分経過してもテスト クラッシュが表示されない場合は、デバッグ ロギングを有効にして、アプリがクラッシュ レポートを送信しているかどうかを確認してください。


これで完了です。Crashlytics がアプリのクラッシュをモニタリングするようになりました。Android では、致命的でないエラーや ANR がモニタリングされます。すべてのレポートと統計情報を参照して調査するには、Crashlytics ダッシュボードにアクセスします。

次のステップ