fix(tracing): Set correct parent span id on fetch sentry-trace header (#8687)

In slack we reported a bug where there seemed to be the wrong parent
span id attached to outgoing `sentry-trace` headers.

This ends up being because the `addTracingHeadersToFetchRequest`
attempts to use the transaction instead of the active request span to
generate the outgoing `sentry-trace` header.

This fixes that by adding the span to the
`addTracingHeadersToFetchRequest` method.

Author: AbhiPrasad

packages/sveltekit/src/client/load.ts

@@ -3,7 +3,7 @@ import type { BaseClient } from '@sentry/core';
 import { getCurrentHub, trace } from '@sentry/core';
 import type { Breadcrumbs, BrowserTracing } from '@sentry/svelte';
 import { captureException } from '@sentry/svelte';
-import type { Client, ClientOptions, SanitizedRequestData } from '@sentry/types';
+import type { Client, ClientOptions, SanitizedRequestData, Span } from '@sentry/types';
 import {
   addExceptionMechanism,
   addNonEnumerableProperty,
@@ -186,26 +186,16 @@ function instrumentSvelteKitFetch(originalFetch: SvelteKitFetch): SvelteKitFetch
       const scope = hub.getScope();
       const client = hub.getClient();
 
-      if (client && shouldAttachHeaders(rawUrl)) {
-        const headers = addTracingHeadersToFetchRequest(
-          input as string | Request,
-          client,
-          scope,
-          patchedInit as {
-            headers:
-              | {
-                  [key: string]: string[] | string | undefined;
-                }
-              | Request['headers'];
-          },
-        ) as HeadersInit;
-
-        patchedInit.headers = headers;
-      }
-
       let fetchPromise: Promise<Response>;
 
-      const patchedFetchArgs = [input, patchedInit];
+      function callFetchTarget(span?: Span): Promise<Response> {
+        if (client && shouldAttachHeaders(rawUrl)) {
+          const headers = addTracingHeadersToFetchRequest(input as string | Request, client, scope, patchedInit, span);
+          patchedInit.headers = headers as HeadersInit;
+        }
+        const patchedFetchArgs = [input, patchedInit];
+        return wrappingTarget.apply(thisArg, patchedFetchArgs);
+      }
 
       if (shouldCreateSpan(rawUrl)) {
         fetchPromise = trace(
@@ -215,15 +205,15 @@ function instrumentSvelteKitFetch(originalFetch: SvelteKitFetch): SvelteKitFetch
             data: requestData,
           },
           span => {
-            const promise: Promise<Response> = wrappingTarget.apply(thisArg, patchedFetchArgs);
+            const promise = callFetchTarget(span);
             if (span) {
               promise.then(res => span.setHttpStatus(res.status)).catch(_ => span.setStatus('internal_error'));
             }
             return promise;
           },
         );
       } else {
-        fetchPromise = wrappingTarget.apply(thisArg, patchedFetchArgs);
+        fetchPromise = callFetchTarget();
       }
 
       if (shouldAddFetchBreadcrumb) {

packages/tracing-internal/src/browser/request.ts

@@ -340,7 +340,7 @@ export function fetchCallback(
     const options: { [key: string]: any } = handlerData.args[1];
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
-    options.headers = addTracingHeadersToFetchRequest(request, client, scope, options);
+    options.headers = addTracingHeadersToFetchRequest(request, client, scope, options, span);
   }
 
   return span;
@@ -360,8 +360,9 @@ export function addTracingHeadersToFetchRequest(
         }
       | PolymorphicRequestHeaders;
   },
+  requestSpan?: Span,
 ): PolymorphicRequestHeaders | undefined {
-  const span = scope.getSpan();
+  const span = requestSpan || scope.getSpan();
 
   const transaction = span && span.transaction;
 

packages/tracing-internal/test/browser/request.test.ts

@@ -218,6 +218,26 @@ describe('callbacks', () => {
       expect(newSpan).toBeUndefined();
     });
 
+    it('uses active span to generate sentry-trace header', () => {
+      const spans: Record<string, Span> = {};
+      // triggered by request being sent
+      fetchCallback(fetchHandlerData, alwaysCreateSpan, alwaysAttachHeaders, spans);
+
+      const activeSpan = transaction.spanRecorder?.spans[1] as Span;
+
+      const postRequestFetchHandlerData = {
+        ...fetchHandlerData,
+        endTimestamp,
+        response: { status: 200 } as Response,
+      };
+
+      // triggered by response coming back
+      fetchCallback(postRequestFetchHandlerData, alwaysCreateSpan, alwaysAttachHeaders, spans);
+
+      const headers = (fetchHandlerData.args[1].headers as Record<string, string>) || {};
+      expect(headers['sentry-trace']).toEqual(`${activeSpan.traceId}-${activeSpan.spanId}-1`);
+    });
+
     it('adds content-length to span data on finish', () => {
       const spans: Record<string, Span> = {};