test(nextjs): Add vinext e2e tests

vinext builds a Next.js app with Vite. Its e2e tests run in two places:

- nextjs-16 gets the optional variants `nextjs-16 (vinext)` and
  `nextjs-16 (vinext, bun)`. vinext builds the same app, and the same tests
  run as for Next.js. They skip the checks of the Next.js build output, and
  what vinext can not do yet: `openai` and `ioredis` get their diagnostics
  channels from the build-time loader of webpack or Turbopack, which vinext
  does not run, and without a Sentry build plugin there is no component
  annotation and no module metadata for the third-party filter. The OpenNext
  wrangler config is now `wrangler.opennext.jsonc`, because vinext refuses to
  build without the Cloudflare plugin when the project root has a wrangler
  config.
- `vinext-cf-workers` covers vinext on Workers. Its Worker entry has no
  Sentry calls, so `sentryCloudflareVitePlugin` must wrap it with
  `withSentry` from `@sentry/nextjs/cloudflare`. The app also has the server
  config of a Next.js app, whose `init` must create no second client in the
  Worker. The tests check that each request has one `http.server` span with
  the route of Next.js and the Next.js spans in its segment, that an incoming
  trace is continued in that segment, and that an error from
  `onRequestError` is in the trace of the request.

There is no Deno variant. On Deno, the `node:http` server of vinext starts
each request after the first one in the AsyncLocalStorage store of an
earlier request, also without Sentry, so vinext creates no request span.

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

Author: JPeer264

dev-packages/e2e-tests/README.md

