Slide 1

Slide 1 text

Japan Datadog User Group Meetup#10
 Datadog RUM 本番導入までの道 
 2025.5.28

Slide 2

Slide 2 text

2 2023/04 freee 新卒入社
 2023/07~
 2025/03 DBRE
 2025/04~ Enabling
 
 
 趣味: 麻雀🀄
 雀聖3から転げ落ちていってます
 shinta
 SRE船 Enablingヨット


Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

7 Datadog RUM session explorer


Slide 8

Slide 8 text

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


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

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


Slide 15

Slide 15 text

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


Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

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


Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

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


Slide 23

Slide 23 text

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


Slide 24

Slide 24 text

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


Slide 25

Slide 25 text

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


Slide 26

Slide 26 text

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


Slide 27

Slide 27 text

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


Slide 28

Slide 28 text

28

Slide 29

Slide 29 text

29

Slide 30

Slide 30 text

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


Slide 31

Slide 31 text

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


Slide 32

Slide 32 text

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


Slide 33

Slide 33 text

33 RUM と APM は繋いで見れる


Slide 34

Slide 34 text

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


Slide 35

Slide 35 text

35 本番導入完了 🎉🎉


Slide 36

Slide 36 text

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


Slide 37

Slide 37 text

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


Slide 38

Slide 38 text

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


Slide 39

Slide 39 text

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