From 39d7148adbd94de17aa74f89751b9d2838f8bb99 Mon Sep 17 00:00:00 2001
From: Onur Temizkan <onur@narval.co.uk>
Date: Mon, 10 Jun 2024 16:03:28 +0100
Subject: [PATCH] Add Remix/Express legacy e2e tests.

---
 .github/workflows/build.yml                   |   1 +
 .../.eslintrc.cjs                             |  79 +++++++
 .../.gitignore                                |   6 +
 .../create-remix-app-express-legacy/.npmrc    |   2 +
 .../app/entry.client.tsx                      |  46 +++++
 .../app/entry.server.tsx                      | 141 +++++++++++++
 .../app/root.tsx                              |  80 ++++++++
 .../app/routes/_index.tsx                     |  29 +++
 .../app/routes/action-formdata.tsx            |  17 ++
 .../app/routes/client-error.tsx               |  24 +++
 .../app/routes/loader-error.tsx               |  16 ++
 .../app/routes/navigate.tsx                   |  20 ++
 .../app/routes/user.$id.tsx                   |   3 +
 .../create-remix-app-express-legacy/env.d.ts  |   2 +
 .../globals.d.ts                              |   7 +
 .../instrument.cjs                            |  14 ++
 .../package.json                              |  57 ++++++
 .../playwright.config.mjs                     |   7 +
 .../server.mjs                                |  52 +++++
 .../start-event-proxy.mjs                     |   6 +
 .../tests/behaviour-client.test.ts            | 192 ++++++++++++++++++
 .../tests/behaviour-server.test.ts            | 146 +++++++++++++
 .../tsconfig.json                             |  22 ++
 .../vite.config.ts                            |  18 ++
 .../app/routes/action-formdata.tsx            |   6 +-
 .../create-remix-app-express/server.mjs       |   2 +-
 26 files changed, 989 insertions(+), 6 deletions(-)
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.eslintrc.cjs
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.gitignore
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.npmrc
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.client.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.server.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/root.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/_index.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/action-formdata.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/client-error.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/loader-error.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/navigate.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/user.$id.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/env.d.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/globals.d.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/instrument.cjs
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/package.json
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/playwright.config.mjs
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/server.mjs
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/start-event-proxy.mjs
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-client.test.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-server.test.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tsconfig.json
 create mode 100644 dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/vite.config.ts

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index c25417cb5266..62967b801cc0 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1001,6 +1001,7 @@ jobs:
             'create-remix-app-v2',
             'create-remix-app-v2-legacy',
             'create-remix-app-express',
