test(remix): Update remix E2E tests to avoid sending to Sentry (#12750)

Part of #11910

These are the last (non-optional) tests we have that still sent data to
Sentry! After that, E2E tests should be completely independent.

This also blocks
#12743

Author: mydea

dev-packages/e2e-tests/README.md

@@ -90,6 +90,8 @@ test apps enables us to reuse the same test suite over a number of different fra
 
 ### Standardized Frontend Test Apps
 
+TODO: This is not up to date.
+
 A standardized frontend test application has the following features:
 
 - Just for the sake of consistency we prefix the standardized frontend tests with `standard-frontend-`. For example

dev-packages/e2e-tests/test-applications/create-next-app/tests/server-transactions.test.ts

@@ -1,11 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
-const authToken = process.env.E2E_TEST_AUTH_TOKEN;
-const sentryTestOrgSlug = process.env.E2E_TEST_SENTRY_ORG_SLUG;
-const sentryTestProject = process.env.E2E_TEST_SENTRY_PROJECT;
-const EVENT_POLLING_TIMEOUT = 90_000;
-
 test('Sends server-side transactions to Sentry', async ({ baseURL }) => {
   const transactionEventPromise = waitForTransaction('create-next-app', transactionEvent => {
     return (

dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.client.tsx

@@ -21,21 +21,6 @@ Sentry.init({
   tunnel: 'http://localhost:3031/', // proxy server
 });
 
-Sentry.addEventProcessor(event => {
-  if (
-    event.type === 'transaction' &&
-    (event.contexts?.trace?.op === 'pageload' || event.contexts?.trace?.op === 'navigation')
-  ) {
-    const eventId = event.event_id;
-    if (eventId) {
-      window.recordedTransactions = window.recordedTransactions || [];
-      window.recordedTransactions.push(eventId);
-    }
-  }
-
-  return event;
-});
-
 startTransition(() => {
   hydrateRoot(
     document,

dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/_index.tsx

@@ -17,8 +17,7 @@ export default function Index() {
         value="Capture Exception"
         id="exception-button"
         onClick={() => {
-          const eventId = Sentry.captureException(new Error('I am an error!'));
-          window.capturedExceptionId = eventId;
+          throw new Error('I am an error!');
         }}
       />
       <Link to="/user/5" id="navigation">

dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/server.mjs

@@ -48,5 +48,5 @@ app.all(
   }),
 );
 
-const port = process.env.PORT || 3000;
+const port = process.env.PORT || 3030;
 app.listen(port, () => console.log(`Express server listening at http://localhost:${port}`));

dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-client.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 }) => {
+  const errorPromise = waitForError('create-remix-app-express-legacy', errorEvent => {
+    return errorEvent.exception?.values?.[0].value === 'I am an error!';
+  });
+
+  await page.goto('/');
+
+  const exceptionButton = page.locator('id=exception-button');
+  await exceptionButton.click();
+
+  const errorEvent = await errorPromise;
+
+  expect(errorEvent).toBeDefined();
+});
+
+test('Sends a client-side ErrorBoundary exception to Sentry', async ({ page }) => {
+  const errorPromise = waitForError('create-remix-app-express-legacy', errorEvent => {
+    return errorEvent.exception?.values?.[0].value === 'Sentry React Component Error';
+  });
+
+  await page.goto('/client-error');
+
+  const errorEvent = await errorPromise;
+
+  expect(errorEvent).toBeDefined();
+});

dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/client-errors.test.ts

@@ -0,0 +1,57 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Sends a pageload transaction to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'pageload' && transactionEvent.transaction === 'routes/_index';
+  });
+
+  await page.goto('/');
+
+  const transactionEvent = await transactionPromise;
+
+  expect(transactionEvent).toBeDefined();
+});
+
+test('Sends a navigation transaction to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'navigation' && transactionEvent.transaction === 'routes/user.$id';
+  });
+
+  await page.goto('/');
+
+  const linkElement = page.locator('id=navigation');
+  await linkElement.click();
+
+  const transactionEvent = await transactionPromise;
+
+  expect(transactionEvent).toBeDefined();
+});
+
+test('Renders `sentry-trace` and `baggage` meta tags for the root route', async ({ page }) => {
+  await page.goto('/');
+
+  const sentryTraceMetaTag = await page.waitForSelector('meta[name="sentry-trace"]', {
+    state: 'attached',
+  });
+  const baggageMetaTag = await page.waitForSelector('meta[name="baggage"]', {
+    state: 'attached',
+  });
+
+  expect(sentryTraceMetaTag).toBeTruthy();
+  expect(baggageMetaTag).toBeTruthy();
+});
+
+test('Renders `sentry-trace` and `baggage` meta tags for a sub-route', async ({ page }) => {
+  await page.goto('/user/123');
+
+  const sentryTraceMetaTag = await page.waitForSelector('meta[name="sentry-trace"]', {
+    state: 'attached',
+  });
+  const baggageMetaTag = await page.waitForSelector('meta[name="baggage"]', {
+    state: 'attached',
+  });
+
+  expect(sentryTraceMetaTag).toBeTruthy();
+  expect(baggageMetaTag).toBeTruthy();
+});

dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/client-transactions.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('Sends a loader error to Sentry', async ({ page }) => {
+  const loaderErrorPromise = waitForError('create-remix-app-express-legacy', errorEvent => {
+    return errorEvent.exception.values[0].value === 'Loader Error';
+  });
+
+  await page.goto('/loader-error');
+
+  const loaderError = await loaderErrorPromise;
+
+  expect(loaderError).toBeDefined();
+});