Datadog RUM 本番導入までの道

freee でパイロットプロダクトに Datadog RUM を導入した際の詰まりポイントをまとめました。

※ Japan Datadog User Group Meetup#10 の登壇資料です。
登壇動画: https://www.youtube.com/live/35JcoUB8m6M?feature=shared&t=2473

Transcript

1. Japan Datadog User Group Meetup#10
 Datadog RUM 本番導入までの道 
 2025.5.28
2. 2 2023/04 freee 新卒入社
 2023/07~
 2025/03 DBRE
 2025/04~ Enabling
 
 
 趣味: 麻雀🀄
 雀聖3から転げ落ちていってます
 shinta
 SRE船 Enablingヨット

3. 3 目次
 01　Datadog RUM とは?
 02　なぜ導入したのか
 03　サンプリングレートの決定
 04　セキュリティ
 05　フロントの謎エラー
 06　APM との接続
 07　RUM 活用方法の展望

4. 4 01　Datadog RUM とは?
 02　なぜ導入したのか
 03　サンプリングレートの決定
 04　セキュリティ
 05　フロントの謎エラー
 06　APM との接続
 07　RUM 活用方法の展望
 目次

5. 5 • Real User Monitoring の略
 ◦ アプリケーションのフロントエンドのパフォーマンスをリアルタイムで監視できる
 • RUM で見れるもの（一例）
 ◦ 画面ごとのレンダリング速度
 ◦ 画面ごとの Core Web Vitals (UX 指標)
 ◦ 画面ごとのエラー率
 ◦ 平均サイト滞在時間
 ◦ ユーザーの典型的な画面遷移のリスト
 ◦ ユーザーの画面操作している様子の動画（セッションリプレイ）
 ◦ ユーザーのイラつき度合い（フラストレーションシグナル）
 
 Datadog RUM とは？

6. 6 • Session: 
 ユーザーがサイトに滞在してる間の単位のデータ
 • View: 
 ページにアクセスされる度に生成されるデータ
 • User Action: 
 ボタンをクリックしたなどのユーザーインタラクションの データ
 
 Datadog RUM の基本概念

7. 7 Datadog RUM session explorer

8. 8 • セッション数に比例
 
 Datadog RUM のコスト

9. 9 • RUM アプリケーションをボタンぽちぽちで作成して...
 
 Datadog RUM 導入方法

10. 10 • SDK 初期化コードをフロントに置くだけ！簡単！
 
 Datadog RUM 導入方法

11. 11 01　Datadog RUM とは?
 02　なぜ導入したのか
 03　サンプリングレートの決定
 04　セキュリティ
 05　フロントの謎エラー
 06　APM との接続
 07　RUM 活用方法の展望
 目次

12. 12 • ほとんどフロントの可観測性がない状態だったから
 ◦ ① 画面が真っ白になるようなエラーになっていても、
 ユーザーの問い合わせでしか気づけない
 ◦ → MTTR の遅延に繋がる
 
 ◦ ② API のレスポンスは速いが描画が遅いケースを検知できていない
 ◦ → UX 改善のサイクルが回しづらい
 
 なぜ Datadog RUM を導入したのか
 ※ MTTR (Mean Time To Repair) : システムの故障から復旧までに要する時間

13. 13 RUM 本番導入までにしたことの紹介

14. 14 目次
 01　Datadog RUM とは?
 02　なぜ導入したのか
 03　サンプリングレートの決定
 04　セキュリティ
 05　フロントの謎エラー
 06　APM との接続
 07　RUM 活用方法の展望

15. 15 • RUM ではセッションのサンプリングレートを設定可能
 • コストはセッション数に比例して決まる
 → 本番導入時のセッション数を見積もる必要がある！
 サンプリングレートの決定方法
 フロントの可観測性が 0 の状態でどうやって？

16. 16 • ステージング環境に先に RUM を導入、E2E を流すことで1セッションごとの平均 API リクエスト 数を算出
 • 本番環境の API リクエスト数は算出可能 (バックエンドは監視が豊富なので)
 • 本番導入時のセッション数 = 本番環境の API リクエスト数 ÷ 1セッションごとの平均 API リクエ スト数
 サンプリングレートの決定方法

17. 17 • 本番導入時のセッション数予想から年間の RUM の料金を予想
 • Datadog のために取られている予算に収まるようにサンプリングレートを決定
 サンプリングレートの決定方法

