feat(browser): Update propagationContext on spanEnd to keep trace consistent

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/navigation/test.ts

@@ -130,11 +130,11 @@ sentryTest(
     const request = await requestPromise;
     const headers = request.headers();
 
-    // sampling decision is deferred b/c of no active span at the time of request
+    // sampling decision and DSC are continued from navigation span, even after it ended
     const navigationTraceId = navigationTraceContext?.trace_id;
-    expect(headers['sentry-trace']).toMatch(new RegExp(`^${navigationTraceId}-[0-9a-f]{16}$`));
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${navigationTraceId}-[0-9a-f]{16}-1$`));
     expect(headers['baggage']).toEqual(
-      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${navigationTraceId}`,
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${navigationTraceId},sentry-sample_rate=1,sentry-sampled=true`,
     );
   },
 );
@@ -203,11 +203,11 @@ sentryTest(
     const request = await xhrPromise;
     const headers = request.headers();
 
-    // sampling decision is deferred b/c of no active span at the time of request
+    // sampling decision and DSC are continued from navigation span, even after it ended
     const navigationTraceId = navigationTraceContext?.trace_id;
-    expect(headers['sentry-trace']).toMatch(new RegExp(`^${navigationTraceId}-[0-9a-f]{16}$`));
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${navigationTraceId}-[0-9a-f]{16}-1$`));
     expect(headers['baggage']).toEqual(
-      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${navigationTraceId}`,
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${navigationTraceId},sentry-sample_rate=1,sentry-sampled=true`,
     );
   },
 );

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload/test.ts

@@ -124,11 +124,11 @@ sentryTest(
     const request = await requestPromise;
     const headers = request.headers();
 
-    // sampling decision is deferred b/c of no active span at the time of request
+    // sampling decision and DSC are continued from the pageload span even after it ended
     const pageloadTraceId = pageloadTraceContext?.trace_id;
-    expect(headers['sentry-trace']).toMatch(new RegExp(`^${pageloadTraceId}-[0-9a-f]{16}$`));
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${pageloadTraceId}-[0-9a-f]{16}-1$`));
     expect(headers['baggage']).toEqual(
-      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${pageloadTraceId}`,
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${pageloadTraceId},sentry-sample_rate=1,sentry-sampled=true`,
     );
   },
 );
@@ -191,11 +191,11 @@ sentryTest(
     const request = await requestPromise;
     const headers = request.headers();
 
-    // sampling decision is deferred b/c of no active span at the time of request
+    // sampling decision and DSC are continued from the pageload span even after it ended
     const pageloadTraceId = pageloadTraceContext?.trace_id;
-    expect(headers['sentry-trace']).toMatch(new RegExp(`^${pageloadTraceId}-[0-9a-f]{16}$`));
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${pageloadTraceId}-[0-9a-f]{16}-1$`));
     expect(headers['baggage']).toEqual(
-      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${pageloadTraceId}`,
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${pageloadTraceId},sentry-sample_rate=1,sentry-sampled=true`,
     );
   },
 );

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -14,9 +14,11 @@ import {
   getActiveSpan,
   getClient,
   getCurrentScope,
+  getDynamicSamplingContextFromSpan,
   getIsolationScope,
   getRootSpan,
   registerSpanErrorInstrumentation,
+  spanIsSampled,
   spanToJSON,
   startIdleSpan,
   withScope,
@@ -282,6 +284,29 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
         });
       });
 
+      client.on('spanEnd', span => {
+        const op = spanToJSON(span).op;
+        if (span !== getRootSpan(span) || (op !== 'navigation' && op !== 'pageload')) {
+          return;
+        }
+
+        const scope = getCurrentScope();
+
+        // A trace should to stay the same for the entire time span of one route.
+        // Therefore, when the initial pageload or navigation transaction is ended, we update the
+        // scope's propagation context to keep span-specific attributes like the `sampled` decision and
+        // the dynamic sampling context valid, even after the transaction has ended.
+        // This ensures that the trace data is consistent for the entire duration of the route.
+        const newPropagationContext = {
+          ...scope.getPropagationContext(),
+          // it's okay to always set sampled: true/false here. If we have a span, it cannot be un-sampled.
+          sampled: spanIsSampled(span),
+          dsc: getDynamicSamplingContextFromSpan(span),
+        };
+
+        scope.setPropagationContext(newPropagationContext);
+      });
+
       if (options.instrumentPageLoad && WINDOW.location) {
         const startSpanOptions: StartSpanOptions = {
           name: WINDOW.location.pathname,