test(e2e): Add Bun, Deno and Cloudflare variants to react-router-8-framework

Runs the same Playwright suite on Bun, Deno and Cloudflare (local workerd)
as optional variants of the existing app, instead of one app per runtime.
A variant can set a `runtime` matrix key (`bun` or `deno`), and CI then
installs that runtime for the job. The Cloudflare build uses its own Vite
config with `@cloudflare/vite-plugin` and `sentryCloudflareVitePlugin`,
and swaps in a workerd server entry with the new `runtimeEntryPlugin`
from `@sentry-internal/test-utils/vite`.

Getting the variants green needed these SDK fixes:

- react-router: resolve the Cloudflare entry under the `workerd`
  condition, so `Sentry.flush` and `Sentry.startSpan` exist in a Worker.
- react-router: export `createSentryHandleError` and
  `lowQualityTransactionsFilterIntegration` from `/cloudflare`.
- react-router: do not write trace meta tags into prerendered pages, which
  otherwise pinned every visitor of the static page to one build-time trace.
- react-router: name an index route after its nearest ancestor path, or
  `/`. It has no `path` of its own, so without an Express layer (Bun,
  Cloudflare) the index page got no route name.
- cloudflare: set the request as the transaction name, like Node does.
- server-utils: write bare builtin imports of force-bundled dependencies
  with the `node:` prefix, which Deno before 2.9 needs.

Under `bun run` Express is not instrumented, so on Bun (as on Cloudflare)
the error transaction stays the request path and the meta tag names the
http.server segment. The Bun variant relies on the diagnostics channel
fixes of the Bun auto-instrumentation suites PR it is based on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: JPeer264

.github/workflows/build.yml

@@ -1054,8 +1054,8 @@ jobs:
           node-version-file: 'dev-packages/e2e-tests/test-applications/${{ matrix.test-application }}/package.json'
       - name: Set up Bun
         if:
