FlutterでDatadog RUMを利用する

この記事はカケハシ Advent Calendar 2023 の20日目の投稿になります。

adventar.org

はじめに

こんにちは！カケハシでおくすり連絡帳 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();