feat(nextjs): Improve server component data

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

@@ -0,0 +1,3 @@
+export default function Template({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}

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

@@ -16,6 +16,7 @@ test('Will create a transaction with spans for every server component and metada
 
   expect(spanDescriptions).toContainEqual('Layout Server Component (/(nested-layout)/nested-layout)');
   expect(spanDescriptions).toContainEqual('Layout Server Component (/(nested-layout))');
+  expect(spanDescriptions).toContainEqual('Template Server Component (/(nested-layout))');
   expect(spanDescriptions).toContainEqual('Page Server Component (/(nested-layout)/nested-layout)');
   expect(spanDescriptions).toContainEqual('Page.generateMetadata (/(nested-layout)/nested-layout)');
 });

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

@@ -79,6 +79,10 @@ test('Should set a "not_found" status on a server component span when notFound()
       description: 'Page Server Component (/server-component/not-found)',
       op: 'function.nextjs',
       status: 'not_found',
+      data: expect.objectContaining({
+        'sentry.nextjs.function.type': 'Page',
+        'sentry.nextjs.function.route': '/server-component/not-found',
+      }),
     }),
   );
 });
@@ -107,6 +111,10 @@ test('Should capture an error and transaction for a app router page', async ({ p
       description: 'Page Server Component (/server-component/faulty)',
       op: 'function.nextjs',
       status: 'internal_error',
+      data: expect.objectContaining({
+        'sentry.nextjs.function.type': 'Page',
+        'sentry.nextjs.function.route': '/server-component/faulty',
+      }),
     }),
   );
 

packages/nextjs/src/common/types.ts

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

packages/nextjs/src/common/wrapServerComponentWithSentry.ts

@@ -89,6 +89,8 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
               attributes: {
                 [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'component',
                 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.function.nextjs',
+                'sentry.nextjs.function.type': componentType,
+                'sentry.nextjs.function.route': componentRoute,
               },
             },
             span => {

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

@@ -205,6 +205,12 @@ export default function wrappingLoader(
         case 'loading':
           componentType = 'Loading';
           break;
+        case 'template':
+          componentType = 'Template';
+          break;
+        case 'default':
+          componentType = 'Default';
+          break;
         default:
           componentType = 'Unknown';
       }