Skip to content

feat(browser): Emit web vitals as streamed spans#19827

Draft
logaretm wants to merge 3 commits intolms/feat-span-firstfrom
awad/js-17931-webvitals-v2-spans
Draft

feat(browser): Emit web vitals as streamed spans#19827
logaretm wants to merge 3 commits intolms/feat-span-firstfrom
awad/js-17931-webvitals-v2-spans

Conversation

@logaretm
Copy link
Member

@logaretm logaretm commented Mar 16, 2026

Summary

Closes #17931

When span streaming is enabled (traceLifecycle: 'stream'), emit web vital values as non-standalone spans that flow through the v2 pipeline (afterSpanEndcaptureSpan()SpanBuffer).

This is additive — existing standalone spans and pageload measurements remain untouched. The new spans are only emitted when hasSpanStreamingEnabled(client) is true.

Each web vital span carries browser.web_vital.* attributes per sentry-conventions PRs 229, 233-235:

  • LCP: browser.web_vital.lcp.{value,element,id,url,size,load_time,render_time}
  • CLS: browser.web_vital.cls.{value,source.<N>}
  • INP: browser.web_vital.inp.value
  • TTFB: browser.web_vital.ttfb.{value,request_time}
  • FCP: browser.web_vital.fcp.value
  • FP: browser.web_vital.fp.value

Spans have meaningful durations (navigation start → event time) instead of being point-in-time, except CLS which is a score.

logaretm and others added 3 commits March 16, 2026 13:42
…NTRY_MAP

Add `addFcpInstrumentationHandler` using the existing `onFCP` web-vitals
library integration, following the same pattern as the other metric handlers.
Export `INP_ENTRY_MAP` from inp.ts for reuse in the new web vital spans module.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…is enabled

Add non-standalone web vital spans that flow through the v2 span streaming
pipeline (afterSpanEnd -> captureSpan -> SpanBuffer). Each web vital gets
`browser.web_vital.<metric>.value` attributes and span events for measurement
extraction. Spans have meaningful durations showing time from navigation start
to the web vital event (except CLS which is a score, not a duration).

New tracking functions: trackLcpAsSpan, trackClsAsSpan, trackInpAsSpan,
trackTtfbAsSpan, trackFcpAsSpan, trackFpAsSpan — wired up in
browserTracingIntegration.setup() when hasSpanStreamingEnabled(client).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add Playwright integration tests verifying CLS, LCP, FCP, FP, and TTFB
are emitted as streamed spans with correct attributes, value attributes,
and meaningful durations when span streaming is enabled.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Contributor

size-limit report 📦

Path Size % Change Change
@sentry/browser 25.72 kB added added
@sentry/browser - with treeshaking flags 24.22 kB added added
⛔️ @sentry/browser (incl. Tracing) (max: 43 kB) 43.68 kB added added
⛔️ @sentry/browser (incl. Tracing, Profiling) (max: 48 kB) 48.63 kB added added
⛔️ @sentry/browser (incl. Tracing, Replay) (max: 82 kB) 82.73 kB added added
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 72.24 kB added added
⛔️ @sentry/browser (incl. Tracing, Replay with Canvas) (max: 87 kB) 87.44 kB added added
⛔️ @sentry/browser (incl. Tracing, Replay, Feedback) (max: 99 kB) 99.69 kB added added
@sentry/browser (incl. Feedback) 42.52 kB added added
@sentry/browser (incl. sendFeedback) 30.39 kB added added
@sentry/browser (incl. FeedbackAsync) 35.44 kB added added
@sentry/browser (incl. Metrics) 27 kB added added
@sentry/browser (incl. Logs) 27.15 kB added added
@sentry/browser (incl. Metrics & Logs) 27.81 kB added added
@sentry/react 27.48 kB added added
@sentry/react (incl. Tracing) 45.98 kB added added
@sentry/vue 30.38 kB added added
⛔️ @sentry/vue (incl. Tracing) (max: 45 kB) 45.51 kB added added
@sentry/svelte 25.75 kB added added
CDN Bundle 28.35 kB added added
⛔️ CDN Bundle (incl. Tracing) (max: 44 kB) 44.57 kB added added
CDN Bundle (incl. Logs, Metrics) 29.21 kB added added
⛔️ CDN Bundle (incl. Tracing, Logs, Metrics) (max: 45 kB) 45.45 kB added added
CDN Bundle (incl. Replay, Logs, Metrics) 68.29 kB added added
⛔️ CDN Bundle (incl. Tracing, Replay) (max: 81 kB) 81.41 kB added added
⛔️ CDN Bundle (incl. Tracing, Replay, Logs, Metrics) (max: 82 kB) 82.31 kB added added
CDN Bundle (incl. Tracing, Replay, Feedback) 86.95 kB added added
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) 87.84 kB added added
CDN Bundle - uncompressed 82.76 kB added added
⛔️ CDN Bundle (incl. Tracing) - uncompressed (max: 130 kB) 132.8 kB added added
CDN Bundle (incl. Logs, Metrics) - uncompressed 85.63 kB added added
⛔️ CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed (max: 133 kB) 135.66 kB added added
CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed 209.26 kB added added
⛔️ CDN Bundle (incl. Tracing, Replay) - uncompressed (max: 247 kB) 249.62 kB added added
⛔️ CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed (max: 250 kB) 252.47 kB added added
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 262.53 kB added added
⛔️ CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed (max: 264 kB) 265.38 kB added added
⛔️ @sentry/nextjs (client) (max: 48 kB) 48.46 kB added added
⛔️ @sentry/sveltekit (client) (max: 44 kB) 44.1 kB added added
⛔️ @sentry/node-core (max: 57 kB) 58.27 kB added added
@sentry/node 175.15 kB added added
@sentry/node - without tracing 98.18 kB added added
@sentry/aws-serverless 115.28 kB added added

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant