この記事ではFLuttterの環境別Crashlyticsの設定方法を紹介します。
目次
1. 環境別Firebaseプロジェクトの作成
2. main.dartの実装
3. iOSの設定
4. Androidの設定
上記の順で紹介したいと思います。
まずCrashlyticsを使用するためにFirebaseプロジェクトを作成します。URLをタップすると以下の画像のように「使ってみる」が表示されるのでタップ(ログイン、アカウントの作成を行なっていない方は作成して下さい。)
すると、以下の画像のような画面に遷移すると思うので、プロジェクトを追加→プロジェクト名を設定→続行→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とします。
この際に気をつけることは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の設定方法を終了します。読んでいただきありがとうございました。これから記事を増やしていくので、チェックしていただけると嬉しいです。