fix(tracing): Only create request span if there is active span (#10375)

This was a regression introduced with
#10236, we shouldn't
arbitrarily call `startInactiveSpan` given we create transactions under
the hood currently.

Author: AbhiPrasad

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

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  getActiveSpan,
   getClient,
   getCurrentScope,
   getDynamicSamplingContextFromClient,
@@ -279,18 +280,21 @@ export function xhrCallback(
   const scope = getCurrentScope();
   const isolationScope = getIsolationScope();
 
-  const span = shouldCreateSpanResult
-    ? startInactiveSpan({
-        attributes: {
-          type: 'xhr',
-          'http.method': sentryXhrData.method,
-          url: sentryXhrData.url,
-          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser',
-        },
-        name: `${sentryXhrData.method} ${sentryXhrData.url}`,
-        op: 'http.client',
-      })
-    : undefined;
+  // only create a child span if there is an active span. This is because
+  // `startInactiveSpan` can still create a transaction under the hood
+  const span =
+    shouldCreateSpanResult && getActiveSpan()
+      ? startInactiveSpan({
+          attributes: {
+            type: 'xhr',
+            'http.method': sentryXhrData.method,
+            url: sentryXhrData.url,
+            [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser',
+          },
+          name: `${sentryXhrData.method} ${sentryXhrData.url}`,
+          op: 'http.client',
+        })
+      : undefined;
 
   if (span) {
     xhr.__sentry_xhr_span_id__ = span.spanContext().spanId;

packages/tracing-internal/src/common/fetch.ts

@@ -1,5 +1,6 @@
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  getActiveSpan,
   getClient,
   getCurrentScope,
   getDynamicSamplingContextFromClient,
@@ -81,18 +82,21 @@ export function instrumentFetchRequest(
 
   const { method, url } = handlerData.fetchData;
 
-  const span = shouldCreateSpanResult
-    ? startInactiveSpan({
-        attributes: {
-          url,
-          type: 'fetch',
-          'http.method': method,
-          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: spanOrigin,
-        },
-        name: `${method} ${url}`,
-        op: 'http.client',
-      })
-    : undefined;
+  // only create a child span if there is an active span. This is because
+  // `startInactiveSpan` can still create a transaction under the hood
+  const span =
+    shouldCreateSpanResult && getActiveSpan()
+      ? startInactiveSpan({
+          attributes: {
+            url,
+            type: 'fetch',
+            'http.method': method,
+            [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: spanOrigin,
+          },
+          name: `${method} ${url}`,
+          op: 'http.client',
+        })
+      : undefined;
 
   if (span) {
     handlerData.fetchData.__span = span.spanContext().spanId;