test(nextjs): Add e2e tests for server component spans in next 16 (#18544)

closes #18396

also removed some remaining debug logs in other tests, because why not

Author: chargome

dev-packages/e2e-tests/test-applications/nextjs-15/tests/route-handler.test.ts

@@ -3,7 +3,6 @@ import { waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should create a transaction for node route handlers', async ({ request }) => {
   const routehandlerTransactionPromise = waitForTransaction('nextjs-15', async transactionEvent => {
-    console.log(transactionEvent?.transaction);
     return transactionEvent?.transaction === 'GET /route-handler/[xoxo]/node';
   });
 

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

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

dev-packages/e2e-tests/test-applications/nextjs-16/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-16/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-16/app/(nested-layout)/nested-layout/layout.tsx

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

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

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

dev-packages/e2e-tests/test-applications/nextjs-16/tests/route-handler.test.ts

@@ -3,7 +3,6 @@ import { waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should create a transaction for node route handlers', async ({ request }) => {
   const routehandlerTransactionPromise = waitForTransaction('nextjs-16', async transactionEvent => {
-    console.log(transactionEvent?.transaction);
     return transactionEvent?.transaction === 'GET /route-handler/[xoxo]/node';
   });
 

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

@@ -46,3 +46,53 @@ test('Sends a transaction for a request to app router with URL', async ({ page }
     }),
   ).toHaveLength(0);
 });
+
+test('Will create a transaction with spans for every server component and metadata generation functions when visiting a page', async ({
+  page,
+}) => {
+  const serverTransactionEventPromise = waitForTransaction('nextjs-16', async transactionEvent => {
+    return transactionEvent?.transaction === 'GET /nested-layout';
+  });
+
+  await page.goto('/nested-layout');
+
+  const spanDescriptions = (await serverTransactionEventPromise).spans?.map(span => {
+    return span.description;
+  });
+
+  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('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-16', async transactionEvent => {
+    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('start response');
+  expect(spanDescriptions).toContainEqual('NextNodeServer.clientComponentLoading');
+});

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

@@ -35,7 +35,6 @@ test('Will create a transaction with spans for every server component and metada
   page,
 }) => {
   const serverTransactionEventPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
-    console.log(transactionEvent?.transaction);
     return transactionEvent?.transaction === 'GET /nested-layout/[dynamic]';
   });