-          contains(fromJSON('["node-exports-test-app","nextjs-16-bun", "elysia-bun", "elysia-bun-static", "hono-4",
-          "bun-bytecode", "bun-mysql"]'), matrix.test-application)
+          matrix.runtime == 'bun' || contains(fromJSON('["node-exports-test-app","nextjs-16-bun", "elysia-bun",
+          "elysia-bun-static", "hono-4", "bun-bytecode", "bun-mysql"]'), matrix.test-application)
         uses: oven-sh/setup-bun@v2
         with:
           bun-version: '1.3.14'
@@ -1066,7 +1066,7 @@ jobs:
           use-installer: true
           token: ${{ secrets.GITHUB_TOKEN }}
       - name: Set up Deno
-        if: matrix.test-application == 'deno' || matrix.test-application == 'hono-4'
+        if: matrix.runtime == 'deno' || matrix.test-application == 'deno' || matrix.test-application == 'hono-4'
         uses: denoland/setup-deno@v2.0.5
         with:
           deno-version: ${{ matrix.deno-version || 'v2.8.3' }}
@@ -1192,8 +1192,13 @@ jobs:
         uses: actions/setup-node@v7
         with:
           node-version-file: 'dev-packages/e2e-tests/test-applications/${{ matrix.test-application }}/package.json'
+      - name: Set up Bun
+        if: matrix.runtime == 'bun'
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: '1.3.14'
       - name: Set up Deno
-        if: matrix.test-application == 'deno'
+        if: matrix.runtime == 'deno' || matrix.test-application == 'deno'
         uses: denoland/setup-deno@v2.0.5
         with:
           deno-version: ${{ matrix.deno-version || 'v2.8.3' }}

dev-packages/e2e-tests/README.md

@@ -116,6 +116,51 @@ Make sure to add a `test:build` and `test:assert` command to the new app's `pack
 Sentry packages are automatically resolved to the local build via pnpm overrides injected at test time, so no manual
 registry configuration is needed.
 
+## Runtime variants (Bun, Deno, Cloudflare)
+
+To test a framework on a runtime other than Node.js, add an `optionalVariants` entry to the existing test app instead of
+creating a new app. `react-router-8-framework` is the reference setup.
+
+- **`RUNTIME` env var**: `node` (default), `bun`, `deno` or `cloudflare`. `tests/constants.ts` exports it, so tests can
+  branch on it where the runtimes are expected to differ (for example `platform` or `sdk.name`).
+- **Start commands**: `playwright.config.mjs` selects the start command from `RUNTIME`. Bun and Deno use the same build
+  as Node and only change the start command, for example
+  `bun --bun --preload ./instrument.mjs ./node_modules/@react-router/serve/bin.cjs ./build/server/index.js` and
+  `deno run -A --preload ./instrument.mjs ./node_modules/@react-router/serve/bin.cjs ./build/server/index.js`.
+- **Cloudflare**: the app has the Cloudflare dependencies installed all the time. The Cloudflare build has its own
+  `vite.cloudflare.config.ts` with `@cloudflare/vite-plugin` and `sentryCloudflareVitePlugin` from
+  `@sentry/cloudflare/vite`, and the variant's `build-command` passes it with `--config`. Node, Bun and Deno share
+  `vite.config.ts`. The Worker entry lives in a separate file (for example `workers/app.ts`) and exports a plain
+  handler: the Sentry plugin wraps it with `withSentry` and reads the init options from `instrument.server.ts` next to
+  the entry. The start command runs `wrangler dev` on the build output. Code at module scope must not do I/O (for
+  example open a database connection), because workerd does not allow it.
+- **Runtime-specific files**: name them `<name>.<runtime>.<ext>` (for example `entry.server.cloudflare.tsx`). When the
+  framework does not let you configure a server entry, add `runtimeEntryPlugin` from
+  `@sentry-internal/test-utils/vite` to the runtime's Vite config, for example
+  `runtimeEntryPlugin('app/entry.server.tsx', 'cloudflare')`.
+- **Scripts**: put `RUNTIME` in a named script (`"test:assert:bun": "RUNTIME=bun pnpm test:assert"`), not in the
+  `assert-command`. `yarn test:run` prefixes the command with `volta run`, which cannot run a leading env assignment.
+- **`runtime` matrix key**: set `"runtime": "bun"` or `"runtime": "deno"` on the variant. CI then installs that runtime
+  for the job, so a new variant needs no change to `.github/workflows/build.yml`. A variant can also pin the version,
+  for example `"deno-version": "v2.9.0"`.
+- **Bun**: under `bun run` the SDK cannot inject diagnostics channels into packages that stay outside the build (for
+  example Express behind `react-router-serve`), so those produce no spans on Bun. Where a test depends on them, branch
+  on `RUNTIME` and say why in a comment.
+
+```json
+"sentryTest": {
+  "optionalVariants": [
+    { "assert-command": "pnpm test:assert:bun", "runtime": "bun", "label": "my-app (bun)" },
+    { "assert-command": "pnpm test:assert:deno", "runtime": "deno", "label": "my-app (deno)" },
+    {
+      "build-command": "pnpm test:build:cloudflare",
+      "assert-command": "pnpm test:assert:cloudflare",
+      "label": "my-app (cloudflare)"
+    }
+  ]
+}
+```
+
 ## Troubleshooting
 
 ### Common Issues

dev-packages/e2e-tests/test-applications/react-router-8-framework/app/entry.server.cloudflare.tsx

@@ -0,0 +1,42 @@
+import * as Sentry from '@sentry/react-router/cloudflare';
+import { isbot } from 'isbot';
+import { renderToReadableStream } from 'react-dom/server';
+import { type EntryContext, type HandleErrorFunction, ServerRouter } from 'react-router';
+
+async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+): Promise<Response> {
+  let shellRendered = false;
+  const userAgent = request.headers.get('user-agent');
+
+  const body = await renderToReadableStream(<ServerRouter context={routerContext} url={request.url} />, {
+    signal: request.signal,
+    onError(error: unknown) {
+      responseStatusCode = 500;
+      // Errors thrown after the shell has flushed can't change the status code, so surface them.
+      if (shellRendered) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    },
+  });
+  shellRendered = true;
+
+  if (userAgent && isbot(userAgent)) {
+    await body.allReady;
+  }
+
+  responseHeaders.set('Content-Type', 'text/html');
+
+  return new Response(Sentry.injectTraceMetaTags(body), {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}
+
+export const handleError: HandleErrorFunction = Sentry.createSentryHandleError({ logErrors: true });
+
+export default Sentry.wrapSentryHandleRequest(handleRequest);

dev-packages/e2e-tests/test-applications/react-router-8-framework/app/routes/performance/redis.tsx

@@ -1,9 +1,11 @@
 import Redis from 'ioredis';
 import type { Route } from './+types/redis';
 
-const redis = new Redis();
+// workerd does not allow a socket connect at module scope, so the client is made in the loader.
+let redis: Redis | undefined;
 
 export async function loader() {
+  redis ??= new Redis();
   const key = 'cache:greeting';
   await redis.set(key, 'hello from react-router');
   const value = await redis.get(key);

dev-packages/e2e-tests/test-applications/react-router-8-framework/app/routes/performance/with-middleware.tsx

@@ -11,11 +11,11 @@ async function getUser() {
   };
 }
 
-const authMiddleware: Route.MiddlewareFunction = async ({ request, context }, next) => {
-  Sentry.startSpan({ name: 'authMiddleware', op: 'middleware.auth' }, async () => {
+const authMiddleware: Route.MiddlewareFunction = async ({ context }, next) => {
+  return Sentry.startSpan({ name: 'authMiddleware', op: 'middleware.auth' }, async () => {
     const user: User = await getUser();
     context.set(userContext, user);
-    await next();
+    return next();
   });
 };
 

dev-packages/e2e-tests/test-applications/react-router-8-framework/package.json

@@ -9,30 +9,40 @@
     "react-router": "^8.0.0",
     "@react-router/node": "^8.0.0",
     "@react-router/serve": "^8.0.0",
+    "@sentry/cloudflare": "file:../../packed/sentry-cloudflare-packed.tgz",
     "@sentry/react-router": "file:../../packed/sentry-react-router-packed.tgz",
     "ioredis": "^5.11.1",
     "isbot": "^5.1.43"
   },
   "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.35.0",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@types/node": "^22",
     "@react-router/dev": "^8.0.0",
     "@playwright/test": "~1.63.0",
     "@sentry-internal/test-utils": "link:../../../test-utils",
     "typescript": "^5.6.3",
-    "vite": "^7.3.2"
+    "vite": "^7.3.2",
+    "wrangler": "^4.120.0"
   },
   "scripts": {
     "build": "react-router build",
     "test:build-latest": "pnpm install && pnpm add react-router@latest && pnpm add @react-router/node@latest && pnpm add @react-router/serve@latest && pnpm build",
     "dev": "NODE_OPTIONS='--import ./instrument.mjs' react-router dev",
     "start": "NODE_ENV=production NODE_OPTIONS='--import ./instrument.mjs' react-router-serve ./build/server/index.js",
+    "start:bun": "NODE_ENV=production bun --bun --preload ./instrument.mjs ./node_modules/@react-router/serve/bin.cjs ./build/server/index.js",
+    "start:deno": "NODE_ENV=production deno run -A --preload ./instrument.mjs ./node_modules/@react-router/serve/bin.cjs ./build/server/index.js",
+    "start:cloudflare": "wrangler dev --config ./build/server/wrangler.json --port 3030",
     "proxy": "node start-event-proxy.mjs",
     "typecheck": "react-router typegen && tsc",
     "clean": "npx rimraf node_modules pnpm-lock.yaml",
     "test:build": "pnpm install && pnpm build",
+    "test:build:cloudflare": "pnpm install && react-router build --config vite.cloudflare.config.ts",
     "test:assert": "pnpm test:ts && pnpm test:playwright",
+    "test:assert:bun": "RUNTIME=bun pnpm test:assert",
+    "test:assert:deno": "RUNTIME=deno pnpm test:assert",
+    "test:assert:cloudflare": "RUNTIME=cloudflare pnpm test:assert",
     "test:ts": "pnpm typecheck",
     "test:playwright": "playwright test"
   },
@@ -64,6 +74,24 @@
         "build-command": "pnpm test:build-latest",
         "label": "react-router-8-framework (latest)"
       }
+    ],
+    "optionalVariants": [
+      {
+        "assert-command": "pnpm test:assert:bun",
+        "runtime": "bun",
+        "label": "react-router-8-framework (bun)"
+      },
+      {
+        "assert-command": "pnpm test:assert:deno",
+        "runtime": "deno",
+        "deno-version": "v2.9.0",
+        "label": "react-router-8-framework (deno)"
+      },
+      {
+        "build-command": "pnpm test:build:cloudflare",
+        "assert-command": "pnpm test:assert:cloudflare",
+        "label": "react-router-8-framework (cloudflare)"
+      }
     ]
   }
 }

