fix spans

dev-packages/e2e-tests/test-applications/nextjs-app-dir/app/(nested-layout)/nested-layout/[dynamic]/layout.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+export const dynamic = 'force-dynamic';
+
+export default function Layout({ children }: PropsWithChildren<{}>) {
+  return (
+    <div>
+      <p>DynamicLayout</p>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir/app/(nested-layout)/nested-layout/[dynamic]/page.tsx

@@ -0,0 +1,15 @@
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  return (
+    <div>
+      <p>Dynamic Page</p>
+    </div>
+  );
+}
+
+export async function generateMetadata() {
+  return {
+    title: 'I am dynamic page generated metadata',
+  };
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/connected-servercomponent-trace.test.ts

@@ -14,9 +14,43 @@ test('Will create a transaction with spans for every server component and metada
     return span.description;
   });
 
-  expect(spanDescriptions).toContainEqual('resolve root layout module');
-  expect(spanDescriptions).toContainEqual('resolve layout module "(nested-layout)"');
-  expect(spanDescriptions).toContainEqual('resolve layout module "nested-layout"');
-  expect(spanDescriptions).toContainEqual('resolve page module');
+  expect(spanDescriptions).toContainEqual('resolve page components');
+  expect(spanDescriptions).toContainEqual('render route (app) /nested-layout');
+  expect(spanDescriptions).toContainEqual('build component tree');
+  expect(spanDescriptions).toContainEqual('resolve root layout server component');
+  expect(spanDescriptions).toContainEqual('resolve layout server component "(nested-layout)"');
+  expect(spanDescriptions).toContainEqual('resolve layout server component "nested-layout"');
+  expect(spanDescriptions).toContainEqual('resolve page server component "/nested-layout"');
+  expect(spanDescriptions).toContainEqual('generateMetadata /(nested-layout)/nested-layout/page');
   expect(spanDescriptions).toContainEqual('Page.generateMetadata (/(nested-layout)/nested-layout)');
+  expect(spanDescriptions).toContainEqual('start response');
+  expect(spanDescriptions).toContainEqual('NextNodeServer.clientComponentLoading');
+});
+
+test('Will create a transaction with spans for every server component and metadata generation functions when visiting a dynamic page', async ({
+  page,
+}) => {
+  const serverTransactionEventPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
+    console.log(transactionEvent?.transaction);
+    return transactionEvent?.transaction === 'GET /nested-layout/[dynamic]';
+  });
+
+  await page.goto('/nested-layout/123');
+
+  const spanDescriptions = (await serverTransactionEventPromise).spans?.map(span => {
+    return span.description;
+  });
+
+  expect(spanDescriptions).toContainEqual('resolve page components');
+  expect(spanDescriptions).toContainEqual('render route (app) /nested-layout/[dynamic]');
+  expect(spanDescriptions).toContainEqual('build component tree');
+  expect(spanDescriptions).toContainEqual('resolve root layout server component');
+  expect(spanDescriptions).toContainEqual('resolve layout server component "(nested-layout)"');
+  expect(spanDescriptions).toContainEqual('resolve layout server component "nested-layout"');
+  expect(spanDescriptions).toContainEqual('resolve layout server component "[dynamic]"');
+  expect(spanDescriptions).toContainEqual('resolve page server component "/nested-layout/[dynamic]"');
+  expect(spanDescriptions).toContainEqual('generateMetadata /(nested-layout)/nested-layout/[dynamic]/page');
+  expect(spanDescriptions).toContainEqual('Page.generateMetadata (/(nested-layout)/nested-layout/[dynamic])');
+  expect(spanDescriptions).toContainEqual('start response');
+  expect(spanDescriptions).toContainEqual('NextNodeServer.clientComponentLoading');
 });

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/server-components.test.ts

