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

by hisomura

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 | © Commune Inc. All rights reserved 背景 ● 今までRUM（Real User Monitoring）ツールを⼊れていなかった ○ クライアントからエラーが起きたと報告があってもフロントエンドで何が起きたか不明 ○ フロントエンドのパフォーマンスが劣化しても認識できない状態 ● アプリケーションのバックエンドの情報収集には既にOpenTelemetryを利⽤中 ● まだフロントエンド側実装はstableにはなってはいないがフロントエンド側もOpenTelemetryを利⽤すれば良いのではないかと思って今回導⼊

Slide 5

Slide 5 text

5 | © Commune Inc. All rights reserved やったこと ● opentelemetry のパッケージを使って Open Telemetry Collector にログを送信するロガーを⽤意 ● console.error を上書きしてフロントで記録されているエラーを Collector に送信 ● web-vitals を使って取得したデータをCollectorに送信ブラウザ Collector Cloud Logging HTTPS

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

11 | © Commune Inc. All rights reserved headersを使うとnavigator.sendBeacon()が利⽤されない ● navigator.sendBeacon() ○ 分析や診断⽤のデータをサーバーに送信するためのAPI ○ XMLHttpRequest などと違いページ遷移が実⾏されてもリクエストを中断しない ● OTLPLogExporter ではデフォルトで navigator.sendBeacon()が利⽤される ○ ただし、クラスの初期化時にデフォルトのリクエストヘッダを指定すると navigator.sendBeacon() の代わりにXMLHttpRequestが利⽤される落とし⽳2

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text