e2e createPages error boundaries

e2e/create-pages.spec.ts

@@ -65,5 +65,61 @@ for (const mode of ['DEV', 'PRD'] as const) {
       await page.waitForTimeout(500); // need to wait not to error
       await expect(page.getByRole('heading', { level: 2 })).toBeVisible();
     });
+
+    test('errors', async ({ page }) => {
+      await page.goto(`http://localhost:${port}`);
+      await page.click("a[href='/error']");
+      await expect(
+        page.getByRole('heading', { name: 'Error Page' }),
+      ).toBeVisible();
+      await expect(page.getByTestId('fallback-render')).toHaveText(
+        'Handling RSC render error',
+      );
+      await page.getByTestId('server-throws').getByTestId('throws').click();
+      await expect(
+        page.getByRole('heading', { name: 'Error: Internal Server Error' }),
+      ).toBeVisible();
+      // I think below is the expected behavior
+      // await expect(
+      //   page.getByRole('heading', { name: 'Error Page' }),
+      // ).toBeVisible();
+      // await expect(
+      //   page.getByTestId('server-throws').getByTestId('throws-error'),
+      // ).toHaveText('Something unexpected happened');
+    });
+
+    test('server function unreachable', async ({ page }) => {
+      await page.goto(`http://localhost:${port}`);
+      await page.click("a[href='/error']");
+      await expect(
+        page.getByRole('heading', { name: 'Error Page' }),
+      ).toBeVisible();
+      await page.getByTestId('server-throws').getByTestId('success').click();
+      await expect(
+        page.getByTestId('server-throws').getByTestId('throws-success'),
+      ).toHaveText('It worked');
+      await page.getByTestId('server-throws').getByTestId('reset').click();
+      await expect(
+        page.getByTestId('server-throws').getByTestId('throws-success'),
+      ).toHaveText('init');
+      await stopApp();
+      await page.getByTestId('server-throws').getByTestId('success').click();
+      // Default router client error boundary is reached
+      await expect(
+        page.getByRole('heading', { name: 'Not Found' }),
+      ).toBeVisible();
+      ({ port, stopApp } = await startApp(mode));
+    });
+
+    test('server page unreachable', async ({ page }) => {
+      await page.goto(`http://localhost:${port}`);
+      await stopApp();
+      await page.click("a[href='/error']");
+      // Default router client error boundary is reached
+      await expect(
+        page.getByRole('heading', { name: 'Not Found' }),
+      ).toBeVisible();
+      ({ port, stopApp } = await startApp(mode));
+    });
   });
 }

e2e/fixtures/create-pages/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-server-dom-webpack": "19.0.0",
     "waku": "workspace:*"
   },

e2e/fixtures/create-pages/src/components/HomeLayout.tsx

@@ -57,6 +57,9 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
       <li>
         <Link to="/nested/qux">Nested / Qux</Link>
       </li>
+      <li>
+        <Link to="/error">Error</Link>
+      </li>
     </ul>
     {children}
   </div>

e2e/fixtures/create-pages/src/components/funcs.ts

@@ -9,3 +9,10 @@ export const jump = async () => {
   console.log(`Jumping to ${page}`);
   unstable_rerenderRoute(page);
 };
+
+export const throws = async (input: string): Promise<string> => {
+  if (!input) {
+    throw new Error('Something unexpected happened');
+  }
+  return input;
+};

e2e/fixtures/create-pages/src/entries.tsx

@@ -8,6 +8,7 @@ import NestedBazPage from './components/NestedBazPage.js';
 import Root from './components/Root.js';
 import NestedLayout from './components/NestedLayout.js';
 import { DeeplyNestedLayout } from './components/DeeplyNestedLayout.js';
+import ErrorPage from './components/ErrorPage.js';
 
 const pages: ReturnType<typeof createPages> = createPages(
   async ({ createPage, createLayout, createRoot }) => [
@@ -86,6 +87,12 @@ const pages: ReturnType<typeof createPages> = createPages(
       ),
     }),
 
+    createPage({
+      render: 'dynamic',
+      path: '/error',
+      component: ErrorPage,
+    }),
+
     createPage({
       render: 'dynamic',
       path: '/any/[...all]',

e2e/rsc-basic.spec.ts

@@ -82,11 +82,9 @@ for (const mode of ['DEV', 'PRD'] as const) {
       await expect(
         page.getByTestId('server-throws').getByTestId('throws-success'),
       ).toHaveText('init');
-      // This is intended to simulate the network or server being down
-      await page.route('http://localhost:${port}/**', (route) => {
-        return route.abort();
-      });
+      await stopApp();
       await page.getByTestId('server-throws').getByTestId('success').click();
+      ({ port, stopApp } = await startApp(mode));
       // Not sure what we should expect...
       await expect(
         page.getByTestId('server-throws').getByTestId('throws-success'),