2026-05 Sentry Web Vitals monitoring 要件¶

背景¶

Storefront と React Dashboard は Sentry browser tracing / replay / feedback を既に利用しているが、ページ表示速度を alert / dashboard で扱うための metric 名が明文化されていなかった。
Page load transaction だけでは LCP / CLS / INP のような UX 指標を surface 別に集計しにくいため、browser runtime から Sentry metrics へ Core Web Vitals 相当値を送る。

Storefront は storefront.web_vitals.{metric}、React Dashboard は react_dashboard.web_vitals.{metric} を Sentry distribution metric として送信する。
{metric} は ttfb, fcp, lcp, cls, inp を使う。
metric attributes は最低限 surface と page を付ける。
surface: storefront / react-dashboard
page: browser location.pathname
単位は ttfb, fcp, lcp, inp が millisecond、cls が none。
計測は best-effort とし、PerformanceObserver 非対応 browser では送信しない。エラー監視や tracing を fail-open させるための synthetic success は返さない。
Sentry browser tracing は維持し、Web Vitals metrics は threshold alert と時系列 dashboard 用の追加観測面として扱う。

ページ表示速度の初動確認は監視・運用設計書の「Sentry Web Vitals monitoring」を正本にする。
regression 調査では、同じ page / surface の Web Vitals metric と Sentry transaction / replay / browser issue を同時に見る。
threshold は運用開始時点では Core Web Vitals の一般的な目安を使い、Ritsubi の production 実測分布が溜まった後に p75 / p95 ベースで見直す。