リアルユーザーモニタリングとWeb Vitals

Google の web-vitals npm パッケージは、実際のユーザーのブラウザーで Core Web Vitals を測定するためのシンプルな API を提供します。npm install web-vitals でインストールし、各メトリクスのコールバックである onLCP、onFID（非推奨）、onCLS、onFCP、onTTFB、および Interaction to Next Paint 用の最新の onINP を個別にインポートします。

各コールバック（onLCP、onCLS、onINP など）は、name（'LCP'）、value（ミリ秒または単位のないスコア）、rating（'good'、'needs-improvement'、'poor'）、および id（重複排除用の一意な識別子）を含むメトリクスオブジェクトを受け取ります。コールバックは、メトリクスの値が確定した時点で 1 回実行されます。

メトリクスを分析エンドポイントに報告するには、Navigator.sendBeacon API または fetch を使用します。sendBeacon はページがアンロードされた後も処理を継続するため、ページが非表示になったときに確定する CLS などのメトリクスには特に適しています。可能な場合は、すべてのメトリクスの報告を 1 つの beacon にまとめてください。

Web Vitals を OpenTelemetry と統合するには、各メトリクス用の Gauge インストルメントを作成します。const lcp = meter.createObservableGauge('web_vitals.lcp')。各 onLCP コールバックで、関連する属性（ページパス、デバイスの種類）とともに値を記録します。これにより、オブザーバビリティバックエンドで P75 LCP の悪化に対してアラートを設定できます。

Web Vitals では取得できない React 固有のパフォーマンスを測定するには、User Timing API を使用します。レンダリング前に performance.mark('render-start')、レンダリング後に performance.mark('render-end') を実行し、その後 performance.measure('component-render', 'render-start', 'render-end') を実行します。これらの計測結果は Chrome DevTools の Performance タブに表示されます。

React Profiler コンポーネントはサブツリーをラップし、タイミングデータとともに onRender コールバックを呼び出します。データには id（Profiler の id）、phase（'mount' または 'update'）、actualDuration（レンダー時間）、baseDuration（メモ化を行わない場合の推定レンダー時間）が含まれます。開発中にこれを使用して、処理の遅いコンポーネントを特定してください。

未処理のエラーや Promise の拒否は、エラーステータスを持つ OTel span として捕捉できます。グローバルリスナーを設定します：window.addEventListener('error', handler) および window.addEventListener('unhandledrejection', handler)。span を作成し、span.setStatus({ code: SpanStatusCode.ERROR }) を設定して、エラーメッセージとスタックトレースを属性として追加し、その後 span を終了します。

React Error Boundaries は、コンポーネントツリー内で発生したレンダリングエラーを捕捉します。componentDidCatch メソッドでエラーを表す OTel span を作成し、ステータスを ERROR に設定して、error.message と componentStack を属性として付加し、span.end() を呼び出します。これにより、React のレンダリングエラーが分散トレースのパイプラインに送られます。

本番環境で minify された JavaScript では、"a.b at bundle.min.js:1:84721" のような読みにくいスタックトレースが生成されます。CI/CD のビルドプロセス中にソースマップを Sentry、Datadog、または OTel パイプラインにアップロードしておくと、未加工のスタックトレースが元の TypeScript ファイル名と行番号に自動的に解決されます。

すべてのセッションについて完全なトレースデータを送信すると、コストが高くなります。セッションサンプリングを実装し、最初のページ読み込み時に sessionSampled フラグをランダムに割り当てて sessionStorage に保存します。サンプリング対象のセッション（例：10%）に対してのみ OTel SDK を初期化し、トレースを送信します。エラーが発生したセッションは常に 100% サンプリングしてください。

Web Vitals を OTel メトリクスとして報告すると、SLO に基づくアラートを設定できます。1 時間の期間において、5% を超えるセッションで P75 LCP が 2.5 秒を超えた場合にアラートを発生させます。これにより、バックエンドのインフラストラクチャメトリクスではなく、ユーザー体験に直接結び付いた、エンジニアリングチームが対応可能なシグナルを得られます。

web-vitals ライブラリの onLCP コールバックはいつ実行されますか。

web-vitals ライブラリは、実際のユーザーのブラウザーで LCP、INP、CLS、FCP、TTFB を測定するためのシンプルなコールバックを提供します。これらを OTel メトリクスとして報告して SLO に基づくアラートを設定し、グローバルリスナーと React Error Boundaries を使用してエラーを OTel span として捕捉し、ソースマップをアップロードして minify されたスタックトレースを解決します。セッションをサンプリングしてデータ量を管理しながら、エラーは 100% 保持してください。