+            'create-remix-app-express-legacy',
             'create-remix-app-express-vite-dev',
             'node-express-esm-loader',
             'node-express-esm-preload',
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.eslintrc.cjs b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.eslintrc.cjs
new file mode 100644
index 000000000000..7adbd6f482f6
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.eslintrc.cjs
@@ -0,0 +1,79 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ['eslint:recommended'],
+
+  overrides: [
+    // React
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react', 'jsx-a11y'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+      ],
+      settings: {
+        react: {
+          version: 'detect',
+        },
+        formComponents: ['Form'],
+        linkComponents: [
+          { name: 'Link', linkAttribute: 'to' },
+          { name: 'NavLink', linkAttribute: 'to' },
+        ],
+        'import/resolver': {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
+          node: {
+            extensions: ['.ts', '.tsx'],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: ['plugin:@typescript-eslint/recommended', 'plugin:import/recommended', 'plugin:import/typescript'],
+    },
+
+    // Node
+    {
+      files: ['.eslintrc.cjs', 'server.js'],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.gitignore b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.gitignore
new file mode 100644
index 000000000000..3f7bf98da3e1
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.npmrc b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.npmrc
new file mode 100644
index 000000000000..070f80f05092
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/.npmrc
@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.client.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.client.tsx
new file mode 100644
index 000000000000..5ee250101be9
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.client.tsx
@@ -0,0 +1,46 @@
+import { RemixBrowser, useLocation, useMatches } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+import { StrictMode, startTransition, useEffect } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: window.ENV.SENTRY_DSN,
+  integrations: [
+    Sentry.browserTracingIntegration({
+      useEffect,
+      useLocation,
+      useMatches,
+    }),
+    Sentry.replayIntegration(),
+  ],
+  // Performance Monitoring
+  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  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,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.server.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.server.tsx
new file mode 100644
index 000000000000..4e1e9e0ba537
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/entry.server.tsx
@@ -0,0 +1,141 @@
+import * as Sentry from '@sentry/remix';
+
+import { PassThrough } from 'node:stream';
+import * as isbotModule from 'isbot';
+
+import type { AppLoadContext, EntryContext } from '@remix-run/node';
+import { createReadableStreamFromReadable } from '@remix-run/node';
+import { installGlobals } from '@remix-run/node';
+import { RemixServer } from '@remix-run/react';
+import { renderToPipeableStream } from 'react-dom/server';
+
+installGlobals();
+
+const ABORT_DELAY = 5_000;
+
+export const handleError = Sentry.wrapRemixHandleError;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  loadContext: AppLoadContext,
+) {
+  return isBotRequest(request.headers.get('user-agent'))
+    ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
+    : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
+}
+
+// We have some Remix apps in the wild already running with isbot@3 so we need
+// to maintain backwards compatibility even though we want new apps to use
+// isbot@4.  That way, we can ship this as a minor Semver update to @remix-run/dev.
+function isBotRequest(userAgent: string | null) {
+  if (!userAgent) {
+    return false;
+  }
+
+  // isbot >= 3.8.0, >4
+  if ('isbot' in isbotModule && typeof isbotModule.isbot === 'function') {
+    return isbotModule.isbot(userAgent);
+  }
+
+  // isbot < 3.8.0
+  if ('default' in isbotModule && typeof isbotModule.default === 'function') {
+    return isbotModule.default(userAgent);
+  }
+
+  return false;
+}
+
+function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
+      {
+        onAllReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set('Content-Type', 'text/html');
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
+      {
+        onShellReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set('Content-Type', 'text/html');
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/root.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/root.tsx
new file mode 100644
index 000000000000..517a37a9d76b
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/root.tsx
@@ -0,0 +1,80 @@
+import { cssBundleHref } from '@remix-run/css-bundle';
+import { LinksFunction, MetaFunction, json } from '@remix-run/node';
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+  useRouteError,
+} from '@remix-run/react';
+import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix';
+import type { SentryMetaArgs } from '@sentry/remix';
+
+export const links: LinksFunction = () => [...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : [])];
+
+export const loader = () => {
+  return json({
+    ENV: {
+      SENTRY_DSN: process.env.E2E_TEST_DSN,
+    },
+  });
+};
+
+export const meta = ({ data }: SentryMetaArgs<MetaFunction<typeof loader>>) => {
+  return [
+    {
+      env: data.ENV,
+    },
+    {
+      name: 'sentry-trace',
+      content: data.sentryTrace,
+    },
+    {
+      name: 'baggage',
+      content: data.sentryBaggage,
+    },
+  ];
+};
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  const eventId = captureRemixErrorBoundaryError(error);
+
+  return (
+    <div>
+      <span>ErrorBoundary Error</span>
+      <span id="event-id">{eventId}</span>
+    </div>
+  );
+}
+
+function App() {
+  const { ENV } = useLoaderData();
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.ENV = ${JSON.stringify(ENV)}`,
+          }}
+        />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+export default withSentry(App);
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/_index.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/_index.tsx
new file mode 100644
index 000000000000..8c787ebd7c2f
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/_index.tsx
@@ -0,0 +1,29 @@
+import { Link, useSearchParams } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+
+export default function Index() {
+  const [searchParams] = useSearchParams();
+
+  if (searchParams.get('tag')) {
+    Sentry.setTags({
+      sentry_test: searchParams.get('tag'),
+    });
+  }
+
+  return (
+    <div>
+      <input
+        type="button"
+        value="Capture Exception"
+        id="exception-button"
+        onClick={() => {
+          const eventId = Sentry.captureException(new Error('I am an error!'));
+          window.capturedExceptionId = eventId;
+        }}
+      />
+      <Link to="/user/5" id="navigation">
+        navigate
+      </Link>
+    </div>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/action-formdata.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/action-formdata.tsx
new file mode 100644
index 000000000000..884beb2f51e9
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/action-formdata.tsx
@@ -0,0 +1,17 @@
+import { json } from '@remix-run/node';
+import { Form } from '@remix-run/react';
+
+export async function action() {
+  return json({ message: 'success' });
+}
+
+export default function ActionFormData() {
+  return (
+    <Form method="post" action="/action-formdata" navigate={false}>
+      <input type="text" name="text" />
+      <input type="file" name="file" />
+
+      <button type="submit">submit</button>
+    </Form>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/client-error.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/client-error.tsx
new file mode 100644
index 000000000000..f4d6ec9c4f0a
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/client-error.tsx
@@ -0,0 +1,24 @@
+import { useSearchParams } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+
+import { useState } from 'react';
+
+export default function ErrorBoundaryCapture() {
+  const [searchParams] = useSearchParams();
+
+  if (searchParams.get('tag')) {
+    Sentry.setTags({
+      sentry_test: searchParams.get('tag'),
+    });
+  }
+
+  const [count, setCount] = useState(0);
+
+  if (count > 0) {
+    throw new Error('Sentry React Component Error');
+  } else {
+    setTimeout(() => setCount(count + 1), 0);
+  }
+
+  return <div>{count}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/loader-error.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/loader-error.tsx
new file mode 100644
index 000000000000..75d454571fa5
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/loader-error.tsx
@@ -0,0 +1,16 @@
+import { LoaderFunction } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+
+export default function LoaderError() {
+  useLoaderData();
+
+  return (
+    <div>
+      <h1>Loader Error</h1>
+    </div>
+  );
+}
+
+export const loader: LoaderFunction = () => {
+  throw new Error('Loader Error');
+};
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/navigate.tsx
new file mode 100644
index 000000000000..c7dcea798501
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/navigate.tsx
@@ -0,0 +1,20 @@
+import { LoaderFunction } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+
+export const loader: LoaderFunction = async ({ params: { id } }) => {
+  if (id === '-1') {
+    throw new Error('Unexpected Server Error');
+  }
+
+  return null;
+};
+
+export default function LoaderError() {
+  const data = useLoaderData();
+
+  return (
+    <div>
+      <h1>{data && data.test ? data.test : 'Not Found'}</h1>
+    </div>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/user.$id.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/user.$id.tsx
new file mode 100644
index 000000000000..13b2e0a34d1e
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/app/routes/user.$id.tsx
@@ -0,0 +1,3 @@
+export default function User() {
+  return <div>I am a blank page</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/env.d.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/env.d.ts
new file mode 100644
index 000000000000..78ed2345c6e4
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/globals.d.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/globals.d.ts
new file mode 100644
index 000000000000..4130ac6a8a09
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/globals.d.ts
@@ -0,0 +1,7 @@
+interface Window {
+  recordedTransactions?: string[];
+  capturedExceptionId?: string;
+  ENV: {
+    SENTRY_DSN: string;
+  };
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/instrument.cjs b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/instrument.cjs
new file mode 100644
index 000000000000..feea6fb5388e
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/instrument.cjs
@@ -0,0 +1,14 @@
+const Sentry = require('@sentry/remix');
+const process = require('process');
+
+Sentry.init({
+  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: process.env.E2E_TEST_DSN,
+  tunnel: 'http://localhost:3031/', // proxy server
+  sendDefaultPii: true, // Testing the FormData
+  captureActionFormDataKeys: {
+    file: true,
+    text: true,
+  },
+});
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/package.json b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/package.json
new file mode 100644
index 000000000000..53ccbdff9e7f
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/package.json
@@ -0,0 +1,57 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "remix vite:build",
+    "dev": "node ./server.mjs",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "start": "cross-env NODE_ENV=production node ./server.mjs",
+    "typecheck": "tsc",
+    "clean": "npx rimraf node_modules pnpm-lock.yaml",
+    "test:build": "pnpm install && npx playwright install && pnpm build",
+    "test:assert": "pnpm playwright test"
+  },
+  "dependencies": {
+    "@remix-run/css-bundle": "^2.7.2",
+    "@remix-run/express": "^2.7.2",
+    "@remix-run/node": "^2.7.2",
+    "@remix-run/react": "^2.7.2",
+    "@sentry/remix": "latest || *",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "express": "^4.18.2",
+    "isbot": "^4.1.0",
+    "morgan": "^1.10.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "source-map-support": "^0.5.21"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.44.1",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "@remix-run/dev": "^2.7.2",
+    "@sentry/types": "latest || *",
+    "@sentry/utils": "latest || *",
+    "@types/compression": "^1.7.2",
+    "@types/express": "^4.17.17",
+    "@types/morgan": "^1.9.4",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/source-map-support": "^0.5.6",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "chokidar": "^3.5.3",
+    "eslint": "^8.38.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "tsx": "4.7.2",
+    "typescript": "^5.1.6",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/playwright.config.mjs
new file mode 100644
index 000000000000..31f2b913b58b
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/playwright.config.mjs
@@ -0,0 +1,7 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  startCommand: `pnpm start`,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/server.mjs b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/server.mjs
new file mode 100644
index 000000000000..eb6078bf0321
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/server.mjs
@@ -0,0 +1,52 @@
+import './instrument.cjs';
+
+import { createRequestHandler } from '@remix-run/express';
+import { installGlobals } from '@remix-run/node';
+import compression from 'compression';
+import express from 'express';
+import morgan from 'morgan';
+
+installGlobals();
+
+const viteDevServer =
+  process.env.NODE_ENV === 'production'
+    ? undefined
+    : await import('vite').then(vite =>
+        vite.createServer({
+          server: { middlewareMode: true },
+        }),
+      );
+
+const app = express();
+
+app.use(compression());
+
+// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
+app.disable('x-powered-by');
+
+// handle asset requests
+if (viteDevServer) {
+  app.use(viteDevServer.middlewares);
+} else {
+  // Vite fingerprints its assets so we can cache forever.
+  app.use('/assets', express.static('build/client/assets', { immutable: true, maxAge: '1y' }));
+}
+
+// Everything else (like favicon.ico) is cached for an hour. You may want to be
+// more aggressive with this caching.
+app.use(express.static('build/client', { maxAge: '1h' }));
+
+app.use(morgan('tiny'));
+
+// handle SSR requests
+app.all(
+  '*',
+  createRequestHandler({
+    build: viteDevServer
+      ? () => viteDevServer.ssrLoadModule('virtual:remix/server-build')
+      : await import('./build/server/index.js'),
+  }),
+);
+
+const port = process.env.PORT || 3000;
+app.listen(port, () => console.log(`Express server listening at http://localhost:${port}`));
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/start-event-proxy.mjs
new file mode 100644
index 000000000000..ccbe23f1804d
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'create-remix-app-express-legacy',
+});
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-client.test.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-client.test.ts
new file mode 100644
index 000000000000..aecc2fa8c983
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-client.test.ts
@@ -0,0 +1,192 @@
+import { expect, test } from '@playwright/test';
+
+const EVENT_POLLING_TIMEOUT = 90_000;
+
+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;
+
+test('Sends a client-side exception to Sentry', async ({ page }) => {
+  await page.goto('/');
+
+  const exceptionButton = page.locator('id=exception-button');
+  await exceptionButton.click();
+
+  const exceptionIdHandle = await page.waitForFunction(() => window.capturedExceptionId);
+  const exceptionEventId = await exceptionIdHandle.jsonValue();
+
+  console.log(`Polling for error eventId: ${exceptionEventId}`);
+
+  await expect
+    .poll(
+      async () => {
+        const response = await fetch(
+          `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/events/${exceptionEventId}/`,
+          { headers: { Authorization: `Bearer ${authToken}` } },
+        );
+        return response.status;
+      },
+      {
+        timeout: EVENT_POLLING_TIMEOUT,
+      },
+    )
+    .toBe(200);
+});
+
+test('Sends a pageload transaction to Sentry', async ({ page }) => {
+  await page.goto('/');
+
+  const recordedTransactionsHandle = await page.waitForFunction(() => {
+    if (window.recordedTransactions && window.recordedTransactions?.length >= 1) {
+      return window.recordedTransactions;
+    } else {
+      return undefined;
+    }
+  });
+  const recordedTransactionEventIds = await recordedTransactionsHandle.jsonValue();
+
+  if (recordedTransactionEventIds === undefined) {
+    throw new Error("Application didn't record any transaction event IDs.");
+  }
+
+  let hadPageLoadTransaction = false;
+
+  console.log(`Polling for transaction eventIds: ${JSON.stringify(recordedTransactionEventIds)}`);
+
+  await Promise.all(
+    recordedTransactionEventIds.map(async transactionEventId => {
+      await expect
+        .poll(
+          async () => {
+            const response = await fetch(
+              `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/events/${transactionEventId}/`,
+              { headers: { Authorization: `Bearer ${authToken}` } },
+            );
+
+            if (response.ok) {
+              const data = await response.json();
+              if (data.contexts.trace.op === 'pageload') {
+                hadPageLoadTransaction = true;
+              }
+            }
+
+            return response.status;
+          },
+          {
+            timeout: EVENT_POLLING_TIMEOUT,
+          },
+        )
+        .toBe(200);
+    }),
+  );
+
+  expect(hadPageLoadTransaction).toBe(true);
+});
+
+test('Sends a navigation transaction to Sentry', async ({ page }) => {
+  await page.goto('/');
+
+  // Give pageload transaction time to finish
+  await page.waitForTimeout(4000);
+
+  const linkElement = page.locator('id=navigation');
+  await linkElement.click();
+
+  const recordedTransactionsHandle = await page.waitForFunction(() => {
+    if (window.recordedTransactions && window.recordedTransactions?.length >= 2) {
+      return window.recordedTransactions;
+    } else {
+      return undefined;
+    }
+  });
+  const recordedTransactionEventIds = await recordedTransactionsHandle.jsonValue();
+
+  if (recordedTransactionEventIds === undefined) {
+    throw new Error("Application didn't record any transaction event IDs.");
+  }
+
+  let hadPageNavigationTransaction = false;
+
+  console.log(`Polling for transaction eventIds: ${JSON.stringify(recordedTransactionEventIds)}`);
+
+  await Promise.all(
+    recordedTransactionEventIds.map(async transactionEventId => {
+      await expect
+        .poll(
+          async () => {
+            const response = await fetch(
+              `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/events/${transactionEventId}/`,
+              { headers: { Authorization: `Bearer ${authToken}` } },
+            );
+
+            if (response.ok) {
+              const data = await response.json();
+              if (data.contexts.trace.op === 'navigation') {
+                hadPageNavigationTransaction = true;
+              }
+            }
+
+            return response.status;
+          },
+          {
+            timeout: EVENT_POLLING_TIMEOUT,
+          },
+        )
+        .toBe(200);
+    }),
+  );
+
+  expect(hadPageNavigationTransaction).toBe(true);
+});
+
+test('Sends a client-side ErrorBoundary exception to Sentry', async ({ page }) => {
+  await page.goto('/client-error');
+
+  const exceptionIdHandle = await page.waitForSelector('#event-id');
+  const exceptionEventId = await exceptionIdHandle.textContent();
+
+  console.log(`Polling for error eventId: ${exceptionEventId}`);
+
+  await expect
+    .poll(
+      async () => {
+        const response = await fetch(
+          `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/events/${exceptionEventId}/`,
+          { headers: { Authorization: `Bearer ${authToken}` } },
+        );
+        return response.status;
+      },
+      {
+        timeout: EVENT_POLLING_TIMEOUT,
+      },
+    )
+    .toBe(200);
+});
+
+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();
+});
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-server.test.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-server.test.ts
new file mode 100644
index 000000000000..cd760d9cc7bc
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/behaviour-server.test.ts
@@ -0,0 +1,146 @@
+import { expect, test } from '@playwright/test';
+import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { uuid4 } from '@sentry/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();
+});
+
+test('Sends form data with action error to Sentry', async ({ page }) => {
+  await page.goto('/action-formdata');
+
+  await page.fill('input[name=text]', 'test');
+  await page.setInputFiles('input[type=file]', {
+    name: 'file.txt',
+    mimeType: 'text/plain',
+    buffer: Buffer.from('this is test'),
+  });
+
+  await page.locator('button[type=submit]').click();
+
+  const formdataActionTransaction = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return transactionEvent?.spans?.some(span => span.op === 'function.remix.action');
+  });
+
+  const actionSpan = (await formdataActionTransaction).spans.find(span => span.op === 'function.remix.action');
+
+  expect(actionSpan).toBeDefined();
+  expect(actionSpan.op).toBe('function.remix.action');
+  expect(actionSpan.data).toMatchObject({
+    'remix.action_form_data.text': 'test',
+    'remix.action_form_data.file': 'file.txt',
+  });
+});
+
+test('Sends a loader span to Sentry', async ({ page }) => {
+  const loaderTransactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return transactionEvent?.spans?.some(span => span.op === 'function.remix.loader');
+  });
+
+  await page.goto('/');
+
+  const loaderSpan = (await loaderTransactionPromise).spans.find(span => span.op === 'function.remix.loader');
+
+  expect(loaderSpan).toBeDefined();
+  expect(loaderSpan.op).toBe('function.remix.loader');
+});
+
+test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => {
+  // We use this to identify the transactions
+  const testTag = uuid4();
+
+  const httpServerTransactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return (
+      transactionEvent.type === 'transaction' &&
+      transactionEvent.contexts?.trace?.op === 'http.server' &&
+      transactionEvent.tags?.['sentry_test'] === testTag
+    );
+  });
+
+  const pageLoadTransactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return (
+      transactionEvent.type === 'transaction' &&
+      transactionEvent.contexts?.trace?.op === 'pageload' &&
+      transactionEvent.tags?.['sentry_test'] === testTag
+    );
+  });
+
+  page.goto(`/client-error?tag=${testTag}`);
+
+  const pageloadTransaction = await pageLoadTransactionPromise;
+  const httpServerTransaction = await httpServerTransactionPromise;
+
+  expect(pageloadTransaction).toBeDefined();
+  expect(httpServerTransaction).toBeDefined();
+
+  const httpServerTraceId = httpServerTransaction.contexts?.trace?.trace_id;
+  const httpServerSpanId = httpServerTransaction.contexts?.trace?.span_id;
+
+  const pageLoadTraceId = pageloadTransaction.contexts?.trace?.trace_id;
+  const pageLoadSpanId = pageloadTransaction.contexts?.trace?.span_id;
+  const pageLoadParentSpanId = pageloadTransaction.contexts?.trace?.parent_span_id;
+
+  expect(httpServerTransaction.transaction).toBe('routes/client-error');
+  expect(pageloadTransaction.transaction).toBe('routes/client-error');
+
+  expect(httpServerTraceId).toBeDefined();
+  expect(httpServerSpanId).toBeDefined();
+
+  expect(pageLoadTraceId).toEqual(httpServerTraceId);
+  expect(pageLoadParentSpanId).toEqual(httpServerSpanId);
+  expect(pageLoadSpanId).not.toEqual(httpServerSpanId);
+});
+
+test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
+  // We use this to identify the transactions
+  const testTag = uuid4();
+
+  const httpServerTransactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return (
+      transactionEvent.type === 'transaction' &&
+      transactionEvent.contexts?.trace?.op === 'http.server' &&
+      transactionEvent.tags?.['sentry_test'] === testTag
+    );
+  });
+
+  const pageLoadTransactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return (
+      transactionEvent.type === 'transaction' &&
+      transactionEvent.contexts?.trace?.op === 'pageload' &&
+      transactionEvent.tags?.['sentry_test'] === testTag
+    );
+  });
+
+  page.goto(`/?tag=${testTag}`);
+
+  const pageloadTransaction = await pageLoadTransactionPromise;
+  const httpServerTransaction = await httpServerTransactionPromise;
+
+  expect(pageloadTransaction).toBeDefined();
+  expect(httpServerTransaction).toBeDefined();
+
+  const httpServerTraceId = httpServerTransaction.contexts?.trace?.trace_id;
+  const httpServerSpanId = httpServerTransaction.contexts?.trace?.span_id;
+
+  const pageLoadTraceId = pageloadTransaction.contexts?.trace?.trace_id;
+  const pageLoadSpanId = pageloadTransaction.contexts?.trace?.span_id;
+  const pageLoadParentSpanId = pageloadTransaction.contexts?.trace?.parent_span_id;
+
+  expect(httpServerTransaction.transaction).toBe('routes/_index');
+  expect(pageloadTransaction.transaction).toBe('routes/_index');
+
+  expect(httpServerTraceId).toBeDefined();
+  expect(httpServerSpanId).toBeDefined();
+
+  expect(pageLoadTraceId).toEqual(httpServerTraceId);
+  expect(pageLoadParentSpanId).toEqual(httpServerSpanId);
+  expect(pageLoadSpanId).not.toEqual(httpServerSpanId);
+});
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tsconfig.json b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tsconfig.json
new file mode 100644
index 000000000000..b58e7d722f35
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true,
+  },
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/vite.config.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/vite.config.ts
new file mode 100644
index 000000000000..13de9243b22a
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/vite.config.ts
@@ -0,0 +1,18 @@
+import { vitePlugin as remix } from '@remix-run/dev';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+import { installGlobals } from '@remix-run/node';
+
+installGlobals();
+
+export default defineConfig({
+  plugins: [
+    remix(),
+    tsconfigPaths({
+      // The dev server config errors are not relevant to this test app
+      // https://github.com/aleclarson/vite-tsconfig-paths?tab=readme-ov-file#options
+      ignoreConfigErrors: true,
+    }),
+  ],
+});
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/action-formdata.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/action-formdata.tsx
index 6bb5b40977a0..884beb2f51e9 100644
--- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/action-formdata.tsx
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/action-formdata.tsx
@@ -1,11 +1,7 @@
 import { json } from '@remix-run/node';
 import { Form } from '@remix-run/react';
 
-export async function action({ request }) {
-  const formData = await request.formData();
-
-  console.log('form data', formData.get('text'), formData.get('file'));
-
+export async function action() {
   return json({ message: 'success' });
 }
 
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/server.mjs b/dev-packages/e2e-tests/test-applications/create-remix-app-express/server.mjs
index eb6078bf0321..022ee4b1570c 100644
--- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/server.mjs
+++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/server.mjs
@@ -44,7 +44,7 @@ app.all(
   createRequestHandler({
     build: viteDevServer
       ? () => viteDevServer.ssrLoadModule('virtual:remix/server-build')
-      : await import('./build/server/index.js'),
+      : await import('./§build/server/index.js'),
   }),
 );