外資就活ネクストの開発チームです。
開発チームの新たな取り組み "開発Days"とはで紹介されたように、弊社では毎月連続した2日間、通常のプロダクト開発から一時的に離れ、技術的な課題に集中的に取り組む仕組みがあります。
今回は、その開発Days vol.5で取り組んだ「モバイルアプリへのDatadog RUM導入」についてご紹介します。
背景: ユーザーの端末で実際に何が起きているかを知りたい
外資就活ネクストのモバイルアプリはReact Native + Expoで構築されています。アプリの初期表示やページ遷移のパフォーマンスについて、開発チームの端末では問題なく動作していても、実際のユーザーの端末上でどの程度の時間がかかっているかは分かりません。
ユーザー体験を改善するには、まず計測から。そこでDatadogのRUM（Real User Monitoring）を導入し、実ユーザーのパフォーマンスデータを収集できる基盤を構築することにしました。
やったこと
Datadog RUMの導入
基本的にはDatadogのExpo用公式ドキュメントに従って導入しました。主な作業は以下のとおりです。
@datadog/mobile-react-nativeとexpo-datadogパッケージの追加- アプリ起動時のDatadog初期化処理の実装
- 環境変数（
DATADOG_CLIENT_TOKEN、DATADOG_APPLICATION_ID）の設定 - Error trackingの有効化
console.logの自動転送
既存の console.log / console.warn / console.error を自動的にDatadogに送信する仕組みを導入しました。Observer Patternを適用し、consoleの出力をインターセプトしてDatadogのログサービスに転送するSink（出力先）を実装しています。
これにより、既存のログ出力コードを一切変更することなく、Datadogでログを確認できるようになりました。デバッグ用のインメモリログにもSinkとして対応しているため、アプリ内のデバッグ画面とDatadogの両方にログが流れます。
パフォーマンス指標の計測
アプリの起動からWebViewのコンテンツが表示されるまでの時間を計測するカスタムRUMイベントを実装しました。
- Cold Start TTV（Time To View）: アプリ起動からWebViewが最初のプログレス更新を受け取るまでの時間
- WebView Load Time: 個別のWebViewページの読み込み時間
これらの指標をDatadog RUMのカスタムイベントとして送信することで、ダッシュボード上で可視化・監視できるようになっています。
環境分離
Datadogの環境をEASのビルド環境に対応させています。
| Datadog環境 | EAS環境 |
|---|---|
| stg | staging |
| prd | production |
| - (無効) | ローカル開発 |
ローカル開発環境ではDatadog連携を無効にし、不要なデータの送信を防いでいます。
ハマったこと
expo-datadogのドキュメントの型エラー
expo-datadogパッケージの公式ドキュメントに記載されたコードの一部が古く、TypeScriptの型エラーが発生していました。ライブラリの実装を直接読み込んで正しい型を特定し、対応しました。
EAS Buildのfingerprint mismatch
EAS Buildでビルドするたびにソースマップを自動アップロードする設定を入れたところ、fingerprintの不一致が発生しました。expo-datadogプラグインの設定がfingerprintの計算に影響を与え、ローカルとEAS Buildで異なるfingerprintが生成されてしまうようです。
根本解決ではありませんが、ひとまず全環境でソースマップアップロードを無効にすることで回避しています。ソースマップが無くてもError trackingは機能するため、運用上の支障はありません。
まとめと今後
開発Daysの2日間でDatadog RUMの導入からログ転送の仕組み、パフォーマンス計測の基盤まで一気に構築できました。セッションリプレイやRailsのコントローラーイベントとの紐付けといった高度な機能は今回スコープ外としましたが、今回のセットアップの延長線上で追加できる状態になっています。
今後は、既存の console.log を適切なログレベルに整理してDatadogのLoggerに置き換えていくことや、「初回起動からWebViewが読み込み完了するまでの時間」といった重要なメトリクスのダッシュボード整備を進めていく予定です。
弊社では、一緒に技術的な課題に取り組んでくれるエンジニアを募集中です！
現在募集中の採用情報の詳細は下記をご覧ください。
