fix(performance): Fixes latest route name and source for interactions not updating properly on navigation

latestRouteName and latestRouteSource are immutable strings, so handlers that use these strings do not get the proper latest values when a route update occurs. This update puts the route name and source in an object. Fixes an issue with interaction transactions always using the first pageload transaction route name even though the user has navigated away from the first route name.

Author: edwardgou-sentry

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

@@ -188,8 +188,10 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
     startTrackingInteractions();
   }
 
-  let latestRouteName: string | undefined;
-  let latestRouteSource: TransactionSource | undefined;
+  const latestRoute: { name: string | undefined; source: TransactionSource | undefined } = {
+    name: undefined,
+    source: undefined,
+  };
 
   /** Create routing idle transaction. */
   function _createRouteTransaction(context: TransactionContext): Transaction | undefined {
@@ -235,8 +237,8 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
         : // eslint-disable-next-line deprecation/deprecation
           finalContext.metadata;
 
-    latestRouteName = finalContext.name;
-    latestRouteSource = getSource(finalContext);
+    latestRoute.name = finalContext.name;
+    latestRoute.source = getSource(finalContext);
 
     if (finalContext.sampled === false) {
       DEBUG_BUILD && logger.log(`[Tracing] Will not send ${finalContext.op} transaction because of beforeNavigate.`);
@@ -384,7 +386,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
       }
 
       if (_experiments.enableInteractions) {
-        registerInteractionListener(options, latestRouteName, latestRouteSource);
+        registerInteractionListener(options, latestRoute);
       }
 
       instrumentOutgoingRequests({
@@ -446,8 +448,7 @@ export function getMetaContent(metaName: string): string | undefined {
 /** Start listener for interaction transactions */
 function registerInteractionListener(
   options: BrowserTracingOptions,
-  latestRouteName: string | undefined,
-  latestRouteSource: TransactionSource | undefined,
+  latestRoute: { name: string | undefined; source: TransactionSource | undefined },
 ): void {
   let inflightInteractionTransaction: IdleTransaction | undefined;
   const registerInteractionTransaction = (): void => {
@@ -470,19 +471,19 @@ function registerInteractionListener(
       inflightInteractionTransaction = undefined;
     }
 
-    if (!latestRouteName) {
+    if (!latestRoute.name) {
       DEBUG_BUILD && logger.warn(`[Tracing] Did not create ${op} transaction because _latestRouteName is missing.`);
       return undefined;
     }
 
     const { location } = WINDOW;
 
     const context: TransactionContext = {
-      name: latestRouteName,
+      name: latestRoute.name,
       op,
       trimEnd: true,
       data: {
-        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: latestRouteSource || 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: latestRoute.source || 'url',
       },
     };