browser-e2e-vite-cold-compile-prewarm

Answer

Two independent fixes, both applied in the E2E bootstrap (e2e/ scripts, run before vitest run):

Fix 1 — Pre-warm the tree route before the suite

Vite's dev server transforms modules on demand per browser request. The first real browser request for the tree page pays the full cost of compiling @xyflow/react + @xyflow/system + d3/zustand deps (10–30s), which lands inside waitForSelector('.react-flow', { timeout: 15000 }) and fails it. The fix forces that compilation to happen once, in a throwaway headless Chrome load, before any test runs.

// e2e/prewarm.mjs — run once after `vite dev` is up, before the suite.
// Warms Vite's transform cache for the tree route (incl. @xyflow/react)
// so no test ever hits a >15s cold compile.
import { execFile } from 'node:child_process';
import { promisify } from 'node:util';

const execFileP = promisify(execFile);
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

const BASE   = process.env.E2E_BASE_URL ?? 'http://<ip-address>:5173';
const API    = process.env.E2E_API_URL  ?? `${BASE}/api`;
const JWT    = process.env.E2E_DEV_JWT;                 // dev JWT; sub = seeded dev user
const CHROME = process.env.CHROME_PATH  ?? 'google-chrome';

async function waitForVite(timeoutMs = 30_000) {
  const deadline = Date.now() + timeoutMs;
  while (Date.now() < deadline) {
    try { if ((await fetch(`${BASE}/`)).ok) return; } catch {}
    await sleep(500);
  }
  throw new Error('prewarm: vite dev server not ready');
}

async function createPrewarmTree() {
  const res = await fetch(`${API}/trees`, {
    method: 'POST',
    headers: { 'content-type': 'application/json', authorization: `Bearer ${JWT}` },
    body: JSON.stringify({ name: `__e2e_prewarm_${Date.now()}` }),
  });
  if (!res.ok) {
    throw new Error(
      `prewarm: POST /trees -> ${res.status} ${await res.text()}\n` +
      '(a 503 here usually means the dev-JWT user row is missing from PG — ' +
      'tree_members FK violation, not a DB outage; run e2e/seed-dev-user.sql first)',
    );
  }
  return (await res.json()).tree.id;
}

async function warmTreePage(treeId) {
  // One headless-chrome dump-dom load. A real browser requesting the tree
  // route forces Vite to transform the full module graph NOW, not mid-suite.
  await execFileP(CHROME, [
    '--headless', '--disable-gpu', '--no-sandbox',
    '--dump-dom',
    '--virtual-time-budget=20000',   // let async React Flow rendering settle
    `${BASE}/trees/${treeId}`,
  ], { timeout: 120_000, maxBuffer: 16 * 1024 * 1024 });
}

await waitForVite();
const treeId = await createPrewarmTree();
await warmTreePage(treeId);
console.log(`prewarm OK: tree=${treeId} rendered`);

If the suite already ships puppeteer, use the stricter variant that waits on the exact selector tests use (more reliable than --dump-dom's load-event timing):

import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
await page.goto(`${BASE}/trees/${treeId}`, { waitUntil: 'networkidle0', timeout: 120_000 });
await page.waitForSelector('.react-flow', { timeout: 30_000 });
await browser.close();

Wire it into the suite so it runs exactly once, after Vite is up:

// package.json
{
  "scripts": {
    "e2e:seed": "psql \"$DATABASE_URL\" -f e2e/seed-dev-user.sql",
    "e2e:prewarm": "node e2e/prewarm.mjs",
    "test:e2e": "npm run e2e:seed && npx wait-on http://<ip-address>:5173 && npm run e2e:prewarm && vitest run e2e"
  }
}

Or as Vitest globalSetup (runs once in the main process, shared Vite cache benefits all workers):

// e2e/global-setup.ts
import { execFileSync } from 'node:child_process';
export default function setup() {
  execFileSync(process.execPath, ['e2e/prewarm.mjs'], { stdio: 'inherit' });
}

Fix 2 — Seed the dev-JWT user row (the 503 is a masked FK violation)

POST /trees inserts the tree and a tree_members row whose user_id comes from the JWT sub. Local PG has no such users row, so the insert hits FK 23503 on tree_members.user_id → users.id, which the API currently reports as 503 "database unavailable". Fix by seeding the dev user (or point DATABASE_URL at the compose PG whose init scripts already seed it):

-- e2e/seed-dev-user.sql
-- The dev JWT's `sub` MUST exist in users, or tree creation fails the
-- tree_members FK constraint (SQLSTATE 23503).
INSERT INTO users (id, email, name, created_at, updated_at)
VALUES (
  '00000000-0000-0000-0000-00000000d3b4',  -- == dev JWT sub
  '<email>',
  'Canopy Dev',
  now(), now()
)
ON CONFLICT (id) DO NOTHING;

And stop masking FK violations as outages in the API:

// server/src/routes/trees.ts
import { DatabaseError } from 'pg';

try {
  await tx`insert into tree_members (tree_id, user_id, role)
           values (${treeId}, ${userId}, 'owner')`;
} catch (err) {
  if (err instanceof DatabaseError && err.code === '23503') {
    return res.status(422).json({ error: 'unknown_user', detail: err.detail }); // not 503
  }
  if (err instanceof DatabaseError && /ECONNREFUSED|connection|timeout/i.test(err.message)) {
    return res.status(503).json({ error: 'database_unavailable' });
  }
  throw err;
}