test(remix): Add Remix 3 e2e test application (#24698)

Adds a Remix 3 app to the e2e matrix, stacked on #24697.

There is no instrumentation yet, so the two smoke tests assert only that
the plumbing holds: the app boots under `--import
@sentry/remix/v3/node`, and `Sentry.init()` from the `@sentry/remix/v3`
subpath sends a server span. Span names are still URL based.

The app exists at this point in the stack so later pull requests add
instrumentation and its tests together, instead of also introducing a
new CI surface. Each of those restores its own test file.

The browser entry calls no Sentry API, because `./v3/client` withholds
`init` until the browser SDK lands.

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: chargome

dev-packages/e2e-tests/test-applications/remix-v3/app/actions/controller.tsx

@@ -0,0 +1,34 @@
+import { createController } from 'remix/router';
+import type { Handle } from 'remix/ui';
+
+import { assets, entryHref, entryPreloads } from '../assets.ts';
+import { routes } from '../routes.ts';
+
+function HomePage(handle: Handle<Record<string, never>>) {
+  return () => (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <title>Sentry Remix 3</title>
+        {entryPreloads.map(href => (
+          <link key={href} rel="modulepreload" href={href} />
+        ))}
+        <script type="module" src={entryHref}></script>
+      </head>
+      <body>
+        <h1 id="home">Sentry Remix 3</h1>
+      </body>
+    </html>
+  );
+}
+
+export default createController(routes, {
+  actions: {
+    async assets(context) {
+      return (await assets.fetch(context.request)) ?? new Response('Not Found', { status: 404 });
+    },
+    home(context) {
+      return context.render(<HomePage />);
+    },
+  },
+});

dev-packages/e2e-tests/test-applications/remix-v3/app/actions/public/entry.ts

@@ -0,0 +1,9 @@
+import { run } from 'remix/ui';
+
+// No Sentry here yet: `@sentry/remix/v3/client` does not export `init` until the browser SDK lands.
+export const app = run({
+  async loadModule(moduleUrl, exportName) {
+    let mod = await import(moduleUrl);
+    return mod[exportName];
+  },
+});

dev-packages/e2e-tests/test-applications/remix-v3/app/assets.ts

@@ -0,0 +1,15 @@
+import { createAssetServer } from 'remix/assets';
+
+export const assets = createAssetServer({
+  basePath: '/assets',
+  rootDir: process.cwd(),
+  allowFiles: ['app/routes.ts', 'app/**/public/**'],
+  allowPackages: ['remix', '@sentry/remix'],
+  minify: true,
+  watch: false,
+});
+
+const entry = 'app/actions/public/entry.ts';
+
+export const entryHref = await assets.getHref(entry);
+export const entryPreloads = await assets.getPreloads(entry);

dev-packages/e2e-tests/test-applications/remix-v3/app/router.ts

@@ -0,0 +1,21 @@
+import { createRouter, type MiddlewareContext } from 'remix/router';
+import { render } from 'remix/middleware/render';
+
+import controller from './actions/controller.tsx';
+import { assets } from './assets.ts';
+import { routes } from './routes.ts';
+
+const renderMiddleware = render({ assets });
+type AppContext = MiddlewareContext<[typeof renderMiddleware]>;
+
+declare module 'remix/router' {
+  interface RouterTypes {
+    context: AppContext;
+  }
+}
+
+export const router = createRouter<AppContext>({
+  middleware: [renderMiddleware],
+});
+
+router.map(routes, controller);

dev-packages/e2e-tests/test-applications/remix-v3/app/routes.ts

@@ -0,0 +1,6 @@
+import { get, route } from 'remix/routes';
+
+export const routes = route({
+  assets: get('/assets/*path'),
+  home: '/',
+});

dev-packages/e2e-tests/test-applications/remix-v3/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "remix-v3-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "NODE_ENV=production node --import @sentry/remix/v3/node server.ts",
+    "test": "playwright test",
+    "clean": "npx rimraf node_modules pnpm-lock.yaml",
+    "test:build": "pnpm install",
+    "test:assert": "pnpm test"
+  },
+  "dependencies": {
+    "@sentry/remix": "file:../../packed/sentry-remix-packed.tgz",
+    "remix": "3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "~1.56.0",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "@sentry/core": "file:../../packed/sentry-core-packed.tgz",
+    "@types/node": "^24.6.0",
+    "typescript": "~5.9.0"
+  },
+  "volta": {
+    "node": "24.18.0",
+    "pnpm": "9.15.9"
+  }
+}

dev-packages/e2e-tests/test-applications/remix-v3/playwright.config.mjs

@@ -0,0 +1,9 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  startCommand: `pnpm start`,
+  port: 3060,
+  eventProxyPort: 3061,
+});
+
+export default config;

dev-packages/e2e-tests/test-applications/remix-v3/server.ts

@@ -0,0 +1,27 @@
+import * as Sentry from '@sentry/remix/v3';
+import * as http from 'node:http';
+import { createRequestListener } from 'remix/node-fetch-server';
+
+import { router } from './app/router.ts';
+
+Sentry.init({
+  dsn: process.env.E2E_TEST_DSN,
+  tunnel: 'http://localhost:3061/',
+  tracesSampleRate: 1.0,
+});
+
+const port = process.env.PORT ? Number.parseInt(process.env.PORT, 10) : 3060;
+
+const server = http.createServer(
+  createRequestListener(async request => {
+    try {
+      return await router.fetch(request);
+    } catch {
+      return new Response('Internal Server Error', { status: 500 });
+    }
+  }),
+);
+
+server.listen(port, () => {
+  console.log(`Server listening on http://localhost:${port}`);
+});

dev-packages/e2e-tests/test-applications/remix-v3/start-event-proxy.mjs

@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3061,
+  proxyServerName: 'remix-v3',
+});

dev-packages/e2e-tests/test-applications/remix-v3/tests/smoke.test.ts

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+import { waitForStreamedSpan } from '@sentry-internal/test-utils';
+
+// There is no instrumentation yet. This app exists so later pull requests add instrumentation and its
+// tests together, rather than also introducing a new CI surface.
+test('the app boots under the Sentry --import entry', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page.locator('#home')).toBeVisible();
+});
+
+test('Sentry.init from the v3 subpath reports a server span', async ({ baseURL }) => {
+  // Names are still URL based. This only proves the subpath resolves and the SDK is live.
+  const spanPromise = waitForStreamedSpan('remix-v3', span => span.is_segment === true);
+
+  await fetch(`${baseURL}/`);
+
+  const span = await spanPromise;
+  expect(span.attributes?.['http.request.method']?.value).toBe('GET');
+});