dev-packages/e2e-tests/test-applications/react-router-8-framework/playwright.config.mjs

@@ -1,9 +1,18 @@
 import { getPlaywrightConfig } from '@sentry-internal/test-utils';
 import { fileURLToPath } from 'url';
 
+const RUNTIME = process.env.RUNTIME || 'node';
+
+const startCommands = {
+  node: 'PORT=3030 pnpm start',
+  bun: 'PORT=3030 pnpm start:bun',
+  deno: 'PORT=3030 pnpm start:deno',
+  cloudflare: 'pnpm start:cloudflare',
+};
+
 const config = getPlaywrightConfig(
   {
-    startCommand: `PORT=3030 pnpm start`,
+    startCommand: startCommands[RUNTIME],
     port: 3030,
   },
   // Boot Redis before the tests run, outside the webServer startup-timeout window.

dev-packages/e2e-tests/test-applications/react-router-8-framework/tests/constants.ts

@@ -1 +1,5 @@
+export type Runtime = 'node' | 'bun' | 'deno' | 'cloudflare';
+
+export const RUNTIME = (process.env.RUNTIME || 'node') as Runtime;
+
 export const APP_NAME = 'react-router-8-framework';

dev-packages/e2e-tests/test-applications/react-router-8-framework/tests/errors/errors.server.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
-import { APP_NAME } from '../constants';
+import { APP_NAME, RUNTIME } from '../constants';
 
 test.describe('server-side errors', () => {
   test('captures error thrown in server loader', async ({ page }) => {
@@ -26,21 +26,23 @@ test.describe('server-side errors', () => {
           },
         ],
       },
-      // todo: should be 'GET /errors/server-loader'
-      transaction: 'GET /{*splat}',
+      // Express names the transaction on Node and Deno. Without an Express layer (Cloudflare, and Bun, where
+      // Express is not instrumented under `bun run`) it stays the request path.
+      // todo: should be 'GET /errors/server-loader' everywhere
+      transaction: RUNTIME === 'cloudflare' || RUNTIME === 'bun' ? 'GET /errors/server-loader' : 'GET /{*splat}',
       request: {
         url: expect.stringContaining('errors/server-loader'),
         headers: expect.any(Object),
       },
       level: 'error',
-      platform: 'node',
+      platform: RUNTIME === 'cloudflare' ? 'javascript' : 'node',
       environment: 'qa',
       sdk: {
         integrations: expect.any(Array<string>),
-        name: 'sentry.javascript.react-router',
+        name: RUNTIME === 'cloudflare' ? 'sentry.javascript.cloudflare' : 'sentry.javascript.react-router',
         version: expect.any(String),
       },
-      tags: { runtime: 'node' },
+      ...(RUNTIME === 'cloudflare' ? {} : { tags: { runtime: 'node' } }),
       contexts: {
         trace: {
           span_id: expect.any(String),
@@ -74,21 +76,23 @@ test.describe('server-side errors', () => {
           },
         ],
       },
-      // todo: should be 'POST /errors/server-action'
-      transaction: 'POST /{*splat}',
+      // Express names the transaction on Node and Deno. Without an Express layer (Cloudflare, and Bun, where
+      // Express is not instrumented under `bun run`) it stays the request path.
+      // todo: should be 'POST /errors/server-action' everywhere
+      transaction: RUNTIME === 'cloudflare' || RUNTIME === 'bun' ? 'POST /errors/server-action.data' : 'POST /{*splat}',
       request: {
         url: expect.stringContaining('errors/server-action'),
         headers: expect.any(Object),
       },
       level: 'error',
-      platform: 'node',
+      platform: RUNTIME === 'cloudflare' ? 'javascript' : 'node',
       environment: 'qa',
       sdk: {
         integrations: expect.any(Array<string>),
-        name: 'sentry.javascript.react-router',
+        name: RUNTIME === 'cloudflare' ? 'sentry.javascript.cloudflare' : 'sentry.javascript.react-router',
         version: expect.any(String),
       },
-      tags: { runtime: 'node' },
+      ...(RUNTIME === 'cloudflare' ? {} : { tags: { runtime: 'node' } }),
       contexts: {
         trace: {
           span_id: expect.any(String),

dev-packages/e2e-tests/test-applications/react-router-8-framework/tests/performance/navigation.client.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
-import { APP_NAME } from '../constants';
+import { APP_NAME, RUNTIME } from '../constants';
 
 test.describe('client - navigation performance', () => {
   test('should create navigation span', async ({ page }) => {
@@ -88,10 +88,14 @@ test.describe('client - navigation performance', () => {
       'sentry.op': { value: 'navigation', type: 'string' },
       'sentry.origin': { value: 'auto.navigation.react_router', type: 'string' },
       'url.template': { value: '/performance', type: 'string' },
-      // the initial pageload to `/performance` gets 301-redirected to a trailing slash by react-router-serve
-      'url.path': { value: '/performance/', type: 'string' },
+      // the initial pageload to `/performance` gets 301-redirected to a trailing slash by react-router-serve, workerd does not
+      'url.path': { value: RUNTIME === 'cloudflare' ? '/performance' : '/performance/', type: 'string' },
       'url.full': {
-        value: expect.stringMatching(/^https?:\/\/localhost:\d+\/performance\/\?query=test$/),
+        value: expect.stringMatching(
+          RUNTIME === 'cloudflare'
+            ? /^https?:\/\/localhost:\d+\/performance\?query=test$/
+            : /^https?:\/\/localhost:\d+\/performance\/\?query=test$/,
+        ),
         type: 'string',
       },
     });
@@ -166,9 +170,16 @@ test.describe('client - navigation performance', () => {
       'sentry.op': { value: 'navigation', type: 'string' },
       'sentry.origin': { value: 'auto.navigation.react_router', type: 'string' },
       'url.template': { value: '/performance', type: 'string' },
-      // react-router-serve 301-redirects the bare index route to a trailing slash
-      'url.path': { value: '/performance/', type: 'string' },
-      'url.full': { value: expect.stringMatching(/^https?:\/\/localhost:\d+\/performance\/$/), type: 'string' },
+      // react-router-serve 301-redirects the bare index route to a trailing slash, workerd does not
+      'url.path': { value: RUNTIME === 'cloudflare' ? '/performance' : '/performance/', type: 'string' },
+      'url.full': {
+        value: expect.stringMatching(
+          RUNTIME === 'cloudflare'
+            ? /^https?:\/\/localhost:\d+\/performance$/
+            : /^https?:\/\/localhost:\d+\/performance\/$/,
+        ),
+        type: 'string',
+      },
     });
   });
 });