test(e2e): Update nextjs-app-dir E2E tests to avoid sending to Sentry (#12403)

Part of #11910

This removes the tests in nextjs-app-dir where we still polled Sentry.

Author: mydea

dev-packages/e2e-tests/test-applications/nextjs-app-dir/start-event-proxy.mjs

@@ -2,5 +2,5 @@ import { startEventProxyServer } from '@sentry-internal/test-utils';
 
 startEventProxyServer({
   port: 3031,
-  proxyServerName: 'nextjs-13-app-dir',
+  proxyServerName: 'nextjs-app-dir',
 });

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/async-context-edge.test.ts

@@ -2,9 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should allow for async context isolation in the edge SDK', async ({ request }) => {
-  // test.skip(process.env.TEST_ENV === 'development', "Doesn't work in dev mode.");
-
-  const edgerouteTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const edgerouteTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return transactionEvent?.transaction === 'GET /api/async-context-edge-endpoint';
   });
 

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/client-app-routing-instrumentation.test.ts

@@ -4,7 +4,7 @@ import { waitForTransaction } from '@sentry-internal/test-utils';
 test('Creates a pageload transaction for app router routes', async ({ page }) => {
   const randomRoute = String(Math.random());
 
-  const clientPageloadTransactionPromise = waitForTransaction('nextjs-13-app-dir', transactionEvent => {
+  const clientPageloadTransactionPromise = waitForTransaction('nextjs-app-dir', transactionEvent => {
     return (
       transactionEvent?.transaction === `/server-component/parameter/${randomRoute}` &&
       transactionEvent.contexts?.trace?.op === 'pageload'
@@ -19,7 +19,7 @@ test('Creates a pageload transaction for app router routes', async ({ page }) =>
 test('Creates a navigation transaction for app router routes', async ({ page }) => {
   const randomRoute = String(Math.random());
 
-  const clientPageloadTransactionPromise = waitForTransaction('nextjs-13-app-dir', transactionEvent => {
+  const clientPageloadTransactionPromise = waitForTransaction('nextjs-app-dir', transactionEvent => {
     return (
       transactionEvent?.transaction === `/server-component/parameter/${randomRoute}` &&
       transactionEvent.contexts?.trace?.op === 'pageload'
@@ -30,14 +30,14 @@ test('Creates a navigation transaction for app router routes', async ({ page })
   await clientPageloadTransactionPromise;
   await page.getByText('Page (/server-component/parameter/[parameter])').isVisible();
 
-  const clientNavigationTransactionPromise = waitForTransaction('nextjs-13-app-dir', transactionEvent => {
+  const clientNavigationTransactionPromise = waitForTransaction('nextjs-app-dir', transactionEvent => {
     return (
       transactionEvent?.transaction === '/server-component/parameter/foo/bar/baz' &&
       transactionEvent.contexts?.trace?.op === 'navigation'
     );
   });
 
-  const serverComponentTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const serverComponentTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'Page Server Component (/server-component/parameter/[...parameters])' &&
       (await clientNavigationTransactionPromise).contexts?.trace?.trace_id ===

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/client-errors.test.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('Sends a client-side exception to Sentry', async ({ page }) => {
+  await page.goto('/');
+
+  const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
+    return errorEvent?.exception?.values?.[0]?.value === 'Click Error';
+  });
+
+  await page.getByText('Throw error').click();
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values).toHaveLength(1);
+  expect(errorEvent.exception?.values?.[0]?.value).toBe('Click Error');
+
+  expect(errorEvent.request).toEqual({
+    headers: expect.any(Object),
+    url: 'http://localhost:3030/',
+  });
+
+  expect(errorEvent.transaction).toEqual('/');
+
+  expect(errorEvent.contexts?.trace).toEqual({
+    trace_id: expect.any(String),
+    span_id: expect.any(String),
+  });
+});

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

@@ -4,7 +4,7 @@ import { waitForTransaction } from '@sentry-internal/test-utils';
 test('Will capture a connected trace for all server components and generation functions when visiting a page', async ({
   page,
 }) => {
-  const someConnectedEvent = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const someConnectedEvent = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'Layout Server Component (/(nested-layout)/nested-layout)' ||
       transactionEvent?.transaction === 'Layout Server Component (/(nested-layout))' ||
@@ -13,28 +13,28 @@ test('Will capture a connected trace for all server components and generation fu
     );
   });
 
-  const layout1Transaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const layout1Transaction = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'Layout Server Component (/(nested-layout)/nested-layout)' &&
       (await someConnectedEvent).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id
     );
   });
 
-  const layout2Transaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const layout2Transaction = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'Layout Server Component (/(nested-layout))' &&
       (await someConnectedEvent).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id
     );
   });
 
-  const pageTransaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const pageTransaction = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'Page Server Component (/(nested-layout)/nested-layout)' &&
       (await someConnectedEvent).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id
     );
   });
 
-  const generateMetadataTransaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const generateMetadataTransaction = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'Page.generateMetadata (/(nested-layout)/nested-layout)' &&
       (await someConnectedEvent).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id

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

@@ -10,7 +10,7 @@ test.describe('dev mode error symbolification', () => {
   test('should have symbolicated dev errors', async ({ page }) => {
     await page.goto('/');
 
-    const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+    const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
       return errorEvent?.exception?.values?.[0]?.value === 'Click Error';
     });
 

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/edge-route.test.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should create a transaction for edge routes', async ({ request }) => {
-  const edgerouteTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const edgerouteTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'GET /api/edge-endpoint' && transactionEvent?.contexts?.trace?.status === 'ok'
     );
@@ -24,7 +24,7 @@ test('Should create a transaction for edge routes', async ({ request }) => {
 });
 
 test('Should create a transaction with error status for faulty edge routes', async ({ request }) => {
-  const edgerouteTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const edgerouteTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'GET /api/error-edge-endpoint' &&
       transactionEvent?.contexts?.trace?.status === 'internal_error'
@@ -47,7 +47,7 @@ test('Should create a transaction with error status for faulty edge routes', asy
 });
 
 test('Should record exceptions for faulty edge routes', async ({ request }) => {
-  const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+  const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Edge Route Error';
   });
 

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

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should record exceptions for faulty edge server components', async ({ page }) => {
-  const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+  const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Edge Server Component Error';
   });
 
@@ -20,7 +20,7 @@ test('Should record exceptions for faulty edge server components', async ({ page
 });
 
 test('Should record transaction for edge server components', async ({ page }) => {
-  const serverComponentTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const serverComponentTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return transactionEvent?.transaction === 'Page Server Component (/edge-server-components)';
   });
 

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

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should create a transaction for middleware', async ({ request }) => {
-  const middlewareTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const middlewareTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return transactionEvent?.transaction === 'middleware' && transactionEvent?.contexts?.trace?.status === 'ok';
   });
 
@@ -21,7 +21,7 @@ test('Should create a transaction for middleware', async ({ request }) => {
 });
 
 test('Should create a transaction with error status for faulty middleware', async ({ request }) => {
-  const middlewareTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const middlewareTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'middleware' && transactionEvent?.contexts?.trace?.status === 'internal_error'
     );
@@ -39,7 +39,7 @@ test('Should create a transaction with error status for faulty middleware', asyn
 });
 
 test('Records exceptions happening in middleware', async ({ request }) => {
-  const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+  const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Middleware Error';
   });
 
@@ -56,7 +56,7 @@ test('Records exceptions happening in middleware', async ({ request }) => {
 });
 
 test('Should trace outgoing fetch requests inside middleware and create breadcrumbs for it', async ({ request }) => {
-  const middlewareTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const middlewareTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'middleware' &&
       !!transactionEvent.spans?.find(span => span.op === 'http.client')

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

@@ -2,11 +2,11 @@ import { expect, test } from '@playwright/test';
 import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Will capture error for SSR rendering error with a connected trace (Class Component)', async ({ page }) => {
-  const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+  const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Pages SSR Error Class';
   });
 
-  const serverComponentTransaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const serverComponentTransaction = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === '/pages-router/ssr-error-class' &&
       (await errorEventPromise).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id
@@ -20,11 +20,11 @@ test('Will capture error for SSR rendering error with a connected trace (Class C
 });
 
 test('Will capture error for SSR rendering error with a connected trace (Functional Component)', async ({ page }) => {
-  const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+  const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Pages SSR Error FC';
   });
 
-  const ssrTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const ssrTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === '/pages-router/ssr-error-fc' &&
       (await errorEventPromise).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/pages-ssr-errors.test.ts

@@ -5,7 +5,7 @@ import { waitForTransaction } from '@sentry-internal/test-utils';
 // Sometimes the request span was included in the handler span, more often it wasn't. I have no idea why. Maybe one day we will
 // figure it out. Today is not that day.
 test.skip('Should send a transaction with a http span', async ({ request }) => {
-  const transactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const transactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return transactionEvent?.transaction === 'GET /api/request-instrumentation';
   });
 

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/request-instrumentation.test.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should create a transaction for route handlers', async ({ request }) => {
-  const routehandlerTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const routehandlerTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return transactionEvent?.transaction === 'GET /route-handlers/[param]';
   });
 
@@ -19,7 +19,7 @@ test('Should create a transaction for route handlers', async ({ request }) => {
 test('Should create a transaction for route handlers and correctly set span status depending on http status', async ({
   request,
 }) => {
-  const routehandlerTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const routehandlerTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return transactionEvent?.transaction === 'POST /route-handlers/[param]';
   });
 
@@ -33,11 +33,11 @@ test('Should create a transaction for route handlers and correctly set span stat
 });
 
 test('Should record exceptions and transactions for faulty route handlers', async ({ request }) => {
-  const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+  const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'route-handler-error';
   });
 
-  const routehandlerTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+  const routehandlerTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return transactionEvent?.transaction === 'PUT /route-handlers/[param]/error';
   });
 
@@ -65,7 +65,7 @@ test('Should record exceptions and transactions for faulty route handlers', asyn
 
 test.describe('Edge runtime', () => {
   test('should create a transaction for route handlers', async ({ request }) => {
-    const routehandlerTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+    const routehandlerTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
       return transactionEvent?.transaction === 'PATCH /route-handlers/[param]/edge';
     });
 
@@ -79,11 +79,11 @@ test.describe('Edge runtime', () => {
   });
 
   test('should record exceptions and transactions for faulty route handlers', async ({ request }) => {
-    const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+    const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
       return errorEvent?.exception?.values?.[0]?.value === 'route-handler-edge-error';
     });
 
-    const routehandlerTransactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+    const routehandlerTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
       return transactionEvent?.transaction === 'DELETE /route-handlers/[param]/edge';
     });