fix(tracing): Use route name instead of route key for current route tracking (#4650)

Co-authored-by: Krystof Woldrich <krystof.woldrich@sentry.io>

Author: antonis

CHANGELOG.md

@@ -18,6 +18,8 @@
 
 - Considers the `SENTRY_DISABLE_AUTO_UPLOAD` and `SENTRY_DISABLE_NATIVE_DEBUG_UPLOAD` environment variables in the configuration of the Sentry Android Gradle Plugin for Expo plugin ([#4583](https://github.com/getsentry/sentry-react-native/pull/4583))
 - Handle non-string category in getCurrentScreen on iOS ([#4629](https://github.com/getsentry/sentry-react-native/pull/4629))
+- Use route name instead of route key for current route tracking ([#4650](https://github.com/getsentry/sentry-react-native/pull/4650))
+  - Using key caused user interaction transaction names to contain route hash in the name.
 
 ### Dependencies
 

packages/core/src/js/tracing/reactnavigation.ts

@@ -326,7 +326,7 @@ export const reactNavigationIntegration = ({
       },
     });
 
-    tracing?.setCurrentRoute(route.key);
+    tracing?.setCurrentRoute(route.name);
 
     pushRecentRouteKey(route.key);
     latestRoute = route;

packages/core/test/tracing/reactnavigation.test.ts

@@ -579,6 +579,73 @@ describe('ReactNavigationInstrumentation', () => {
     });
   });
 
+  describe('setCurrentRoute', () => {
+    let mockSetCurrentRoute: jest.Mock;
+
+    beforeEach(() => {
+      mockSetCurrentRoute = jest.fn();
+      const rnTracingIntegration = reactNativeTracingIntegration();
+      rnTracingIntegration.setCurrentRoute = mockSetCurrentRoute;
+
+      const rNavigation = reactNavigationIntegration({
+        routeChangeTimeoutMs: 200,
+      });
+      mockNavigation = createMockNavigationAndAttachTo(rNavigation);
+
+      const options = getDefaultTestClientOptions({
+        enableNativeFramesTracking: false,
+        enableStallTracking: false,
+        tracesSampleRate: 1.0,
+        integrations: [rNavigation, rnTracingIntegration],
+        enableAppStartTracking: false,
+      });
+
+      client = new TestClient(options);
+      setCurrentClient(client);
+      client.init();
+
+      jest.runOnlyPendingTimers();
+    });
+
+    test('setCurrentRoute is called with route name after navigation', async () => {
+      expect(mockSetCurrentRoute).toHaveBeenCalledWith('Initial Screen');
+
+      mockSetCurrentRoute.mockClear();
+      mockNavigation.navigateToNewScreen();
+      jest.runOnlyPendingTimers();
+
+      expect(mockSetCurrentRoute).toHaveBeenCalledWith('New Screen');
+
+      mockSetCurrentRoute.mockClear();
+      mockNavigation.navigateToSecondScreen();
+      jest.runOnlyPendingTimers();
+
+      expect(mockSetCurrentRoute).toHaveBeenCalledWith('Second Screen');
+
+      mockSetCurrentRoute.mockClear();
+      mockNavigation.navigateToInitialScreen();
+      jest.runOnlyPendingTimers();
+
+      expect(mockSetCurrentRoute).toHaveBeenCalledWith('Initial Screen');
+    });
+
+    test('setCurrentRoute is not called when navigation is cancelled', async () => {
+      mockSetCurrentRoute.mockClear();
+      mockNavigation.emitCancelledNavigation();
+      jest.runOnlyPendingTimers();
+
+      expect(mockSetCurrentRoute).not.toHaveBeenCalled();
+    });
+
+    test('setCurrentRoute is not called when navigation finishes', async () => {
+      mockSetCurrentRoute.mockClear();
+      mockNavigation.finishAppStartNavigation();
+      jest.runOnlyPendingTimers();
+
+      expect(mockSetCurrentRoute).not.toHaveBeenCalled();
+    });
+  });
+
   function setupTestClient(
     setupOptions: {
       beforeSpanStart?: (options: StartSpanOptions) => StartSpanOptions;