この記事は カケハシ Advent Calendar 2023 の20日目の投稿になります。
はじめに
こんにちは!カケハシでおくすり連絡帳 Pocket Musubi というサービスを開発している牧野です。
皆さんはモバイルアプリのモニタリングをしていますでしょうか?
我々のチームではFlutterでモバイルアプリを開発しています。
モバイルアプリ開発においては、アプリの起動時間やCPU、メモリ使用量といったパフォーマンスのモニタリングや、画面遷移やタップといったユーザ行動の分析を行うため、何らかの監視・分析のツールを導入していることが多いのではないでしょうか。
この記事では、FlutterアプリにおけるDatadogのRUMの利用について紹介いたします。
セットアップ
公式ドキュメントに記載の通り、DatadogのRUMで新規のFlutterアプリケーションを作成します。
Flutterプロジェクト側では、DatadogのプラグインのインストールとSDKの初期化のための処理を組み込みます。
$ fvm flutter pub add datadog_flutter_plugin
final configuration = DatadogConfiguration( clientToken: '<CLIENT_TOKEN>', env: '<ENV_NAME>', site: DatadogSite.ap1, nativeCrashReportEnabled: true, loggingConfiguration: DatadogLoggingConfiguration(), rumConfiguration: DatadogRumConfiguration( applicationId: '<APPLICATION_ID>', ), ); await DatadogSdk.runApp(configuration, TrackingConsent.granted, () async { runApp(MyApp()); });
設定が正しく行われていれば、アプリ起動後にRUMのSession Explorerからログが確認できます。
RUM エクスプローラー
デフォルトの状態で、アプリバージョンやOS種別、OSバージョン、デバイスのモデル名等の環境に関する情報や、起動時間やメモリ使用量などのパフォーマンスに関する情報など、アプリの監視、分析に必要なさまざまな情報が送信されているのが確認できます。
ダッシュボードの内容も充実しており、独自のウィジェットやダッシュボードを作成しなくてもさまざまな情報にアクセス可能となっております。
Performance Monitoring
Product Analytics
Mobile Vitals
モバイルアプリ向けのパフォーマンスのメトリクスとして、さまざまなデータを可視化しています。 たとえば下記のようなメトリクスが確認できました。
- Widgetのビルドやレンダリングのパフォーマンス
- ANR
- クラッシュフリーセッション
- CPU使用率
- メモリ使用率
詳細については下記のドキュメントを参照してください。
https://www.datadoghq.com/ja/blog/monitor-mobile-vitals-datadog/
実運用で使えそうなもの
最低限のセットアップだけでさまざまなデータの取得が可能ですが、設定を追加することでより便利な使い方が可能です。
以下でいくつか紹介いたします。
画面遷移のトラッキング
ユーザーの行動分析や不具合調査のための情報として、画面遷移のトラッキングが必要なケースは多いのではないでしょうか。
FlutterアプリではNavigatorのobserverに DatadogNavigationObserver
を設定することで、画面遷移のトラッキングを実現できます。
Navigatorのバージョンやルーティング用に導入しているパッケージによって設定方法が異なるため、詳細はこちらのドキュメントを参照ください。
Navigator v1を利用している場合は、MaterialAppのnavigatorObserversにDatadogNavigationObserverを設定し、PageRouteにsettingsパラメーターを設定することで遷移のトラッキングが行われることが確認できました。
(named routeを利用している場合はPageRouteのsettingsの設定は不要)
MaterialApp( navigatorObservers: [ DatadogNavigationObserver(datadogSdk: DatadogSdk.instance) ], home: const FooPageWidget());
Navigator.of(context).push(MaterialPageRoute( builder: (context) => const DetailPageWidget(), settings: const RouteSettings(name: "詳細画面")));
アクションのトラッキング
自動と手動の2つの方法が提供されています。
自動
RumUserActionDetector
ウィジェットを利用すると、ウィジェットツリー内で発生したアクションを自動的にRUMに送信します。
アクション名として、ボタンの子要素として存在するテキストウィジェットに設定されているテキストを設定してくれます。
また、RumUserActionAnnotation
を利用することで、アクションに任意の名前を設定することが可能です。
RumUserActionAnnotation( description: 'xxxボタン', child: <任意のボタンウィジェット> )
手動
DatadogRum.addUserAction
を利用することで任意のアクションのトラッキングが可能です。
DatadogSdk.instance.rum?.addUserAction( RumUserActionType.tap, <アクション名> );
RumUserActionType
には tap
以外にも scroll
, swipe
, custom
が存在しており、自動トラッキングでは対応できないさまざまなユースケースに対応できそうです。
カスタムエラーのトラッキング
DatadogSdk.instance.rum?.addError(error, RumErrorSource.custom);
RumErrorSourceには source
, network
, webview
,console
が指定可能です。
ユーザーセッションのトラッキング
DatadogSdk.instance.setUserInfo(id: "100");
設定したユーザーIDとの紐づけができていることが確認できます。
RUM イベントの追加や削除
Event Mappers APIを使用することで、イベント送信前にイベントの一部を変更したり、削除したりすることが可能です。
DatadogRumConfiguration(actionEventMapper: (event) => maskEvent(event))
バックエンドとエンドツーエンドでのトレース
datadog_tracking_http_client
のパッケージを利用することで、アプリからのHTTPリクエストをトラッキングできるようになります。
さらに、RUMとAPMトレースの接続により、RUMのエクスプローラーから対象のバックエンドのサービスにリンクすることが可能です。
以下の例では、バックエンドはAPI Gateway + Lambdaの構成になっております。 RUMのViewから、バックエンドのAPMと連携できていることが確認できます。
Flutter側では以下の設定を行っております。
import 'package:datadog_tracking_http_client/datadog_tracking_http_client.dart'; final configuration = DatadogConfiguration( firstPartyHostsWithTracingHeaders: { '<HOST>': {TracingHeaderType.tracecontext}, }, )..enableHttpTracking();
まとめ
FlutterアプリにおけるDatadogのRUMの利用方法について紹介いたしました。
これまでモバイルアプリの監視、分析のためのサービスとして、個人的にはFirebase等別のサービスを利用することが多かったですが、Datadogも十分な機能が提供されているのではないでしょうか。
また、とくにバックエンドのシステムの監視をDatadogで行っている場合、モバイルアプリにおいてもDatadogを導入することで、 エンドツーエンドでサービスの監視、分析が行えるメリットがあります。
FlutterなどモバイルアプリでRUMの利用を検討している人の参考になれば幸いです。