18. 18 01　Datadog RUM とは?
 02　なぜ導入したのか
 03　サンプリングレートの決定
 04　セキュリティ
 05　フロントの謎エラー
 06　APM との接続
 07　RUM 活用方法の展望
 目次

19. 19 • freee では明確に決められている
 ◦ 例えばユーザーの業務データなどは絶対ダメ
 ◦ 例えばユーザーの事業所 ID、加入しているプランは OK
 Datadog にどのレベルのデータまで送って良いか

20. 20 • RUM では User Action についての情報を収集している
 ◦ ボタンのラベルの text がモロに Datadog に出ていた
 Datadog に RUM 経由で顧客データが送られてしまうパターン

21. 21 • beforeSend というコールバックで 
 Datadog にデータ送信前に
 クライアント側でマスキング可能
 対策: Datadog に送る前にマスキング

22. 22 対策: Datadog に送る前にマスキング

23. 23 01　Datadog RUM とは?
 02　なぜ導入したのか
 03　サンプリングレートの決定
 04　セキュリティ
 05　フロントの謎エラー
 06　APM との接続
 07　RUM 活用方法の展望
 目次

24. 24 • ステージング環境に RUM を導入したところ、
 ResizeObserver loop completed with undelivered notifications. というエラーが大量発生
 • 調べると JavaScript の一般的なエラーで、ユーザー影響はほとんどないらしい
 ◦ とはいえ怖い...
 RUM 導入後、フロントで謎エラー発生

25. 25 • Issue 立ててみたけど SDK 側で回避するのは根本的に無理らしい...
 • RUM SDK が画面の要素を監視しているのと、freee のサービスが画面の要素のサイズを変 更しているのが相性悪いらしい
 RUM 導入後、フロントで謎エラー発生

26. 26 • 謎エラーを根本から直すのは時間かかりそう
 • ユーザー影響がないことが確認できるなら、このエラーを握りつぶしたい.......
 RUM 導入後、フロントで謎エラー発生
 RUM の出番では？？？

27. 27 • RUM でエラーが起きてる時と起きてない時の画面の描画速度を比較
 謎エラーの影響調査

30. 30 • 謎エラーが起きてる時と起きてない時の画面の描画速度に差はない
 • UX の良さを示す Core web vitals にも差はない
 • 念の為実際に画面で謎エラーを再現させて、体験に問題がないのを目視で確認
 • → 握りつぶす方向へ意思決定できた
 謎エラーの影響調査

31. 31 01　Datadog RUM とは?
 02　なぜ導入したのか
 03　サンプリングレートの決定
 04　セキュリティ
 05　フロントの謎エラー
 06　APM との接続
 07　RUM 活用方法の展望
 目次

32. 32 • RUM の画面の描画が親スパンとなって、APM のバックエンドのスパンと繋げることができる
 • これによりフロントエンドとバックエンドのパフォーマンスが一気通貫で見れる
 RUM と APM は繋いで見れる

33. 33 RUM と APM は繋いで見れる

34. 34 RUM と APM の繋ぎ方
 allowedTracingUrls: バックエンドの FQDN
 traceContextInjection: APM のサンプリ ングレートに関する設定
 traceSampleRate: APM のサンプリング レート

35. 35 本番導入完了 🎉🎉

36. 36 01　Datadog RUM とは?
 02　なぜ導入したのか
 03　サンプリングレートの決定
 04　セキュリティ
 05　フロントの謎エラー
 06　APM との接続
 07　RUM 活用方法の展望
 目次

37. 37 • RUM のメトリクスはモニターや SLO などにも活用できる
 • 画面が真っ白になっていることを検知するモニターの作成
 ◦ 画面にエラーが発生してることのモニター + 描画速度のモニターの
 composite モニターでいける説
 • 重要な画面の Core Web Vitals を SLI とする SLO の作成
 ◦ RUM のメトリクスから generate metrics できるのでそれを利用
 今後の展望

38. スモールビジネスを、世界の主役に。 

39. 39 We are hiring!
 freeeでは、freeeの目指す世界に共感し、個 性を最大限発揮しながら前向きにチャレンジ し続けられる仲間を募集しています！ 
 
 採⽤サイト 募集要項(新卒)