Revisit cross-usage with tests.

Author: onurtemizkan

packages/react/jest.config.js

@@ -3,6 +3,7 @@ const baseConfig = require('../../jest/jest.config.js');
 module.exports = {
   ...baseConfig,
   testEnvironment: 'jsdom',
+  setupFiles: ['whatwg-fetch'],
   // We have some tests that trigger warnings, which mess up the test logs
   silent: true,
 };

packages/react/src/reactrouterv6-compat-utils.tsx

@@ -361,14 +361,30 @@ export function handleNavigation(opts: {
       [name, source] = getNormalizedName(routes, location, branches, basename);
     }
 
-    startBrowserTracingNavigationSpan(client, {
-      name,
-      attributes: {
-        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
-        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
-        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.reactrouter_v${version}`,
-      },
-    });
+    const activeSpan = getActiveSpan();
+    const spanJSON = activeSpan
+      ? spanToJSON(activeSpan)
+      : {
+          description: '',
+          op: '',
+        };
+
+    const isAlreadyInNavigationSpan = spanJSON && spanJSON.op === 'navigation';
+
+    // Cross usage can result in multiple navigation spans being created without this check
+    if (isAlreadyInNavigationSpan) {
+      activeSpan?.updateName(name);
+      activeSpan?.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+    } else {
+      startBrowserTracingNavigationSpan(client, {
+        name,
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.reactrouter_v${version}`,
+        },
+      });
+    }
   }
 }
 
@@ -450,7 +466,6 @@ function addRoutesToAllRoutes(routes: RouteObject[]): void {
   });
 }
 
-
 function getChildRoutesRecursively(route: RouteObject, allRoutes: Set<RouteObject> = new Set()): Set<RouteObject> {
   if (!allRoutes.has(route)) {
     allRoutes.add(route);