fix(nextjs): Prevent wrong culprit from showing up for clientside error events (#15475)

Author: Luca Forstner

packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts

@@ -94,31 +94,32 @@ export function appRouterInstrumentNavigation(client: Client): void {
           // @ts-expect-error Weird type error related to not knowing how to associate return values with the individual functions - we can just ignore
           router[routerFunctionName] = new Proxy(router[routerFunctionName], {
             apply(target, thisArg, argArray) {
-              const span = startBrowserTracingNavigationSpan(client, {
-                name: INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME,
-                attributes: {
-                  [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
-                  [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.nextjs.app_router_instrumentation',
-                  [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
-                },
-              });
-
-              currentNavigationSpan = span;
+              let transactionName = INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME;
+              const transactionAttributes: Record<string, string> = {
+                [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+                [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.nextjs.app_router_instrumentation',
+                [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+              };
 
               if (routerFunctionName === 'push') {
-                span?.updateName(transactionNameifyRouterArgument(argArray[0]));
-                span?.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'url');
-                span?.setAttribute('navigation.type', 'router.push');
+                transactionName = transactionNameifyRouterArgument(argArray[0]);
+                transactionAttributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'url';
+                transactionAttributes['navigation.type'] = 'router.push';
               } else if (routerFunctionName === 'replace') {
-                span?.updateName(transactionNameifyRouterArgument(argArray[0]));
-                span?.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'url');
-                span?.setAttribute('navigation.type', 'router.replace');
+                transactionName = transactionNameifyRouterArgument(argArray[0]);
+                transactionAttributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'url';
+                transactionAttributes['navigation.type'] = 'router.replace';
               } else if (routerFunctionName === 'back') {
-                span?.setAttribute('navigation.type', 'router.back');
+                transactionAttributes['navigation.type'] = 'router.back';
               } else if (routerFunctionName === 'forward') {
-                span?.setAttribute('navigation.type', 'router.forward');
+                transactionAttributes['navigation.type'] = 'router.forward';
               }
 
+              currentNavigationSpan = startBrowserTracingNavigationSpan(client, {
+                name: transactionName,
+                attributes: transactionAttributes,
+              });
+
               return target.apply(thisArg, argArray);
             },
           });