Configure Sentry performance monitoring to track web vitals and transaction latency

Steps

1. Initialize the Sentry JavaScript SDK with the BrowserTracing integration and set tracesSampleRate (0 to 1.0) to control what fraction of page loads and navigation events become transactions with full distributed trace context.
2. Add the browserTracingIntegration() (or BrowserTracing class in older SDK versions) to the integrations array in Sentry.init(); this automatically instruments page loads, navigation, and fetch/XHR as spans within each transaction.
3. Configure tracePropagationTargets with a list of origin strings or regex patterns matching your backend services; only requests to matching origins will have sentry-trace and baggage headers injected for distributed tracing.
4. Review collected transactions in Sentry Performance (Issues > Performance); use the Aggregate Spans view to identify slow operations and inspect individual transactions via the Waterfall view to see span-level timing for network, render, and custom spans.
5. Access Web Vitals (LCP, INP, CLS, FCP, TTFB) on the Performance > Web Vitals page; Sentry auto-collects these from the browser's PerformanceObserver API and attaches them as measurements on page-load transactions.
6. Set performance alert rules under Alerts > Create Alert > Transactions; configure thresholds on p75 or p95 latency, failure rate, or Apdex score for specific transaction name patterns to trigger notifications on regressions.