test(remix): Add Remix 3 e2e test application

Registers a Remix 3 app in the e2e matrix with two smoke tests, so later
pull requests add instrumentation and its tests together instead of also
introducing a new CI surface.

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');
+});