Flutter 環境別Crashlyticsの実装方法 Android/iOS

## この記事ではFLuttterの環境別Crashlyticsの設定方法を紹介します。

## 目次
```
1. 環境別Firebaseプロジェクトの作成
2. main.dartの実装
3. iOSの設定  
4. Androidの設定
```
上記の順で紹介したいと思います。
まずCrashlyticsを使用するために[Firebase](https://firebase.google.com/?hl=ja)プロジェクトを作成します。URLをタップすると以下の画像のように「使ってみる」が表示されるのでタップ(ログイン、アカウントの作成を行なっていない方は作成して下さい。)

![スクリーンショット [0005-12-07](tel:0005-12-07) 11.36.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637125/65a692a8-30df-76c8-6a7c-51ca21871784.png)

すると、以下の画像のような画面に遷移すると思うので、プロジェクトを追加→プロジェクト名を設定→続行→Default Account for Firebaseを選択し、続行→プロジェクトの作成が行われる。

プロジェクトにアプリを追加します。iOS/Android

### iOSのFirebase設定方法
- アプリのバンドルIDを設定→アプリを追加→xcodeでプロジェクトレベルにGoogleService-Info.plistを追加
- Runner直下にFirebaseフォルダーを作成し、GoogleService-Info.plistの名前を変更し
GoogleService-Info-stg.plist, GoogleService-Info-pro.plistとします。
:::note warn
![Screenshot 2023-12-09 at 14.12.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637125/97415675-0cce-fd44-de9b-c23960173fcd.png)

この際に気をつけることはXcodeからRunnerを選択し右クリックAdd File to"Runner"... を選択。  
:::
- XcodeのBuild Phasesから➕ボタンを押しNew run script phasesでrun scriptを作成します。
スクリプトは以下を参考し作成して下さい。
```
# 以前に生成されたFirebase設定ファイルを削除
rm -rf "${SRCROOT}/firebase_app_id_file.json"

# Firebase設定ファイルをコピーして生成
if [ "${CONFIGURATION}" = "Debug" ]; then
    cp "${SRCROOT}/firebase_app_id_file_dev.json" "${SRCROOT}/firebase_app_id_file.json"
elif [ "${CONFIGURATION}" = "Profile" ]; then
    cp "${SRCROOT}/firebase_app_id_file_stg.json" "${SRCROOT}/firebase_app_id_file.json"
else
    cp "${SRCROOT}/firebase_app_id_file_prd.json" "${SRCROOT}/firebase_app_id_file.json"
fi
```


これにてiOSでの設定方法は完了です。

### AndroidのFirebase設定方法
- Firebaseでアプリを追加しAndroidパッケージ名を設定
- ```google-services.json```をインストールしandroid/app/srcに環境別フォルダを作成し```google-services.json```を追加する。


```
android/app/src/dev // 開発
android/app/src/stg //　検証
android/app/src/pro //　本番
```

Androidでの設定は以上になります。

### Firebase初期化main.dart
main関数内で```await Firebase.initilizeapp();``` を追加

これでFirebaseの設定は完了になります。

次にCrashlyticsの設定方法に移ります。

```flutter pub add firebase\_crashlytics```

この時にcocoa podsのfirebase関係のビルドエラーが表示される場合は以下を試して下さい。

```
cd ios  
pod update  
```

main.dartで以下をimportする。

```import 'package:firebase\_crashlytics/firebase\_crashlytics.dart';```

以下二つを追加します。

↓これはFlutter フレームワーク内でスローされたすべてのエラーを自動的にキャッチできます。

```  
FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;  
```

↓これはFlutter フレームワークで処理されない非同期エラーをキャッチできます。

```
PlatformDispatcher.instance.onError = (error, stack) {
  FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
  return true; 
};
```

```
Future<void> main() async {

  WidgetsFlutterBinding.ensureInitialized();

  // Firebase初期化
  await Firebase.initializeApp();

  // Flutter フレームワーク内でスローされたすべてのエラーを自動的にキャッチ
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

  // Flutter フレームワークで処理されない非同期エラーをキャッチ
  PlatformDispatcher.instance.onError = (error, stack) {    
    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);  
    return true;

  runApp(MyApp());
}
```

次に、クラッシュのテストを行います。
コード1では例外を発生させるボタン  
コード2ではアプリをクラッシュさせるボタン
それぞれ試してみて下さい。

```
コード1 例外を発生させるボタン  

ElevatedButton(
  onPressed: () {
    FirebaseCrashlytics.instance.log('ExceptionLog'); 
    throw Exception("MyException");
  },
  child: const Text('Throw Error'), 
),
```



```
コード2 アプリをクラッシュさせるボタン

ElevatedButton(
  onPressed: () { 
    FirebaseCrashlytics.instance.log('CrashLog');
    FirebaseCrashlytics.instance.crash();
  },
  child: const Text('Crash'),
),
```

これにてアプリ側の実装は完了です。お疲れ様でした。

次にテスト内容を確認したいので、Crashlyticsのダッシュボードを開きます。  
プロダクトのカテゴリ→エンゲージメント→Crashlytics  
ダッシュボードを確認してみて下さい!

これでCrashlyticsの設定方法を終了します。読んでいただきありがとうございました。これから記事を増やしていくので、チェックしていただけると嬉しいです。