Skip to content

Conversation

Lms24
Copy link
Member

@Lms24 Lms24 commented Sep 2, 2025

This PR adds support for a new browser SDK init option, propagateTraceparent, as spec'd out in our develop docs

If users opt into propagateTraceparent, browser SDKs will attach a W3C compliant traceparent header to outgoing fetch and XHR requests, in addition to sentry-trace and baggage headers.

A couple of implementation remarks:

  • The unfortunate part of limiting this functionality to browser only is that we have to pass down a flag to the trace data generation and fetch instrumentation functions living in @sentry/core.
  • This also required me to refactor our instrumentFetchRequest function in core because it already took an optional param. Nothing major though in terms of breakage but this is a publicly exported function, so we can't just simply break the signature.
  • I decided to keep things really simple when generating the traceparent header by converting the sentry-trace header to traceparent. This looks weird on first glance but the reason is that generateSentryTraceHeader returns a random uuid if we're in TwP mode. If we were to generate a traceparent header from the same data set, we'd also have to create a random uuid, meaning we'd end up with sentry-trace and traceparent headers on the same request with different (non-existing) parentSpanIds. If we just take the finished header, and morph it into the other header we can avoid this entirely.
  • Added tests for all kinds of tracing configs, tracePropagationTargets, etc

closes #17482

cursor[bot]

This comment was marked as outdated.

cursor[bot]

This comment was marked as outdated.

Copy link
Contributor

github-actions bot commented Sep 2, 2025

size-limit report 📦

Path Size % Change Change
@sentry/browser 24.16 kB - -
@sentry/browser - with treeshaking flags 22.73 kB - -
@sentry/browser (incl. Tracing) 40.13 kB +0.65% +258 B 🔺
@sentry/browser (incl. Tracing, Replay) 78.46 kB +0.3% +230 B 🔺
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 68.24 kB +0.33% +218 B 🔺
@sentry/browser (incl. Tracing, Replay with Canvas) 83.15 kB +0.29% +240 B 🔺
@sentry/browser (incl. Tracing, Replay, Feedback) 95.36 kB +0.27% +256 B 🔺
@sentry/browser (incl. Feedback) 40.89 kB - -
@sentry/browser (incl. sendFeedback) 28.81 kB - -
@sentry/browser (incl. FeedbackAsync) 33.75 kB - -
@sentry/react 25.88 kB +0.01% +1 B 🔺
@sentry/react (incl. Tracing) 42.1 kB +0.5% +207 B 🔺
@sentry/vue 28.64 kB - -
@sentry/vue (incl. Tracing) 41.93 kB +0.57% +237 B 🔺
@sentry/svelte 24.18 kB - -
CDN Bundle 25.74 kB +0.31% +79 B 🔺
CDN Bundle (incl. Tracing) 39.98 kB +0.59% +233 B 🔺
CDN Bundle (incl. Tracing, Replay) 76.27 kB +0.31% +234 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) 81.73 kB +0.28% +225 B 🔺
CDN Bundle - uncompressed 75.16 kB +0.27% +199 B 🔺
CDN Bundle (incl. Tracing) - uncompressed 118.26 kB +0.57% +669 B 🔺
CDN Bundle (incl. Tracing, Replay) - uncompressed 233.35 kB +0.29% +668 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 246.12 kB +0.28% +668 B 🔺
@sentry/nextjs (client) 44.12 kB +0.52% +227 B 🔺
@sentry/sveltekit (client) 40.57 kB +0.6% +241 B 🔺
@sentry/node-core 49.69 kB +0.15% +73 B 🔺
@sentry/node 150.34 kB +0.05% +73 B 🔺
@sentry/node - without tracing 92.26 kB +0.09% +76 B 🔺
@sentry/aws-serverless 105.56 kB +0.09% +85 B 🔺

View base workflow run

Copy link
Contributor

github-actions bot commented Sep 2, 2025

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

Scenario Requests/s % of Baseline Prev. Requests/s Change %
GET Baseline 8,898 - 8,687 +2%
GET With Sentry 1,223 14% 1,275 -4%
GET With Sentry (error only) 6,068 68% 5,998 +1%
POST Baseline 1,198 - 1,142 +5%
POST With Sentry 539 45% 496 +9%
POST With Sentry (error only) 1,051 88% 984 +7%
MYSQL Baseline 3,345 - 3,247 +3%
MYSQL With Sentry 427 13% 435 -2%
MYSQL With Sentry (error only) 2,751 82% 2,648 +4%

View base workflow run

@Lms24 Lms24 changed the title feat(browser): Add suppot for propagateTraceparent SDK option feat(browser): Add support for propagateTraceparent SDK option Sep 2, 2025
cursor[bot]

This comment was marked as outdated.

Copy link
Member

@markushi markushi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

): void {
const originalHeaders = xhr.__sentry_xhr_v3__?.request_headers;

if (originalHeaders?.['sentry-trace']) {
if (originalHeaders?.['sentry-trace'] || !xhr.setRequestHeader) {
// bail if a sentry-trace header is already set
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀 we don't have this logic in sentry-java, but I'll add it too. There's an edge case: if the request has a sentry-trace header, but lacks baggage/traceparent header, we won't add baggage/traceparent here. But I think that's fine, otherwise you could end up in situations where the header values don't match up.

Copy link
Member Author

@Lms24 Lms24 Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if the request has a sentry-trace header, but lacks baggage/traceparent header, we won't add baggage/traceparent here

yes correct and I agree that this is fine. sentry-trace is still the minimum required header for our trace propagation to work according to our DSC dev spec. (Server) SDKs have to handle incoming requests where only sentry-trace is sent. This was primarily required for backwards compatibility but I think this case is another valid (though very edge-casey) reason to do so. So I think this should be safe.

My rationale here is: If users really attach their custom tracing headers (already unlikely but it happened), it's on them to do it properly. We export functions like Sentry.getTraceData() to make this as easy as possible. Everything we do in the SDK would be a "best guess" effort and likely leads to unexpected results.

Copy link
Member

@chargome chargome left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

@@ -20,6 +20,9 @@ export const TRACEPARENT_REGEXP = new RegExp(
/**
* Extract transaction context data from a `sentry-trace` header.
*
* This is terrible naming but the function has nothing to do with the W3C traceparent header.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🥲

@Lms24 Lms24 merged commit 3c048c3 into develop Sep 4, 2025
890 of 913 checks passed
@Lms24 Lms24 deleted the lms/feat-browser-propagateTraceparent branch September 4, 2025 11:22
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.

Add traceparent header support for Browser SDKs
3 participants