Datadog RUM導入 フロントエンド定例 2022/12/2

blog_admin|2022年12月02日
フロントエンド

こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事(ランサーズのフロントエンドチームが取り組んでいること)でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

Datadog RUM導入

導入のきっかけとしてブラウザの処理が重い箇所があるかも?という話を聞いたのでブラウザのパフォーマンス等を監視するものとしてDatadog RUMを導入しました。

導入し始めなのでサンプリングさせるためのレートは低めに設定しています。

導入することでできるようになったことを紹介したいと思います。

Core Web Vitals表示

Datadog ページのパフォーマンスの監視

概要として上記のものになります。

アクセスされたページを元に自動でスコアリングしてくれます。

描画に時間がかかっている場所がわかるようになりました。

Session Replay

Datadog Session Replay

ユーザのブラウザをキャプチャしたり、ロングタスクと呼ばれる処理に時間がかかっている箇所を表示できます。

ロングタスク以外に下記のような収集データがあるので色々調査が可能になりました。

Datadog 収集された RUM ブラウザデータ

RUMで取得するデータには保存できる期間があるのでDatadog Logとはまた違う調査ツールだなと思いました。

 

 

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例