Update activeSpan instead of rootSpan

Author: onurtemizkan

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

@@ -518,27 +518,28 @@ export function handleNavigation(opts: {
     }
 
     const activeSpan = getActiveSpan();
-    const rootSpan = activeSpan ? getRootSpan(activeSpan) : undefined;
-    const isAlreadyInNavigationSpan = rootSpan && spanToJSON(rootSpan).op === 'navigation';
+    const isAlreadyInNavigationSpan = activeSpan && spanToJSON(activeSpan).op === 'navigation';
 
     // Cross usage can result in multiple navigation spans being created without this check
     if (isAlreadyInNavigationSpan) {
       // Check if we've already set the name for this span using a custom property
       const hasBeenNamed = (
-        rootSpan as {
+        activeSpan as {
           __sentry_navigation_name_set__?: boolean;
         }
       )?.__sentry_navigation_name_set__;
       if (!hasBeenNamed) {
         // This is the first time we're setting the name for this span
-        const spanJson = spanToJSON(rootSpan);
+        const spanJson = spanToJSON(activeSpan);
         if (!spanJson.timestamp) {
-          rootSpan?.updateName(name);
-          rootSpan?.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+          activeSpan?.updateName(name);
         }
+
         // Mark this span as having its name set to prevent future updates
-        addNonEnumerableProperty(rootSpan, '__sentry_navigation_name_set__', true);
+        addNonEnumerableProperty(activeSpan, '__sentry_navigation_name_set__', true);
       }
+
+      activeSpan?.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
       // If we already have a name for this span, don't update it
     } else {
       const span = startBrowserTracingNavigationSpan(client, {

packages/react/test/reactrouter-cross-usage.test.tsx

@@ -288,11 +288,6 @@ describe('React Router cross usage of wrappers', () => {
 
       // It's called 1 time from the wrapped `MemoryRouter`
       expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
-
-      // It's called 3 times from the 3 `useRoutes` components
-      expect(mockNavigationSpan.updateName).toHaveBeenCalledTimes(3);
-      expect(mockNavigationSpan.updateName).toHaveBeenLastCalledWith('/second-level/:id/third-level/:id');
-
       expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
         name: '/second-level/:id/third-level/:id',
         attributes: {
@@ -459,11 +454,6 @@ describe('React Router cross usage of wrappers', () => {
 
       // It's called 1 time from the wrapped `MemoryRouter`
       expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
-
-      // It's called 3 times from the 3 `useRoutes` components
-      expect(mockNavigationSpan.updateName).toHaveBeenCalledTimes(3);
-      expect(mockNavigationSpan.updateName).toHaveBeenLastCalledWith('/second-level/:id/third-level/:id');
-      expect(mockNavigationSpan.setAttribute).toHaveBeenLastCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
     });
   });
 
@@ -611,10 +601,6 @@ describe('React Router cross usage of wrappers', () => {
       // It's called 1 time from the wrapped `createMemoryRouter`
       expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
 
-      // It's called 3 times from the 3 `SentryRoutes` components
-      expect(mockNavigationSpan.updateName).toHaveBeenCalledTimes(3);
-      expect(mockNavigationSpan.updateName).toHaveBeenLastCalledWith('/second-level/:id/third-level/:id');
-
       expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
         name: '/second-level/:id/third-level/:id',
         attributes: {
@@ -790,11 +776,6 @@ describe('React Router cross usage of wrappers', () => {
 
       // It's called 1 time from the wrapped `MemoryRouter`
       expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
-
-      // It's called 3 times from the 2 `useRoutes` components and 1 <SentryRoutes> component
-      expect(mockNavigationSpan.updateName).toHaveBeenCalledTimes(3);
-
-      expect(mockNavigationSpan.updateName).toHaveBeenLastCalledWith('/second-level/:id/third-level/:id');
       expect(mockNavigationSpan.setAttribute).toHaveBeenLastCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
     });
   });