Skip to content

test(tanstackstart-react): Wait for hydration before clicking client-error button#21065

Merged
mydea merged 1 commit into
developfrom
fix/tanstackstart-react-client-error-hydration-race
May 20, 2026
Merged

test(tanstackstart-react): Wait for hydration before clicking client-error button#21065
mydea merged 1 commit into
developfrom
fix/tanstackstart-react-client-error-hydration-race

Conversation

@mydea
Copy link
Copy Markdown
Member

@mydea mydea commented May 20, 2026 •
edited
Loading

Summary

  • Adds a hydration marker (data-hydrated="true" on <html>) in __root.tsx of the tanstackstart-react e2e app, set in a useEffect so it fires only after React hydration completes.
  • Updates the two flaky client-error tests (errors.test.ts:9, tunnel.test.ts:17) to wait on that marker before clicking the "Break the client" button.

Root cause (shared by three reported flakes)

#20641, #20685, and #20867 all fail with the same pattern:

Test timeout of 30000ms exceeded.

…after the same test step: click "Break the client", await the error event. The three issues differ only in which variant they were captured in (tunnel-object, tunnel-static, proxy). Same root cause.

The "Break the client" button is server-rendered HTML; its onClick handler (() => { throw new Error('Sentry Client Test Error'); }) is attached only when React hydrates. Playwright's toBeVisible() polls the DOM for visibility but doesn't wait for hydration — on slow CI runs, the click can fire before React has attached the handler. With no handler attached, the click does nothing, no error is thrown, the Sentry SDK never sees an error, and await errorEventPromise times out at 30 s.

Fix

In __root.tsx:

useEffect(() => {
  document.documentElement.setAttribute('data-hydrated', 'true');
}, []);

The useEffect only runs on the client after hydration. Tests now wait on it explicitly:

await page.goto('/');
await page.locator('html[data-hydrated="true"]').waitFor();  // ← new
await expect(page.locator('button').filter({ hasText: 'Break the client' })).toBeVisible();
await page.locator('button').filter({ hasText: 'Break the client' }).click();

This is the standard Playwright + SSR-React pattern. Deterministic (no networkidle flakiness), self-documenting, and the marker is now reusable for any future client-interaction test in this app.

Fixes #20641
Fixes #20685
Fixes #20867

🤖 Generated with Claude Code

@mydea mydea self-assigned this May 20, 2026
@mydea mydea requested a review from a team May 20, 2026 12:07
@mydea mydea merged commit 7d6f9f8 into develop May 20, 2026
47 checks passed
@mydea mydea deleted the fix/tanstackstart-react-client-error-hydration-race branch May 20, 2026 13:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment