feat(nextjs): Add transaction name to scope of server component (#11850)

ref #11782

---------

Co-authored-by: Francesco Novy <[email protected]>

Author: s1gr1d

packages/nextjs/src/common/types.ts

@@ -5,7 +5,7 @@ import type { RequestAsyncStorage } from '../config/templates/requestAsyncStorag
 
 export type ServerComponentContext = {
   componentRoute: string;
-  componentType: string;
+  componentType: 'Page' | 'Layout' | 'Head' | 'Not-found' | 'Loading' | 'Unknown';
   headers?: WebFetchHeaders;
 };
 

packages/nextjs/src/common/wrapServerComponentWithSentry.ts

@@ -3,10 +3,10 @@ import {
   SPAN_STATUS_ERROR,
   SPAN_STATUS_OK,
   captureException,
-  getCurrentScope,
   handleCallbackErrors,
   startSpanManual,
   withIsolationScope,
+  withScope,
 } from '@sentry/core';
 import { propagationContextFromHeaders, winterCGHeadersToDict } from '@sentry/utils';
 
@@ -55,47 +55,50 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
         const propagationContext = commonObjectToPropagationContext(context.headers, incomingPropagationContext);
 
         return withIsolationScope(isolationScope, () => {
-          isolationScope.setTransactionName(`${componentType} Server Component (${componentRoute})`);
-          getCurrentScope().setPropagationContext(propagationContext);
-          return startSpanManual(
-            {
-              op: 'function.nextjs',
-              name: `${componentType} Server Component (${componentRoute})`,
-              forceTransaction: true,
-              attributes: {
-                [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'component',
-                [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.function.nextjs',
-              },
-            },
-            span => {
-              return handleCallbackErrors(
-                () => originalFunction.apply(thisArg, args),
-                error => {
-                  if (isNotFoundNavigationError(error)) {
-                    // We don't want to report "not-found"s
-                    span.setStatus({ code: SPAN_STATUS_ERROR, message: 'not_found' });
-                  } else if (isRedirectNavigationError(error)) {
-                    // We don't want to report redirects
-                    span.setStatus({ code: SPAN_STATUS_OK });
-                  } else {
-                    span.setStatus({ code: SPAN_STATUS_ERROR, message: 'internal_error' });
-                    captureException(error, {
-                      mechanism: {
-                        handled: false,
-                      },
-                    });
-                  }
-                },
-                () => {
-                  span.end();
+          return withScope(scope => {
+            scope.setTransactionName(`${componentType} Server Component (${componentRoute})`);
 
-                  // flushQueue should not throw
-                  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                  flushQueue();
+            scope.setPropagationContext(propagationContext);
+            return startSpanManual(
+              {
+                op: 'function.nextjs',
+                name: `${componentType} Server Component (${componentRoute})`,
+                forceTransaction: true,
+                attributes: {
+                  [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'component',
+                  [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.function.nextjs',
                 },
-              );
-            },
-          );
+              },
+              span => {
+                return handleCallbackErrors(
+                  () => originalFunction.apply(thisArg, args),
+                  error => {
+                    if (isNotFoundNavigationError(error)) {
+                      // We don't want to report "not-found"s
+                      span.setStatus({ code: SPAN_STATUS_ERROR, message: 'not_found' });
+                    } else if (isRedirectNavigationError(error)) {
+                      // We don't want to report redirects
+                      span.setStatus({ code: SPAN_STATUS_OK });
+                    } else {
+                      span.setStatus({ code: SPAN_STATUS_ERROR, message: 'internal_error' });
+                      captureException(error, {
+                        mechanism: {
+                          handled: false,
+                        },
+                      });
+                    }
+                  },
+                  () => {
+                    span.end();
+
+                    // flushQueue should not throw
+                    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                    flushQueue();
+                  },
+                );
+              },
+            );
+          });
         });
       });
     },

packages/nextjs/src/config/loaders/wrappingLoader.ts

@@ -6,7 +6,7 @@ import * as chalk from 'chalk';
 import type { RollupBuild, RollupError } from 'rollup';
 import { rollup } from 'rollup';
 
-import type { VercelCronsConfig } from '../../common/types';
+import type { ServerComponentContext, VercelCronsConfig } from '../../common/types';
 import type { LoaderThis } from './types';
 
 // Just a simple placeholder to make referencing module consistent
@@ -185,7 +185,7 @@ export default function wrappingLoader(
       .match(/\/?([^/]+)\.(?:js|ts|jsx|tsx)$/);
 
     if (componentTypeMatch && componentTypeMatch[1]) {
-      let componentType;
+      let componentType: ServerComponentContext['componentType'];
       switch (componentTypeMatch[1]) {
         case 'page':
           componentType = 'Page';