@@ -172,8 +172,11 @@ reference setup.
   `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. `nextjs-16` has no Vite build: its Cloudflare variant builds with
-  `opennextjs-cloudflare build` and wraps the generated Worker in `worker.ts` with `withSentry` from
-  `@sentry/nextjs/cloudflare`.
+  `opennextjs-cloudflare build --config wrangler.opennext.jsonc` and wraps the generated Worker in `worker.ts` with
+  `withSentry` from `@sentry/nextjs/cloudflare`.
+- **Build flavors**: a variant can also build the same app with another tool, for example `nextjs-16 (vinext)` builds
+  `nextjs-16` with vinext. A build flavor is not a runtime: its assert script sets its own env var (`VINEXT=1`, read by
+  `tests/isVinext.ts`). It sets `runtime` only to run on another runtime, for example `nextjs-16 (vinext, bun)`.
 - **Runtime-specific files**: a file that has the runtime as a part of its name replaces the existing file without that
   part, for example `app/entry.server.cloudflare.tsx` replaces `app/entry.server.tsx` and `vite.cloudflare.config.ts`
   replaces `vite.config.ts`. For a variant with `runtime`, the runner copies these files over the others in the

dev-packages/e2e-tests/test-applications/nextjs-16/package.json

@@ -21,9 +21,11 @@
     "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
     "test:assert": "pnpm test:prod && pnpm test:dev",
     "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack",
-    "test:build:cloudflare": "pnpm install && opennextjs-cloudflare build",
-    "test:build-latest:cloudflare": "pnpm install && pnpm add next@latest && opennextjs-cloudflare build",
-    "start:cloudflare": "opennextjs-cloudflare preview --var \"E2E_TEST_DSN:$E2E_TEST_DSN\""
+    "test:build:cloudflare": "pnpm install && opennextjs-cloudflare build --config wrangler.opennext.jsonc",
+    "test:build-latest:cloudflare": "pnpm install && pnpm add next@latest && opennextjs-cloudflare build --config wrangler.opennext.jsonc",
+    "start:cloudflare": "opennextjs-cloudflare preview --config wrangler.opennext.jsonc --var \"E2E_TEST_DSN:$E2E_TEST_DSN\"",
+    "test:build:vinext": "pnpm install && pnpm add react@19.3.0 react-dom@19.3.0 && npm pkg set type=module && vinext build",
+    "test:assert:vinext": "VINEXT=1 pnpm test:prod"
   },
   "//": "Pin `ioredis` to 5.10.1: it's the last version before the driver publishes its own native diagnostics channels; orchestrion's config covers `ioredis <5.11.0`.",
   "dependencies": {
@@ -53,7 +55,12 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "^16",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitejs/plugin-rsc": "^0.5.35",
+    "react-server-dom-webpack": "^19.3.0",
     "typescript": "^5",
+    "vinext": "1.0.0-beta.13",
+    "vite": "^8.3.0",
     "wrangler": "^4.61.0"
   },
   "volta": {
@@ -109,6 +116,17 @@
         "assert-command": "pnpm test:prod",
         "deno-version": "v2.9.0",
         "label": "nextjs-16 (deno)"
+      },
+      {
+        "build-command": "pnpm test:build:vinext",
+        "assert-command": "pnpm test:assert:vinext",
+        "label": "nextjs-16 (vinext)"
+      },
+      {
+        "runtime": "bun",
+        "build-command": "pnpm test:build:vinext",
+        "assert-command": "pnpm test:assert:vinext",
+        "label": "nextjs-16 (vinext, bun)"
       }
     ]
   }

dev-packages/e2e-tests/test-applications/nextjs-16/playwright.config.mjs

@@ -12,6 +12,12 @@ const productionStartCommands = {
   cloudflare: 'pnpm start:cloudflare --port 3030',
 };
 
+// The `nextjs-16 (vinext)` variants build the app with vinext instead of Next.js.
+const vinextStartCommands = {
+  node: 'node ./node_modules/vinext/dist/cli.js start --port 3030',
+  bun: 'bun --bun ./node_modules/vinext/dist/cli.js start --port 3030',
+};
+
 const getStartCommand = () => {
   if (testEnv === 'development-webpack') {
     return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
@@ -22,7 +28,7 @@ const getStartCommand = () => {
   }
 
   if (testEnv === 'production') {
-    return productionStartCommands[getRuntime()];
+    return (process.env.VINEXT ? vinextStartCommands : productionStartCommands)[getRuntime()];
   }
 
   throw new Error(`Unknown test env: ${testEnv}`);

dev-packages/e2e-tests/test-applications/nextjs-16/tests/build-output.test.ts

@@ -3,6 +3,9 @@ import { findAbsolutePathImports } from '@sentry-internal/test-utils';
 import * as fs from 'fs';
 import * as path from 'path';
 import { isDevMode } from './isDevMode';
+import { isVinext } from './isVinext';
+
+test.skip(isVinext, 'Checks the build output of Next.js');
 
 test('emits no absolute-path imports into the server output', () => {
   const leaks = findAbsolutePathImports({ outputDir: path.join(process.cwd(), '.next', 'server') });

dev-packages/e2e-tests/test-applications/nextjs-16/tests/component-annotation.test.ts

@@ -1,9 +1,11 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { isVinext } from './isVinext';
 
 const isWebpackDev = process.env.TEST_ENV === 'development-webpack';
 
 test('React component annotation adds data-sentry-component attributes (Turbopack)', async ({ page }) => {
+  test.skip(isVinext, 'vinext runs no Sentry build plugin, so components get no annotation');
   test.skip(isWebpackDev, 'Only relevant for Turbopack builds');
 
   await page.goto('/component-annotation');

dev-packages/e2e-tests/test-applications/nextjs-16/tests/db-page.test.ts

@@ -1,7 +1,10 @@
 import { expect, test } from '@playwright/test';
 import { collectStreamedSpansUntilSegment, getRuntime } from '@sentry-internal/test-utils';
+import { isVinext } from './isVinext';
 
 test('Instruments DB calls made during server-side rendering of a page', async ({ page }) => {
+  test.skip(isVinext && getRuntime() === 'bun', 'Bun has no runtime module hook and vinext no build-time loader');
+
   // The db spans are children of the segment span, which ends last.
   const spansPromise = collectStreamedSpansUntilSegment('nextjs-16', 'GET /db-page');
 
@@ -13,7 +16,8 @@ test('Instruments DB calls made during server-side rendering of a page', async (
 
   // One page render produces spans from both injection paths: pg (externalized → runtime module
   // hook) and ioredis (bundle-safe allowlisted → build-time loader). Bun and Workers have no runtime module
-  // hook, so pg creates no spans there.
+  // hook, so pg creates no spans there. vinext does not run the build-time loader of webpack or Turbopack, so ioredis
+  // creates no spans there.
   if (getRuntime() !== 'bun' && getRuntime() !== 'cloudflare') {
     expect(spans).toContainEqual(
       expect.objectContaining({
@@ -28,30 +32,32 @@ test('Instruments DB calls made during server-side rendering of a page', async (
       }),
     );
   }
-  expect(spans).toContainEqual(
-    expect.objectContaining({
-      name: 'set localhost:6379',
-      status: 'ok',
-      attributes: expect.objectContaining({
-        'sentry.op': { value: 'db.query', type: 'string' },
-        'sentry.origin': { value: 'auto.db.redis', type: 'string' },
-        'db.system.name': { value: 'redis', type: 'string' },
-        'db.operation.name': { value: 'set', type: 'string' },
-        'db.query.text': { value: 'set page-key [1 other arguments]', type: 'string' },
+  if (!isVinext) {
+    expect(spans).toContainEqual(
+      expect.objectContaining({
+        name: 'set localhost:6379',
+        status: 'ok',
+        attributes: expect.objectContaining({
+          'sentry.op': { value: 'db.query', type: 'string' },
+          'sentry.origin': { value: 'auto.db.redis', type: 'string' },
+          'db.system.name': { value: 'redis', type: 'string' },
+          'db.operation.name': { value: 'set', type: 'string' },
+          'db.query.text': { value: 'set page-key [1 other arguments]', type: 'string' },
+        }),
       }),
-    }),
-  );
-  expect(spans).toContainEqual(
-    expect.objectContaining({
-      name: 'get localhost:6379',
-      status: 'ok',
-      attributes: expect.objectContaining({
-        'sentry.op': { value: 'db.query', type: 'string' },
-        'sentry.origin': { value: 'auto.db.redis', type: 'string' },
-        'db.system.name': { value: 'redis', type: 'string' },
-        'db.operation.name': { value: 'get', type: 'string' },
-        'db.query.text': { value: 'get page-key', type: 'string' },
+    );
+    expect(spans).toContainEqual(
+      expect.objectContaining({
+        name: 'get localhost:6379',
+        status: 'ok',
+        attributes: expect.objectContaining({
+          'sentry.op': { value: 'db.query', type: 'string' },
+          'sentry.origin': { value: 'auto.db.redis', type: 'string' },
+          'db.system.name': { value: 'redis', type: 'string' },
+          'db.operation.name': { value: 'get', type: 'string' },
+          'db.query.text': { value: 'get page-key', type: 'string' },
+        }),
       }),
-    }),
-  );
+    );
+  }
 });

dev-packages/e2e-tests/test-applications/nextjs-16/tests/isVinext.ts

@@ -0,0 +1 @@
+export const isVinext = !!process.env.VINEXT;

dev-packages/e2e-tests/test-applications/nextjs-16/tests/middleware.test.ts

@@ -7,6 +7,7 @@ import {
   waitForStreamedSpan,
 } from '@sentry-internal/test-utils';
 import { isDevMode } from './isDevMode';
+import { isVinext } from './isVinext';
 
 test('Should create a span for middleware', async ({ request }) => {
   test.skip(getRuntime() === 'cloudflare', 'On Workers the middleware span is a child of the request span');
@@ -120,6 +121,10 @@ test('Faulty middlewares inside the request segment of the Worker', async ({ req
 
 test('Should trace outgoing fetch requests inside middleware', async ({ request }) => {
   test.skip(isDevMode, 'The fetch requests ends up in a separate tx in dev atm');
+  test.skip(
+    isVinext && getRuntime() === 'bun',
+    'vinext replaces `globalThis.fetch` with a wrapper of the `fetch` from before `Sentry.init`, so `@sentry/bun` creates no fetch spans',
+  );
 
   // In some builds (especially webpack) the fetch span is not a child of the middleware segment but a
   // segment of its own, so this waits for either. `http.client` span names are low cardinality under

dev-packages/e2e-tests/test-applications/nextjs-16/tests/openai.test.ts

@@ -1,5 +1,8 @@
 import { expect, test } from '@playwright/test';
 import { waitForStreamedSpans } from '@sentry-internal/test-utils';
+import { isVinext } from './isVinext';
+
+test.skip(isVinext, 'vinext does not run the webpack or Turbopack loader that injects the OpenAI channel');
 
 // gen_ai spans are emitted as a separate span-v2 envelope item (not inline on the transaction), so we
 // assert on the streamed spans. Attribute values are wrapped as `{ value, type }` in the v2 format.

dev-packages/e2e-tests/test-applications/nextjs-16/tests/propagation.test.ts

@@ -1,7 +1,13 @@
 import { expect, test } from '@playwright/test';
-import { collectStreamedSpans, getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { collectStreamedSpans, getRuntime, getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { isVinext } from './isVinext';
 
 test('Propagates trace for outgoing fetch requests', async ({ baseURL, request }) => {
+  test.skip(
+    isVinext && getRuntime() === 'bun',
+    'vinext replaces `globalThis.fetch` with a wrapper of the `fetch` from before `Sentry.init`, so `@sentry/bun` creates no fetch spans',
+  );
+
   // Inbound span, outbound span and the http.client span in between all share one trace, and
   // `collectStreamedSpans` evaluates a single trace at a time, so requiring all three together
   // keeps them paired.
@@ -47,6 +53,11 @@ test('Does not propagate outgoing fetch requests not covered by tracePropagation
   baseURL,
   request,
 }) => {
+  test.skip(
+    isVinext && getRuntime() === 'bun',
+    'vinext replaces `globalThis.fetch` with a wrapper of the `fetch` from before `Sentry.init`, so nothing propagates and the test would check nothing',
+  );
+
   // These two spans are deliberately in different traces, so they are matched by their unique names.
   const inboundSpanPromise = waitForStreamedSpan('nextjs-16', span => {
     return span.name === 'GET /propagation/test-outgoing-fetch-external-disallowed/check' && span.is_segment;