@@ -70,13 +70,20 @@ test('Should set a "not_found" status on a server component span when notFound()
 
   const transactionEvent = await serverComponentTransactionPromise;
 
-  // Transaction should have status ok, because the http status is ok, but the server component span should be not_found
+  // Transaction should have status ok, because the http status is ok, but the render component span should be not_found
   expect(transactionEvent.contexts?.trace?.status).toBe('ok');
   expect(transactionEvent.spans).toContainEqual(
     expect.objectContaining({
-      description: 'Page Server Component (/server-component/not-found)',
-      op: 'function.nextjs',
+      description: 'render route (app) /server-component/not-found',
       status: 'not_found',
+    }),
+  );
+
+  // Page server component span should have the right name and attributes
+  expect(transactionEvent.spans).toContainEqual(
+    expect.objectContaining({
+      description: 'resolve page server component "/server-component/not-found"',
+      op: 'function.nextjs',
       data: expect.objectContaining({
         'sentry.nextjs.ssr.function.type': 'Page',
         'sentry.nextjs.ssr.function.route': '/server-component/not-found',
@@ -102,13 +109,20 @@ test('Should capture an error and transaction for a app router page', async ({ p
   // Error event should have the right transaction name
   expect(errorEvent.transaction).toBe(`Page Server Component (/server-component/faulty)`);
 
-  // Transaction should have status ok, because the http status is ok, but the server component span should be internal_error
+  // Transaction should have status ok, because the http status is ok, but the render component span should be internal_error
   expect(transactionEvent.contexts?.trace?.status).toBe('ok');
   expect(transactionEvent.spans).toContainEqual(
     expect.objectContaining({
-      description: 'Page Server Component (/server-component/faulty)',
-      op: 'function.nextjs',
+      description: 'render route (app) /server-component/faulty',
       status: 'internal_error',
+    }),
+  );
+
+  // The page server component span should have the right name and attributes
+  expect(transactionEvent.spans).toContainEqual(
+    expect.objectContaining({
+      description: 'resolve page server component "/server-component/faulty"',
+      op: 'function.nextjs',
       data: expect.objectContaining({
         'sentry.nextjs.ssr.function.type': 'Page',
         'sentry.nextjs.ssr.function.route': '/server-component/faulty',

packages/nextjs/src/common/utils/tracingUtils.ts

@@ -1,11 +1,23 @@
-import type { PropagationContext, SpanAttributes } from '@sentry/core';
-import { debug, getActiveSpan, getRootSpan, GLOBAL_OBJ, Scope, spanToJSON, startNewTrace } from '@sentry/core';
+import { ATTR_HTTP_ROUTE } from '@opentelemetry/semantic-conventions';
+import type { PropagationContext, Span, SpanAttributes } from '@sentry/core';
+import {
+  debug,
+  getActiveSpan,
+  getRootSpan,
+  GLOBAL_OBJ,
+  Scope,
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  spanToJSON,
+  startNewTrace,
+} from '@sentry/core';
 import { DEBUG_BUILD } from '../debug-build';
 import { ATTR_NEXT_SEGMENT, ATTR_NEXT_SPAN_NAME, ATTR_NEXT_SPAN_TYPE } from '../nextSpanAttributes';
 import { TRANSACTION_ATTR_SHOULD_DROP_TRANSACTION } from '../span-attributes-with-logic-attached';
 
 const commonPropagationContextMap = new WeakMap<object, PropagationContext>();
 
+const PAGE_SEGMENT = '__PAGE__';
+
 /**
  * Takes a shared (garbage collectable) object between resources, e.g. a headers object shared between Next.js server components and returns a common propagation context.
  *
@@ -126,16 +138,44 @@ export function isResolveSegmentSpan(spanAttributes: SpanAttributes): boolean {
 /**
  * Returns the enhanced name for a resolve segment span.
  * @param segment The segment of the resolve segment span.
+ * @param route The route of the resolve segment span.
  * @returns The enhanced name for the resolve segment span.
  */
-export function getEnhancedResolveSegmentSpanName(segment: string): string {
-  if (segment === '__PAGE__') {
-    return 'resolve page module';
+export function getEnhancedResolveSegmentSpanName({ segment, route }: { segment: string; route: string }): string {
+  if (segment === PAGE_SEGMENT) {
+    return `resolve page server component "${route}"`;
   }
 
   if (segment === '') {
-    return 'resolve root layout module';
+    return 'resolve root layout server component';
+  }
+
+  return `resolve layout server component "${segment}"`;
+}
+
+/**
+ * Maybe enhances the span name for a resolve segment span.
+ * If the span is not a resolve segment span, this function does nothing.
+ * @param activeSpan The active span.
+ * @param spanAttributes The attributes of the span to check.
+ * @param rootSpanAttributes The attributes of the according root span.
+ */
+export function maybeEnhanceServerComponentSpanName(
+  activeSpan: Span,
+  spanAttributes: SpanAttributes,
+  rootSpanAttributes: SpanAttributes,
+): void {
+  if (!isResolveSegmentSpan(spanAttributes)) {
+    return;
   }
 
-  return `resolve layout module "${segment}"`;
+  const segment = spanAttributes[ATTR_NEXT_SEGMENT] as string;
+  const route = rootSpanAttributes[ATTR_HTTP_ROUTE];
+  const enhancedName = getEnhancedResolveSegmentSpanName({ segment, route: typeof route === 'string' ? route : '' });
+  activeSpan.updateName(enhancedName);
+  activeSpan.setAttributes({
+    'sentry.nextjs.ssr.function.type': segment === PAGE_SEGMENT ? 'Page' : 'Layout',
+    'sentry.nextjs.ssr.function.route': route,
+  });
+  activeSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_OP, 'function.nextjs');
 }

packages/nextjs/src/common/wrapServerComponentWithSentry.ts

@@ -1,5 +1,13 @@
 import type { RequestEventData } from '@sentry/core';
-import { captureException, handleCallbackErrors, winterCGHeadersToDict, withIsolationScope } from '@sentry/core';
+import {
+  captureException,
+  getActiveSpan,
+  getIsolationScope,
+  handleCallbackErrors,
+  SPAN_STATUS_ERROR,
+  SPAN_STATUS_OK,
+  winterCGHeadersToDict,
+} from '@sentry/core';
 import { isNotFoundNavigationError, isRedirectNavigationError } from '../common/nextNavigationErrorUtils';
 import type { ServerComponentContext } from '../common/types';
 import { flushSafelyWithTimeout, waitUntil } from '../common/utils/responseEnd';
@@ -28,28 +36,37 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
         } satisfies RequestEventData,
       });
 
-      return withIsolationScope(isolationScope, () => {
-        return handleCallbackErrors(
-          () => originalFunction.apply(thisArg, args),
-          error => {
+      return handleCallbackErrors(
+        () => originalFunction.apply(thisArg, args),
+        error => {
+          const isolationScope = getIsolationScope();
+          const span = getActiveSpan();
+          const { componentRoute, componentType } = context;
+          isolationScope.setTransactionName(`${componentType} Server Component (${componentRoute})`);
+
+          if (span) {
             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 {
-              captureException(error, {
-                mechanism: {
-                  handled: false,
-                  type: 'auto.function.nextjs.server_component',
-                },
-              });
+              span.setStatus({ code: SPAN_STATUS_ERROR, message: 'internal_error' });
             }
-          },
-          () => {
-            waitUntil(flushSafelyWithTimeout());
-          },
-        );
-      });
+          }
+
+          captureException(error, {
+            mechanism: {
+              handled: false,
+              type: 'auto.function.nextjs.server_component',
+            },
+          });
+        },
+        () => {
+          waitUntil(flushSafelyWithTimeout());
+        },
+      );
     },
   });
 }

packages/nextjs/src/server/handleOnSpanStart.ts

@@ -11,15 +11,10 @@ import {
   spanToJSON,
 } from '@sentry/core';
 import { getScopesFromContext } from '@sentry/opentelemetry';
-import {
-  ATTR_NEXT_ROUTE,
-  ATTR_NEXT_SEGMENT,
-  ATTR_NEXT_SPAN_NAME,
-  ATTR_NEXT_SPAN_TYPE,
-} from '../common/nextSpanAttributes';
+import { ATTR_NEXT_ROUTE, ATTR_NEXT_SPAN_NAME, ATTR_NEXT_SPAN_TYPE } from '../common/nextSpanAttributes';
 import { addHeadersAsAttributes } from '../common/utils/addHeadersAsAttributes';
 import { dropMiddlewareTunnelRequests } from '../common/utils/dropMiddlewareTunnelRequests';
-import { getEnhancedResolveSegmentSpanName, isResolveSegmentSpan } from '../common/utils/tracingUtils';
+import { maybeEnhanceServerComponentSpanName } from '../common/utils/tracingUtils';
 
 /**
  * Handles the on span start event for Next.js spans.
@@ -30,14 +25,14 @@ import { getEnhancedResolveSegmentSpanName, isResolveSegmentSpan } from '../comm
 export function handleOnSpanStart(span: Span): void {
   const spanAttributes = spanToJSON(span).data;
   const rootSpan = getRootSpan(span);
+  const rootSpanAttributes = spanToJSON(rootSpan).data;
   const isRootSpan = span === rootSpan;
 
   dropMiddlewareTunnelRequests(span, spanAttributes);
 
   // What we do in this glorious piece of code, is hoist any information about parameterized routes from spans emitted
   // by Next.js via the `next.route` attribute, up to the transaction by setting the http.route attribute.
   if (typeof spanAttributes?.[ATTR_NEXT_ROUTE] === 'string') {
-    const rootSpanAttributes = spanToJSON(rootSpan).data;
     // Only hoist the http.route attribute if the transaction doesn't already have it
     if (
       // eslint-disable-next-line deprecation/deprecation
@@ -88,9 +83,5 @@ export function handleOnSpanStart(span: Span): void {
     setCapturedScopesOnSpan(span, scope, isolationScope);
   }
 
-  // Enhancing server component span names
-  if (isResolveSegmentSpan(spanAttributes)) {
-    // type conversion is safe because we already know the attribute is a string
-    span.updateName(getEnhancedResolveSegmentSpanName(spanAttributes[ATTR_NEXT_SEGMENT] as string));
-  }
+  maybeEnhanceServerComponentSpanName(span, spanAttributes, rootSpanAttributes);
 }