OpenTelemetry を使ってフロントエンドのログとCore Web Vitalsを収集した話

WebフロントエンドのエラーログやCore Web Vitals をOpenTelemetry SDKを使ってCollectorに送信し、Cloud Loggingで確認できるようにする実装を行いました。実装を経て分かったこと、知ったことなどについて話します。

Transcript

1. 1 | © Commune Inc. All rights reserved OpenTelemetry を使ってフロントエ ンドのログとCore Web Vitalsを収集 した話
2. 2 | © Commune Inc. All rights reserved Agenda • ⾃⼰紹介 • やったこと • やっているときに気がついた落とし⽳ • 今後
3. 3 | © Commune Inc. All rights reserved ⾃⼰紹介 磯村洋 • 所属 ◦ コミューン株式会社 開発部 SREチーム • 概略 ◦ 2021年3⽉にコミューン株式会社に⼊社。 ◦ 2022年6⽉よりSREチームに所属 • 趣味 ◦ 筋トレ ◦ 散歩
4. 4 | © Commune Inc. All rights reserved 背景 • 今までRUM（Real User Monitoring）ツールを⼊れていなかった ◦ クライアントからエラーが起きたと報告があってもフロントエンドで何が起きたか不明 ◦ フロントエンドのパフォーマンスが劣化しても認識できない状態 • アプリケーションのバックエンドの情報収集には既にOpenTelemetryを利⽤中 • まだフロントエンド側実装はstableにはなってはいないがフロントエンド側もOpenTelemetryを利 ⽤すれば良いのではないかと思って今回導⼊
5. 5 | © Commune Inc. All rights reserved やったこと • opentelemetry のパッケージを使って Open Telemetry Collector にログを送信するロガーを⽤意 • console.error を上書きしてフロントで記録されているエラーを Collector に送信 • web-vitals を使って取得したデータをCollectorに送信 ブラウザ Collector Cloud Logging HTTPS
6. 6 | © Commune Inc. All rights reserved loggerの準備 • この程度のコードで動作可能 • emit()を実⾏するとログが処理される • ⼀定数のログがたまるか⼀定時間経過するとログが送信される Cloud Logging
7. 7 | © Commune Inc. All rights reserved エラーログの収集 • console.error を上書き • キャッチされなかった場合にエラーをキャッチするイベントハンドラにコールバックを登録 Cloud Logging
8. 8 | © Commune Inc. All rights reserved Web-vitals の取得 • web-vitals パッケージで取得できた値をそのまま送信 Cloud Logging
9. 9 | © Commune Inc. All rights reserved グラフの作成 バージョン毎のエラー数 • Log Analyticsでグラフを作成 バージョン毎のLCPのレートがpoor だった件数
10. 10 | © Commune Inc. All rights reserved SDKは開発中、ドキュメントも無い • JavascriptのLogsはまだ開発中でドキュメントも無い • ブラウザの実装に関しても開発中、仕様すら固まってない仕様もある 落とし⽳1
11. 11 | © Commune Inc. All rights reserved headersを使うとnavigator.sendBeacon()が利⽤されない • navigator.sendBeacon() ◦ 分析や診断⽤のデータをサーバーに送信するためのAPI ◦ XMLHttpRequest などと違いページ遷移が実⾏されてもリクエストを中断しない • OTLPLogExporter ではデフォルトで navigator.sendBeacon()が利⽤される ◦ ただし、クラスの初期化時にデフォルトのリクエストヘッダを指定すると navigator.sendBeacon() の代わりにXMLHttpRequestが利⽤される 落とし⽳2
12. 12 | © Commune Inc. All rights reserved 構造化データはLogRecordのbodyに⼊れる 落とし⽳3 • bodyがstring型になっていて、attributesが構造化データを⼊れられる型になっているので attributesに構造化データを⼊れたくなるが･･･
13. 13 | © Commune Inc. All rights reserved 構造化データはbodyに⼊れる 落とし⽳3 • Cloud Loggingの場合attributesに対応するlabelsが構造化データに対応していないため⽂字列にさ れてしまう
14. 14 | © Commune Inc. All rights reserved 構造化データはbodyに⼊れる 落とし⽳3 • 正解はbodyに直接構造化データを⼊れること • string型のbodyにオブジェクトを⼊れるので、もちろん型エラーを無視する必要がある
15. 15 | © Commune Inc. All rights reserved 構造化データはbodyに⼊れる 落とし⽳3 • @opentelemetry/api-logs 0.49.1 -> 0.50.0 で直っていました･･･ • 鋭意開発中ということがよく分かりました 😭 0.49.1 0.50.0
16. 16 | © Commune Inc. All rights reserved 今後 • ページ遷移、要素のクリックなどをとれるようにしたい • Traces をとれるようにしたい ◦ イベントの発⽕の起因が分からないのでとれるようにしたい ◦ Logsを紐付けたい • パフォーマンス指標はMetricsで取る or Metricsに変換したい
17. 17 | © Commune Inc. All rights reserved コミューンはあなたのキャリアを実現するビークルです！ 17 Xアカウント
 @CommuneDev
 フォローお願いします!
 エンジニア向け会社情報
 https://commmune.notion.site/ver-0 b895a0187ef4954a2d5182afd82082 d