From f4410116c46b06d280b8215364c9c8da16aeb881 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Mon, 24 Feb 2025 15:50:19 +0000 Subject: [PATCH 1/2] fix(nextjs): Prevent wrong culprit from showing up for clientside error events --- .../appRouterRoutingInstrumentation.ts | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts b/packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts index 6ff2da7f9a37..72e707cf25f8 100644 --- a/packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts +++ b/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 name = INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME; + const attributes: Record = { + [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'); + name = transactionNameifyRouterArgument(argArray[0]); + attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'url'; + attributes['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'); + name = transactionNameifyRouterArgument(argArray[0]); + attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'url'; + attributes['navigation.type'] = 'router.replace'; } else if (routerFunctionName === 'back') { - span?.setAttribute('navigation.type', 'router.back'); + attributes['navigation.type'] = 'router.back'; } else if (routerFunctionName === 'forward') { - span?.setAttribute('navigation.type', 'router.forward'); + attributes['navigation.type'] = 'router.forward'; } + currentNavigationSpan = startBrowserTracingNavigationSpan(client, { + name, + attributes, + }); + return target.apply(thisArg, argArray); }, }); From 88a6b840298ec51ae36c973ca0b390e48533768c Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Mon, 24 Feb 2025 15:54:04 +0000 Subject: [PATCH 2/2] . --- .../appRouterRoutingInstrumentation.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts b/packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts index 72e707cf25f8..312a7119c250 100644 --- a/packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts +++ b/packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts @@ -94,30 +94,30 @@ 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) { - let name = INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME; - const attributes: Record = { + let transactionName = INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME; + const transactionAttributes: Record = { [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation', [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.nextjs.app_router_instrumentation', [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url', }; if (routerFunctionName === 'push') { - name = transactionNameifyRouterArgument(argArray[0]); - attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'url'; - attributes['navigation.type'] = 'router.push'; + transactionName = transactionNameifyRouterArgument(argArray[0]); + transactionAttributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'url'; + transactionAttributes['navigation.type'] = 'router.push'; } else if (routerFunctionName === 'replace') { - name = transactionNameifyRouterArgument(argArray[0]); - attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'url'; - attributes['navigation.type'] = 'router.replace'; + transactionName = transactionNameifyRouterArgument(argArray[0]); + transactionAttributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'url'; + transactionAttributes['navigation.type'] = 'router.replace'; } else if (routerFunctionName === 'back') { - attributes['navigation.type'] = 'router.back'; + transactionAttributes['navigation.type'] = 'router.back'; } else if (routerFunctionName === 'forward') { - attributes['navigation.type'] = 'router.forward'; + transactionAttributes['navigation.type'] = 'router.forward'; } currentNavigationSpan = startBrowserTracingNavigationSpan(client, { - name, - attributes, + name: transactionName, + attributes: transactionAttributes, }); return target.apply(thisArg, argArray);