test(nextjs): Test for client trace propagation with Turbopack (#14059)

Resolves #13656

Author: lforst

dev-packages/e2e-tests/test-applications/nextjs-turbo/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

dev-packages/e2e-tests/test-applications/nextjs-turbo/pages/[param]/client-trace-propagation.tsx

@@ -0,0 +1,10 @@
+export default function Page() {
+  <p>Hello World!</p>;
+}
+
+// getServerSideProps makes this page dynamic and allows tracing data to be inserted
+export async function getServerSideProps() {
+  return {
+    props: {},
+  };
+}

dev-packages/e2e-tests/test-applications/nextjs-turbo/tests/rsc-error.test.ts renamed to dev-packages/e2e-tests/test-applications/nextjs-turbo/tests/app-router/rsc-error.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+import { extractTraceparentData } from '@sentry/utils';
+
+test('Should propagate traces from server to client in pages router', async ({ page }) => {
+  const serverTransactionPromise = waitForTransaction('nextjs-turbo', async transactionEvent => {
+    return transactionEvent?.transaction === 'GET /[param]/client-trace-propagation';
+  });
+
+  await page.goto(`/123/client-trace-propagation`);
+
+  const sentryTraceLocator = await page.locator('meta[name="sentry-trace"]');
+  const sentryTraceValue = await sentryTraceLocator.getAttribute('content');
+  expect(sentryTraceValue).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}-[0-1]$/);
+
+  const baggageLocator = await page.locator('meta[name="baggage"]');
+  const baggageValue = await baggageLocator.getAttribute('content');
+  expect(baggageValue).toMatch(/sentry-public_key=/);
+
+  const traceparentData = extractTraceparentData(sentryTraceValue!);
+
+  const serverTransaction = await serverTransactionPromise;
+
+  expect(serverTransaction.contexts?.trace?.trace_id).toBe(traceparentData?.traceId);
+});