test(nuxt): Wait for hydration before clicking in error tests (#25520)

The Nuxt `errors.client` and `errors.server` E2E tests sometimes time
out because they click server-rendered buttons before Vue has hydrated
and attached the handlers. The click gets dropped, so no request or
error happens. In the failed runs, the server never even logged the
`/api/server-error` request. The race exists because the Sentry client
config is loaded through a dynamic `import()` in a Nuxt plugin.
`page.goto` resolves on `load`, which doesn't wait for that chunk, and
Nuxt doesn't mount the app until its plugins finish.

The tests now wait until `#__nuxt.__vue_app__.$nuxt.isHydrating ===
false` before clicking. That is the flag Nuxt clears once the root
Suspense resolves after hydration, so it shows the handlers are
attached. `typeof window.__SENTRY__ === 'object'` only shows that the
SDK loaded, which can happen before mount. The helper replaces the one
existing `__SENTRY__` wait in `nuxt-3-dynamic-import`. I checked the
race with a minimal Nuxt app whose plugin awaits a delayed dynamic
chunk: clicking right after `goto` was a no-op, and clicking after this
wait worked.

The helper is copied into each Nuxt test app because each app is a
standalone package.

<!-- junior-request-attribution:start -->
via **Francesco Gringl-Novy**.
<!-- junior-request-attribution:end -->

<!-- junior-session-footer:start -->
<!-- junior-conversation-id:agent%3Aa39e9eec22d2b41c897347df8de17187 -->

--

[View Junior
Session](https://junior-prod.sentry.dev/conversations/agent%3Aa39e9eec22d2b41c897347df8de17187)
[[Sentry]](https://sentry.sentry.io/explore/conversations/agent%3Aa39e9eec22d2b41c897347df8de17187/?project=4510944073809921)

<!-- junior-session-footer:end -->

Co-authored-by: sentry-junior[bot] <264270552+sentry-junior[bot]@users.noreply.github.com>
Co-authored-by: Francesco Gringl-Novy <francesco.novy@sentry.io>

Author: sentry-junior[bot]

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.client.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { waitForHydration } from './waitForHydration';
 
 test.describe('client-side errors', async () => {
   test('captures error thrown on click', async ({ page }) => {
@@ -8,6 +9,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;
@@ -35,7 +37,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
-    await page.waitForFunction(() => typeof window.__SENTRY__ === 'object');
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;
@@ -65,6 +67,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error1 = await error1Promise;

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.server.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { waitForHydration } from './waitForHydration';
 
 test.describe('server-side errors', async () => {
   test('captures api fetch error (fetched on click)', async ({ page }) => {
@@ -8,6 +9,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/fetch-server-error`);
+    await waitForHydration(page);
     await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     const error = await errorPromise;
@@ -42,6 +44,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
+    await waitForHydration(page);
     await page.getByRole('button', { name: 'Fetch Server API Error', exact: true }).click();
 
     const error = await errorPromise;

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/waitForHydration.ts

@@ -0,0 +1,10 @@
+import type { Page } from '@playwright/test';
+
+type NuxtRootContainer = HTMLElement & { __vue_app__?: { $nuxt?: { isHydrating?: boolean } } };
+
+// Server-rendered elements are clickable before Vue hydration attaches their event handlers.
+export async function waitForHydration(page: Page): Promise<void> {
+  await page.waitForFunction(
+    () => (document.getElementById('__nuxt') as NuxtRootContainer | null)?.__vue_app__?.$nuxt?.isHydrating === false,
+  );
+}

dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/errors.client.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { waitForHydration } from './waitForHydration';
 
 test.describe('client-side errors', async () => {
   test('captures error thrown on click', async ({ page }) => {
@@ -8,6 +9,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;
@@ -35,6 +37,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;
@@ -64,6 +67,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error1 = await error1Promise;

dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/errors.server.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { waitForHydration } from './waitForHydration';
 
 test.describe('server-side errors', async () => {
   test('captures api fetch error (fetched on click)', async ({ page }) => {
@@ -8,6 +9,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/fetch-server-error`);
+    await waitForHydration(page);
     await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     const error = await errorPromise;
@@ -42,6 +44,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
+    await waitForHydration(page);
     await page.getByRole('button', { name: 'Fetch Server API Error', exact: true }).click();
 
     const error = await errorPromise;

dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/waitForHydration.ts

@@ -0,0 +1,10 @@
+import type { Page } from '@playwright/test';
+
+type NuxtRootContainer = HTMLElement & { __vue_app__?: { $nuxt?: { isHydrating?: boolean } } };
+
+// Server-rendered elements are clickable before Vue hydration attaches their event handlers.
+export async function waitForHydration(page: Page): Promise<void> {
+  await page.waitForFunction(
+    () => (document.getElementById('__nuxt') as NuxtRootContainer | null)?.__vue_app__?.$nuxt?.isHydrating === false,
+  );
+}

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.client.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { waitForHydration } from './waitForHydration';
 
 test.describe('client-side errors', async () => {
   test('captures error thrown on click', async ({ page }) => {
@@ -8,6 +9,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;
@@ -35,6 +37,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;
@@ -64,6 +67,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error1 = await error1Promise;

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { getSpanOp, waitForError, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { waitForHydration } from './waitForHydration';
 
 test.describe('server-side errors', async () => {
   test('captures api fetch error (fetched on click)', async ({ page }) => {
@@ -18,6 +19,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/fetch-server-error`);
+    await waitForHydration(page);
     await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     const serverSpan = await serverSpanPromise;
@@ -66,6 +68,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/fetch-server-error`);
+    await waitForHydration(page);
     await page.getByText('Fetch Server API Error', { exact: true }).click();
 
     await serverSpanPromise;
@@ -82,6 +85,7 @@ test.describe('server-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
+    await waitForHydration(page);
     await page.getByRole('button', { name: 'Fetch Server API Error', exact: true }).click();
 
     const error = await errorPromise;

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/waitForHydration.ts

@@ -0,0 +1,10 @@
+import type { Page } from '@playwright/test';
+
+type NuxtRootContainer = HTMLElement & { __vue_app__?: { $nuxt?: { isHydrating?: boolean } } };
+
+// Server-rendered elements are clickable before Vue hydration attaches their event handlers.
+export async function waitForHydration(page: Page): Promise<void> {
+  await page.waitForFunction(
+    () => (document.getElementById('__nuxt') as NuxtRootContainer | null)?.__vue_app__?.$nuxt?.isHydrating === false,
+  );
+}

dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { waitForHydration } from './waitForHydration';
 
 test.describe('client-side errors', async () => {
   test('captures error thrown on click', async ({ page }) => {
@@ -8,6 +9,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;
@@ -35,6 +37,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#error-in-error-boundary').click();
 
     const error = await errorPromise;
@@ -77,6 +80,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;
@@ -106,6 +110,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/client-error`);
+    await waitForHydration(page);
     await page.locator('#errorBtn').click();
 
     const error1 = await error1Promise;