From 0a99c1c4ba3c13d233f7b25d55dfedeae361bb3c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Wed, 20 Mar 2024 17:10:57 +0900
Subject: [PATCH 01/37] chore: tweak NavMenu

---
 .../react-server/examples/basic/src/components/nav-menu.tsx   | 4 ++--
 .../react-server/examples/basic/src/routes/test/layout.tsx    | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-server/examples/basic/src/components/nav-menu.tsx b/packages/react-server/examples/basic/src/components/nav-menu.tsx
index 916a6c866..8dcfb2584 100644
--- a/packages/react-server/examples/basic/src/components/nav-menu.tsx
+++ b/packages/react-server/examples/basic/src/components/nav-menu.tsx
@@ -1,8 +1,8 @@
 import { Link } from "@hiogawa/react-server/client";
 
-export function NavMenu(props: { links: string[] }) {
+export function NavMenu(props: { links: string[]; className?: string }) {
   return (
-    <ul className="flex flex-col items-start gap-1">
+    <ul className={props.className ?? "flex flex-col items-start gap-1"}>
       {props.links.map((e) => (
         <li key={e} className="antd-link flex items-stretch">
           <Link href={e}>
diff --git a/packages/react-server/examples/basic/src/routes/test/layout.tsx b/packages/react-server/examples/basic/src/routes/test/layout.tsx
index 992084f00..d27760c7d 100644
--- a/packages/react-server/examples/basic/src/routes/test/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/layout.tsx
@@ -6,6 +6,7 @@ export default async function Layout(props: React.PropsWithChildren) {
     <div className="flex flex-col gap-2">
       <h2 className="text-lg">Test</h2>
       <NavMenu
+        className="grid grid-cols-2 w-xs gap-1"
         links={[
           "/test",
           "/test/other",

From 896b4dd14a5ea7b766f51b2584963d993a06f515 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Wed, 20 Mar 2024 17:13:28 +0900
Subject: [PATCH 02/37] wip: error page

---
 .../examples/basic/src/routes/test/error/error.tsx |  6 ++++++
 .../basic/src/routes/test/error/layout.tsx         | 10 ++++++++++
 .../examples/basic/src/routes/test/error/page.tsx  |  3 +++
 .../examples/basic/src/routes/test/layout.tsx      |  1 +
 packages/react-server/src/entry/react-server.tsx   |  3 ++-
 packages/react-server/src/lib/router.tsx           | 14 +++++++++-----
 packages/react-server/src/server.ts                |  7 +++++--
 7 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error/error.tsx
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error/layout.tsx
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error/page.tsx

diff --git a/packages/react-server/examples/basic/src/routes/test/error/error.tsx b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
new file mode 100644
index 000000000..e4bf329a0
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
@@ -0,0 +1,6 @@
+import type { ErrorRouteProps } from "@hiogawa/react-server/server";
+
+export default function ErrorPage(props: ErrorRouteProps) {
+  console.log("[ErrorPage]", props);
+  return <div>ErrorPage</div>;
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
new file mode 100644
index 000000000..1d8a2354d
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
@@ -0,0 +1,10 @@
+import type { LayoutRouteProps } from "@hiogawa/react-server/server";
+
+export default function Layout(props: LayoutRouteProps) {
+  return (
+    <div>
+      <h3>[Layout]</h3>
+      <div>{props.children}</div>
+    </div>
+  );
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
new file mode 100644
index 000000000..e63b7c08e
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Page</div>;
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/layout.tsx b/packages/react-server/examples/basic/src/routes/test/layout.tsx
index d27760c7d..39aaaafe4 100644
--- a/packages/react-server/examples/basic/src/routes/test/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/layout.tsx
@@ -14,6 +14,7 @@ export default async function Layout(props: React.PropsWithChildren) {
           "/test/deps",
           "/test/head",
           "/test/css",
+          "/test/error",
           "/test/not-found",
         ]}
       />
diff --git a/packages/react-server/src/entry/react-server.tsx b/packages/react-server/src/entry/react-server.tsx
index f912c03b7..58188b6fb 100644
--- a/packages/react-server/src/entry/react-server.tsx
+++ b/packages/react-server/src/entry/react-server.tsx
@@ -72,7 +72,7 @@ const router = createRouter();
 function createRouter() {
   // for now hard code /src/routes as convention
   const glob = import.meta.glob(
-    "/src/routes/**/(page|layout).(js|jsx|ts|tsx)",
+    "/src/routes/**/(page|layout|error).(js|jsx|ts|tsx)",
     {
       eager: true,
     },
@@ -86,6 +86,7 @@ function createRouter() {
     const match = matchRoute(url.pathname, tree);
     const node = renderMatchRoute(
       { request, match },
+      // TODO: default error page?
       <div>Not Found: {url.pathname}</div>,
     );
     return { node, match };
diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index 176c904ed..ee5cfac5f 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -1,9 +1,6 @@
 import { objectHas, tinyassert } from "@hiogawa/utils";
 import type React from "react";
 
-// cf. similar to vite-glob-routes
-// https://github.com/hi-ogawa/vite-plugins/blob/c2d22f9436ef868fc413f05f243323686a7aa143/packages/vite-glob-routes/src/react-router/route-utils.ts#L15-L22
-
 // cf. https://nextjs.org/docs/app/building-your-application/routing#file-conventions
 interface RouteEntry {
   page?: {
@@ -12,6 +9,9 @@ interface RouteEntry {
   layout?: {
     default: React.FC<LayoutRouteProps>;
   };
+  error?: {
+    default: React.FC<ErrorRouteProps>;
+  };
 }
 
 type RouteTreeNode = TreeNode<RouteEntry>;
@@ -21,7 +21,7 @@ type RouteTreeNode = TreeNode<RouteEntry>;
 export function generateRouteTree(globEntries: Record<string, unknown>) {
   const entries: Record<string, RouteEntry> = {};
   for (const [k, v] of Object.entries(globEntries)) {
-    const m = k.match(/^(.*)\/(page|layout)\.\w*$/);
+    const m = k.match(/^(.*)\/(page|layout|error)\.\w*$/);
     tinyassert(m && 1 in m && 2 in m);
     tinyassert(objectHas(v, "default"), `no deafult export found in '${k}'`);
     ((entries[m[1]] ??= {}) as any)[m[2]] = v;
@@ -37,6 +37,7 @@ export function generateRouteTree(globEntries: Record<string, unknown>) {
 
 export type MatchRouteResult = {
   nodes: RouteTreeNode[];
+  // TODO: not found as error
   notFound: boolean;
   params: Record<string, string>;
 };
@@ -102,6 +103,8 @@ interface RouteProps {
 
 export interface PageRouteProps extends RouteProps {}
 
+export interface ErrorRouteProps extends RouteProps {}
+
 export interface LayoutRouteProps extends React.PropsWithChildren<RouteProps> {}
 
 function matchChild(input: string, node: RouteTreeNode) {
@@ -124,7 +127,8 @@ function matchChild(input: string, node: RouteTreeNode) {
 }
 
 //
-// general tree structure utils
+// general tree utils copied from vite-glob-routes
+// https://github.com/hi-ogawa/vite-plugins/blob/c2d22f9436ef868fc413f05f243323686a7aa143/packages/vite-glob-routes/src/react-router/route-utils.ts#L15-L22
 //
 
 type TreeNode<T> = {
diff --git a/packages/react-server/src/server.ts b/packages/react-server/src/server.ts
index 9e7c20c7a..63c986eae 100644
--- a/packages/react-server/src/server.ts
+++ b/packages/react-server/src/server.ts
@@ -1,2 +1,5 @@
-// TODO: server action utilities with "use server"?
-export type { PageRouteProps, LayoutRouteProps } from "./lib/router";
+export type {
+  PageRouteProps,
+  LayoutRouteProps,
+  ErrorRouteProps,
+} from "./lib/router";

From a799f57fe184ef3094fe7c44a7724399d8495cf4 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Wed, 20 Mar 2024 17:33:13 +0900
Subject: [PATCH 03/37] chore: tweak demo

---
 .../react-server/examples/basic/src/routes/test/layout.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-server/examples/basic/src/routes/test/layout.tsx b/packages/react-server/examples/basic/src/routes/test/layout.tsx
index 39aaaafe4..94f054e9a 100644
--- a/packages/react-server/examples/basic/src/routes/test/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/layout.tsx
@@ -18,8 +18,10 @@ export default async function Layout(props: React.PropsWithChildren) {
           "/test/not-found",
         ]}
       />
-      <input className="antd-input w-sm px-2" placeholder="test-input" />
-      <Hydrated />
+      <div className="flex items-center gap-2 w-sm text-sm">
+        <input className="antd-input px-2" placeholder="test-input" />
+        <Hydrated />
+      </div>
       {props.children}
     </div>
   );

From c4facf50d9b9be44ff71a306a189e241e56a1baf Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Wed, 20 Mar 2024 17:44:07 +0900
Subject: [PATCH 04/37] chore: setup demo

---
 .../basic/src/routes/test/error/error.tsx     |  6 +++++-
 .../basic/src/routes/test/error/layout.tsx    |  2 +-
 .../basic/src/routes/test/error/page.tsx      | 20 +++++++++++++++++--
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/react-server/examples/basic/src/routes/test/error/error.tsx b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
index e4bf329a0..6c17d5ad1 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/error.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
@@ -2,5 +2,9 @@ import type { ErrorRouteProps } from "@hiogawa/react-server/server";
 
 export default function ErrorPage(props: ErrorRouteProps) {
   console.log("[ErrorPage]", props);
-  return <div>ErrorPage</div>;
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <h3>[ErrorPage]</h3>
+    </div>
+  );
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
index 1d8a2354d..4c0e3fa03 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
@@ -2,7 +2,7 @@ import type { LayoutRouteProps } from "@hiogawa/react-server/server";
 
 export default function Layout(props: LayoutRouteProps) {
   return (
-    <div>
+    <div className="flex flex-col items-start gap-2">
       <h3>[Layout]</h3>
       <div>{props.children}</div>
     </div>
diff --git a/packages/react-server/examples/basic/src/routes/test/error/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
index e63b7c08e..ab0d96d0d 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
@@ -1,3 +1,19 @@
-export default function Page() {
-  return <div>Page</div>;
+import { Link } from "@hiogawa/react-server/client";
+import type { PageRouteProps } from "@hiogawa/react-server/server";
+import { sleep } from "@hiogawa/utils";
+
+export default async function Page(props: PageRouteProps) {
+  await sleep(200);
+  const url = new URL(props.request.url);
+  if (url.searchParams.has("crash")) {
+    throw new Error("crash!");
+  }
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <h3>[Normal Page]</h3>
+      <Link className="antd-btn antd-btn-default px-2" href="/test/error?crash">
+        Crash!
+      </Link>
+    </div>
+  );
 }

From b641d47f255f6e3f9dee13acedaaa70be31b4944 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Wed, 20 Mar 2024 19:05:47 +0900
Subject: [PATCH 05/37] wip: client error boundary

---
 .../basic/src/routes/test/error/_client.tsx   | 35 +++++++++++++++++++
 .../basic/src/routes/test/error/error.tsx     | 20 +++++++++--
 .../basic/src/routes/test/error/layout.tsx    |  6 +++-
 .../basic/src/routes/test/error/page.tsx      |  1 +
 packages/react-server/src/client-internal.ts  |  3 ++
 packages/react-server/src/client.tsx          |  3 +-
 .../react-server/src/entry/react-server.tsx   | 10 +++---
 .../src/lib/components/error-boundary.tsx     | 24 +++++++++++++
 packages/react-server/src/lib/router.tsx      | 29 ++++++++++++---
 packages/react-server/tsup.config.ts          |  2 ++
 10 files changed, 120 insertions(+), 13 deletions(-)
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error/_client.tsx
 create mode 100644 packages/react-server/src/lib/components/error-boundary.tsx

diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
new file mode 100644
index 000000000..600dbfb15
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+
+// TOOD: for now, experiment in demo
+
+// cf. https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
+export class ErrorBoundary extends React.Component<
+  {
+    children?: React.ReactNode;
+    errorComponent: React.FC<any>;
+  },
+  { error: Error | null }
+> {
+  constructor(props: any) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  reset = () => {
+    this.setState({ error: null });
+  };
+
+  override render() {
+    if (this.state.error) {
+      const Component = this.props.errorComponent;
+      return <Component error={this.state.error} reset={this.reset} />;
+    }
+    return this.props.children;
+  }
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/error.tsx b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
index 6c17d5ad1..7d8faacc8 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/error.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
@@ -1,10 +1,26 @@
+"use client";
+
+import { Link, __history } from "@hiogawa/react-server/client";
 import type { ErrorRouteProps } from "@hiogawa/react-server/server";
+import React from "react";
 
 export default function ErrorPage(props: ErrorRouteProps) {
-  console.log("[ErrorPage]", props);
+  React.useEffect(() => {
+    // reset on route change.
+    // TODO: subscribe to browser entry re-render?
+    return __history.subscribe(() => {
+      React.startTransition(() => {
+        props.reset();
+      });
+    });
+  }, []);
+
   return (
     <div className="flex flex-col items-start gap-2">
-      <h3>[ErrorPage]</h3>
+      <h3>[Error Page]</h3>
+      <Link className="antd-btn antd-btn-default px-2" href="/test/error">
+        Reset!
+      </Link>
     </div>
   );
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
index 4c0e3fa03..f57dcab11 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
@@ -1,10 +1,14 @@
 import type { LayoutRouteProps } from "@hiogawa/react-server/server";
+import { ErrorBoundary } from "./_client";
+import ErrorPage from "./error";
 
 export default function Layout(props: LayoutRouteProps) {
   return (
     <div className="flex flex-col items-start gap-2">
       <h3>[Layout]</h3>
-      <div>{props.children}</div>
+      <ErrorBoundary errorComponent={ErrorPage}>
+        <div>{props.children}</div>
+      </ErrorBoundary>
     </div>
   );
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/error/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
index ab0d96d0d..e0289e34c 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
@@ -6,6 +6,7 @@ export default async function Page(props: PageRouteProps) {
   await sleep(200);
   const url = new URL(props.request.url);
   if (url.searchParams.has("crash")) {
+    // TODO: not caught on SSR. need suspense?
     throw new Error("crash!");
   }
   return (
diff --git a/packages/react-server/src/client-internal.ts b/packages/react-server/src/client-internal.ts
index e05bd6151..733694c1f 100644
--- a/packages/react-server/src/client-internal.ts
+++ b/packages/react-server/src/client-internal.ts
@@ -1 +1,4 @@
+"use client";
+
 export { createServerReference } from "./lib/shared";
+export { ErrorBoundary } from "./lib/components/error-boundary";
diff --git a/packages/react-server/src/client.tsx b/packages/react-server/src/client.tsx
index 321e45656..51ad76738 100644
--- a/packages/react-server/src/client.tsx
+++ b/packages/react-server/src/client.tsx
@@ -1,3 +1,4 @@
 "use client";
 
-export * from "./lib/components/link";
+export { Link } from "./lib/components/link";
+export { __history } from "./lib/csr";
diff --git a/packages/react-server/src/entry/react-server.tsx b/packages/react-server/src/entry/react-server.tsx
index 58188b6fb..0f57083c1 100644
--- a/packages/react-server/src/entry/react-server.tsx
+++ b/packages/react-server/src/entry/react-server.tsx
@@ -36,7 +36,7 @@ export const handler: ReactServerHandler = async ({ request }) => {
   const rscOnlyRequest = unwrapRscRequest(request);
 
   // rsc
-  const { stream, status } = render({
+  const { stream, status } = await render({
     request: rscOnlyRequest ?? request,
   });
   if (rscOnlyRequest) {
@@ -54,8 +54,8 @@ export const handler: ReactServerHandler = async ({ request }) => {
 // render RSC
 //
 
-function render({ request }: { request: Request }) {
-  const result = router.run(request);
+async function render({ request }: { request: Request }) {
+  const result = await router.run(request);
   const stream = reactServerDomServer.renderToReadableStream(
     result.node,
     createBundlerConfig(),
@@ -81,10 +81,10 @@ function createRouter() {
     objectMapKeys(glob, (_v, k) => k.slice("/src/routes".length)),
   );
 
-  function run(request: Request) {
+  async function run(request: Request) {
     const url = new URL(request.url);
     const match = matchRoute(url.pathname, tree);
-    const node = renderMatchRoute(
+    const node = await renderMatchRoute(
       { request, match },
       // TODO: default error page?
       <div>Not Found: {url.pathname}</div>,
diff --git a/packages/react-server/src/lib/components/error-boundary.tsx b/packages/react-server/src/lib/components/error-boundary.tsx
new file mode 100644
index 000000000..7b3c5685d
--- /dev/null
+++ b/packages/react-server/src/lib/components/error-boundary.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+
+// cf. https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
+export class ErrorBoundary extends React.Component<
+  {
+    children?: React.ReactNode;
+    errorComponent: React.FC<{ error?: Error }>;
+  },
+  { error?: Error }
+> {
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  override render() {
+    if (this.state.error) {
+      const Component = this.props.errorComponent;
+      return <Component error={this.state.error} />;
+    }
+    return this.props.children;
+  }
+}
diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index ee5cfac5f..543de09dd 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -1,5 +1,5 @@
 import { objectHas, tinyassert } from "@hiogawa/utils";
-import type React from "react";
+import React from "react";
 
 // cf. https://nextjs.org/docs/app/building-your-application/routing#file-conventions
 interface RouteEntry {
@@ -71,10 +71,26 @@ export function matchRoute(
 }
 
 // TODO: separate react code in a different file
-export function renderMatchRoute(
+export async function renderMatchRoute(
   props: RouteProps,
   fallback: React.ReactNode,
-): React.ReactNode {
+): Promise<React.ReactNode> {
+  // let clientLib: typeof import("../client-internal");
+  // if (import.meta.env.DEV) {
+  //   // TODO: workaorund self-reference during dev
+  //   const lib = await import("node:module");
+  //   const require = lib.default.createRequire(import.meta.url);
+  //   // TODO: resolved client boundary breaks vite deps optimization
+  //   const resolved = require.resolve("@hiogawa/react-server/client-internal");
+  //   // console.log({ resolved });
+  //   clientLib = (await import(/* @vite-ignore */ resolved)) as any;
+  //   // console.log(clientLib, clientLib.ErrorBoundary);
+  // } else {
+  //   throw new Error("todo");
+  //   // clientLib = await import("@hiogawa/react-server/client-internal") as any;
+  // }
+  // clientLib.ErrorBoundary;
+
   const nodes = [...props.match.nodes].reverse();
 
   let acc: React.ReactNode = fallback;
@@ -88,6 +104,8 @@ export function renderMatchRoute(
 
   for (const node of nodes) {
     const Layout = node.value?.layout?.default;
+    if (node.value?.error) {
+    }
     if (Layout) {
       acc = <Layout {...props}>{acc}</Layout>;
     }
@@ -103,7 +121,10 @@ interface RouteProps {
 
 export interface PageRouteProps extends RouteProps {}
 
-export interface ErrorRouteProps extends RouteProps {}
+export interface ErrorRouteProps {
+  error: Error;
+  reset: () => void;
+}
 
 export interface LayoutRouteProps extends React.PropsWithChildren<RouteProps> {}
 
diff --git a/packages/react-server/tsup.config.ts b/packages/react-server/tsup.config.ts
index a568ea28c..7e2c36cb1 100644
--- a/packages/react-server/tsup.config.ts
+++ b/packages/react-server/tsup.config.ts
@@ -22,6 +22,8 @@ export default defineConfig([
       "/dist/rsc/index.js",
       "/dist/client/index.html?raw",
       "/index.html?raw",
+      // self reference
+      /^@hiogawa\/react-server/,
     ],
   },
 ]);

From 0352c1f661bb55d1cccff5791aa9c946fdf7f9fb Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 08:14:15 +0900
Subject: [PATCH 06/37] wip

---
 .../examples/basic/src/routes/test/error/_client.tsx        | 6 ++++--
 .../examples/basic/src/routes/test/error/layout.tsx         | 1 +
 packages/react-server/src/entry/server.tsx                  | 5 +++++
 packages/react-server/src/plugin/index.ts                   | 1 +
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
index 600dbfb15..932148c98 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
@@ -2,9 +2,11 @@
 
 import React from "react";
 
-// TOOD: for now, experiment in demo
+// TOOD: for now, experiment inside demo
 
-// cf. https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
+// cf.
+// https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
+// https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
 export class ErrorBoundary extends React.Component<
   {
     children?: React.ReactNode;
diff --git a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
index f57dcab11..54ea9c07a 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
@@ -6,6 +6,7 @@ export default function Layout(props: LayoutRouteProps) {
   return (
     <div className="flex flex-col items-start gap-2">
       <h3>[Layout]</h3>
+      {/* TODO: need two-pass render to catch SSR error? (cf. packages/vite-glob-routes/examples/demo/src/server/ssr.tsx) */}
       <ErrorBoundary errorComponent={ErrorPage}>
         <div>{props.children}</div>
       </ErrorBoundary>
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 16aae23e3..0f2e76fb8 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -53,6 +53,7 @@ export async function renderHtml(
   // (see src/lib/ssr.tsx for details)
   const renderId = Math.random().toString(36).slice(2);
 
+  // TODO: stream more lazily?
   const rscNode = await reactServerDomClient.createFromReadableStream(
     rscStream1,
     {
@@ -71,8 +72,12 @@ export async function renderHtml(
   }
   const assets = (await import("virtual:ssr-assets" as string)).default;
 
+  // TODO: two pass render on error?
   const ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
     bootstrapModules: assets.bootstrapModules,
+    onError(error, errorInfo) {
+      console.log("[renderToReadableStream]", { error, errorInfo });
+    },
   });
 
   return ssrStream
diff --git a/packages/react-server/src/plugin/index.ts b/packages/react-server/src/plugin/index.ts
index 98a91384b..96737ea50 100644
--- a/packages/react-server/src/plugin/index.ts
+++ b/packages/react-server/src/plugin/index.ts
@@ -509,6 +509,7 @@ function vitePluginServerUseClient({
         // obfuscate reference
         id = hashString(id);
       }
+      // TODO: can we use internal "imports" subpath?
       // TODO:
       // "@hiogawa/react-server/client" needs to self-reference
       // "@hiogawa/react-server/server-internal" due to "use client" transform

From cc38a398490ad90187ad1707dc9c7e0314ee202f Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 11:35:14 +0900
Subject: [PATCH 07/37] chore: todo

---
 .../examples/basic/src/routes/test/error/_client.tsx      | 8 ++++++++
 packages/react-server/src/entry/server.tsx                | 1 +
 2 files changed, 9 insertions(+)

diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
index 932148c98..9a9718732 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
@@ -28,6 +28,14 @@ export class ErrorBoundary extends React.Component<
   };
 
   override render() {
+    // SSR context to pick up error from 1st pass in 2nd pass?
+    // __global.ssrContext[props.ssrId]
+    // TODO: how to know where the error is from?
+    //       track SSR of all error boundaries and whether?
+    if (import.meta.env.SSR) {
+    }
+    // import.meta.env.SSR
+
     if (this.state.error) {
       const Component = this.props.errorComponent;
       return <Component error={this.state.error} reset={this.reset} />;
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 0f2e76fb8..f97d9c7ff 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -51,6 +51,7 @@ export async function renderHtml(
 
   // use unique id for each render to simplify ssr module invalidation during dev
   // (see src/lib/ssr.tsx for details)
+  // TODO: ssrId?
   const renderId = Math.random().toString(36).slice(2);
 
   // TODO: stream more lazily?

From 8702d79c30ac2cec129228412c0a8648ec6c0c40 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 12:41:14 +0900
Subject: [PATCH 08/37] wip: two-pass SSR for error re-rendering

---
 .../basic/src/routes/test/error/_client.tsx   | 11 ++++---
 packages/react-server/package.json            |  4 +++
 packages/react-server/src/entry/server.tsx    | 30 ++++++++++++++-----
 packages/react-server/src/internal.ts         |  2 ++
 packages/react-server/src/lib/global.ts       |  5 +++-
 packages/react-server/tsup.config.ts          |  1 +
 6 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 packages/react-server/src/internal.ts

diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
index 9a9718732..864c08eea 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { __global } from "@hiogawa/react-server/internal";
 import React from "react";
 
 // TOOD: for now, experiment inside demo
@@ -32,13 +33,11 @@ export class ErrorBoundary extends React.Component<
     // __global.ssrContext[props.ssrId]
     // TODO: how to know where the error is from?
     //       track SSR of all error boundaries and whether?
-    if (import.meta.env.SSR) {
-    }
-    // import.meta.env.SSR
-
-    if (this.state.error) {
+    const error = import.meta.env.SSR ? __global.ssrError : this.state.error;
+    console.log("[ErrorBoundary.render]", { error });
+    if (error) {
       const Component = this.props.errorComponent;
-      return <Component error={this.state.error} reset={this.reset} />;
+      return <Component error={error} reset={this.reset} />;
     }
     return this.props.children;
   }
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
index 3aa34bdd4..1c1bede7c 100644
--- a/packages/react-server/package.json
+++ b/packages/react-server/package.json
@@ -8,6 +8,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./internal": {
+      "types": "./dist/internal.d.ts",
+      "default": "./dist/internal.js"
+    },
     "./client": {
       "types": "./dist/client.d.ts",
       "default": "./dist/client.js"
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index f97d9c7ff..80f34f1ef 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -1,4 +1,4 @@
-import { splitFirst } from "@hiogawa/utils";
+import { splitFirst, tinyassert } from "@hiogawa/utils";
 import reactDomServer from "react-dom/server.edge";
 import { injectRSCPayload } from "rsc-html-stream/server";
 import { __global } from "../lib/global";
@@ -73,13 +73,27 @@ export async function renderHtml(
   }
   const assets = (await import("virtual:ssr-assets" as string)).default;
 
-  // TODO: two pass render on error?
-  const ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
-    bootstrapModules: assets.bootstrapModules,
-    onError(error, errorInfo) {
-      console.log("[renderToReadableStream]", { error, errorInfo });
-    },
-  });
+  // two pass SSR to re-render on error
+  let ssrStream: ReadableStream<Uint8Array>;
+  try {
+    delete __global.ssrError;
+    ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
+      bootstrapModules: assets.bootstrapModules,
+      onError(error, errorInfo) {
+        console.log("[renderToReadableStream]", { error, errorInfo });
+      },
+    });
+  } catch (e) {
+    // TODO: http status
+    tinyassert(e instanceof Error);
+    __global.ssrError = e;
+    ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
+      bootstrapModules: assets.bootstrapModules,
+      onError(error, errorInfo) {
+        console.log("[renderToReadableStream]", { error, errorInfo });
+      },
+    });
+  }
 
   return ssrStream
     .pipeThrough(invalidateImportCacheOnFinish(renderId))
diff --git a/packages/react-server/src/internal.ts b/packages/react-server/src/internal.ts
new file mode 100644
index 000000000..702de4ee8
--- /dev/null
+++ b/packages/react-server/src/internal.ts
@@ -0,0 +1,2 @@
+// expose for quick experimentation
+export { __global } from "./lib/global";
diff --git a/packages/react-server/src/lib/global.ts b/packages/react-server/src/lib/global.ts
index 379182f1a..0f91abb64 100644
--- a/packages/react-server/src/lib/global.ts
+++ b/packages/react-server/src/lib/global.ts
@@ -4,9 +4,12 @@ import type { CallServerCallback } from "./types";
 // centeralize quick global escape hatch...
 
 export const __global: {
-  callServer: CallServerCallback;
   dev: {
     server: ViteDevServer;
     reactServer: ViteDevServer;
   };
+  callServer: CallServerCallback;
+  // TODO: isolate by renderId
+  // TODO: track which error boundary to enable on 2nd pass
+  ssrError?: Error;
 } = ((globalThis as any).__REACT_SERVER_GLOBAL ??= {});
diff --git a/packages/react-server/tsup.config.ts b/packages/react-server/tsup.config.ts
index 7e2c36cb1..09a43c085 100644
--- a/packages/react-server/tsup.config.ts
+++ b/packages/react-server/tsup.config.ts
@@ -4,6 +4,7 @@ export default defineConfig([
   {
     entry: [
       "src/index.ts",
+      "src/internal.ts",
       "src/server.ts",
       "src/server-internal.ts",
       "src/client.tsx",

From 89fbfadfccb3ee37f53aeb363b2b0e77c3973c5c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 12:50:44 +0900
Subject: [PATCH 09/37] wip: full CSR fallback

---
 packages/react-server/src/entry/browser.tsx | 28 ++++++++++++++++-----
 packages/react-server/src/entry/server.tsx  | 11 +++++++-
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/react-server/src/entry/browser.tsx b/packages/react-server/src/entry/browser.tsx
index 84b4d9348..92982089e 100644
--- a/packages/react-server/src/entry/browser.tsx
+++ b/packages/react-server/src/entry/browser.tsx
@@ -72,12 +72,21 @@ export async function start() {
     return React.use(rsc);
   }
 
-  reactDomClient.hydrateRoot(
-    document,
-    <React.StrictMode>
-      <Root />
-    </React.StrictMode>,
-  );
+  // TODO: no hydration on SSR error
+  if (1) {
+    reactDomClient.createRoot(document).render(
+      <React.StrictMode>
+        <Root />
+      </React.StrictMode>,
+    );
+  } else {
+    reactDomClient.hydrateRoot(
+      document,
+      <React.StrictMode>
+        <Root />
+      </React.StrictMode>,
+    );
+  }
 
   // custom event for RSC reload
   if (import.meta.hot) {
@@ -87,3 +96,10 @@ export async function start() {
     });
   }
 }
+
+declare module "react-dom/client" {
+  // TODO: full document CSR works?
+  interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS {
+    Document: Document;
+  }
+}
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 80f34f1ef..ffc141c1d 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -87,7 +87,16 @@ export async function renderHtml(
     // TODO: http status
     tinyassert(e instanceof Error);
     __global.ssrError = e;
-    ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
+    // pick root layout as fallback?
+    const fallback = (
+      <html>
+        <head>
+          <meta charSet="UTF-8" />
+        </head>
+        <body></body>
+      </html>
+    );
+    ssrStream = await reactDomServer.renderToReadableStream(fallback, {
       bootstrapModules: assets.bootstrapModules,
       onError(error, errorInfo) {
         console.log("[renderToReadableStream]", { error, errorInfo });

From 5a2bd005dc98d51eba8e8ef066d66930e1cfb529 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 14:24:18 +0900
Subject: [PATCH 10/37] chore: cleanup

---
 .../basic/src/routes/test/error/_client.tsx   | 11 ++------
 packages/react-server/src/entry/browser.tsx   |  6 ++---
 packages/react-server/src/entry/server.tsx    | 26 ++++++++-----------
 packages/react-server/src/lib/global.ts       |  3 ---
 4 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
index 864c08eea..932148c98 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { __global } from "@hiogawa/react-server/internal";
 import React from "react";
 
 // TOOD: for now, experiment inside demo
@@ -29,15 +28,9 @@ export class ErrorBoundary extends React.Component<
   };
 
   override render() {
-    // SSR context to pick up error from 1st pass in 2nd pass?
-    // __global.ssrContext[props.ssrId]
-    // TODO: how to know where the error is from?
-    //       track SSR of all error boundaries and whether?
-    const error = import.meta.env.SSR ? __global.ssrError : this.state.error;
-    console.log("[ErrorBoundary.render]", { error });
-    if (error) {
+    if (this.state.error) {
       const Component = this.props.errorComponent;
-      return <Component error={error} reset={this.reset} />;
+      return <Component error={this.state.error} reset={this.reset} />;
     }
     return this.props.children;
   }
diff --git a/packages/react-server/src/entry/browser.tsx b/packages/react-server/src/entry/browser.tsx
index 92982089e..2960675aa 100644
--- a/packages/react-server/src/entry/browser.tsx
+++ b/packages/react-server/src/entry/browser.tsx
@@ -72,8 +72,8 @@ export async function start() {
     return React.use(rsc);
   }
 
-  // TODO: no hydration on SSR error
-  if (1) {
+  // full client render on SSR error
+  if (document.documentElement.dataset["noHydate"]) {
     reactDomClient.createRoot(document).render(
       <React.StrictMode>
         <Root />
@@ -98,7 +98,7 @@ export async function start() {
 }
 
 declare module "react-dom/client" {
-  // TODO: full document CSR works?
+  // TODO: full document CSR works fine?
   interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS {
     Document: Document;
   }
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index ffc141c1d..6ec40360f 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -1,4 +1,4 @@
-import { splitFirst, tinyassert } from "@hiogawa/utils";
+import { splitFirst } from "@hiogawa/utils";
 import reactDomServer from "react-dom/server.edge";
 import { injectRSCPayload } from "rsc-html-stream/server";
 import { __global } from "../lib/global";
@@ -54,7 +54,7 @@ export async function renderHtml(
   // TODO: ssrId?
   const renderId = Math.random().toString(36).slice(2);
 
-  // TODO: stream more lazily?
+  // TODO: Reac.use promise?
   const rscNode = await reactServerDomClient.createFromReadableStream(
     rscStream1,
     {
@@ -76,31 +76,27 @@ export async function renderHtml(
   // two pass SSR to re-render on error
   let ssrStream: ReadableStream<Uint8Array>;
   try {
-    delete __global.ssrError;
     ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
       bootstrapModules: assets.bootstrapModules,
       onError(error, errorInfo) {
-        console.log("[renderToReadableStream]", { error, errorInfo });
+        console.log("[renderToReadableStream(rsc)]", { error, errorInfo });
       },
     });
   } catch (e) {
-    // TODO: http status
-    tinyassert(e instanceof Error);
-    __global.ssrError = e;
-    // pick root layout as fallback?
-    const fallback = (
-      <html>
+    // render empty as error fallback and
+    // let browser render full CSR instead of hydration
+    // which will reply client error boudnary from RSC error
+    // TODO: proper two-pass SSR with error route tracking?
+    const errorRoot = (
+      <html data-no-hydate>
         <head>
-          <meta charSet="UTF-8" />
+          <meta charSet="utf-8" />
         </head>
         <body></body>
       </html>
     );
-    ssrStream = await reactDomServer.renderToReadableStream(fallback, {
+    ssrStream = await reactDomServer.renderToReadableStream(errorRoot, {
       bootstrapModules: assets.bootstrapModules,
-      onError(error, errorInfo) {
-        console.log("[renderToReadableStream]", { error, errorInfo });
-      },
     });
   }
 
diff --git a/packages/react-server/src/lib/global.ts b/packages/react-server/src/lib/global.ts
index 0f91abb64..372c41e04 100644
--- a/packages/react-server/src/lib/global.ts
+++ b/packages/react-server/src/lib/global.ts
@@ -9,7 +9,4 @@ export const __global: {
     reactServer: ViteDevServer;
   };
   callServer: CallServerCallback;
-  // TODO: isolate by renderId
-  // TODO: track which error boundary to enable on 2nd pass
-  ssrError?: Error;
 } = ((globalThis as any).__REACT_SERVER_GLOBAL ??= {});

From ca4d25967336c8794d5352f3f7e85f6511162359 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 14:47:40 +0900
Subject: [PATCH 11/37] wip: auto error boundary reset on url change

---
 .../basic/src/routes/test/error/_client.tsx   | 32 +++++++++++++------
 .../basic/src/routes/test/error/error.tsx     | 16 ++--------
 .../basic/src/routes/test/error/layout.tsx    |  4 +--
 packages/react-server/src/entry/server.tsx    |  1 -
 4 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
index 932148c98..a8cd22ea8 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
@@ -4,25 +4,39 @@ import React from "react";
 
 // TOOD: for now, experiment inside demo
 
+interface Props {
+  children?: React.ReactNode;
+  errorComponent: React.FC<any>;
+  url: string;
+}
+
+interface State {
+  error: Error | null;
+  url: string;
+}
+
 // cf.
 // https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
 // https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
-export class ErrorBoundary extends React.Component<
-  {
-    children?: React.ReactNode;
-    errorComponent: React.FC<any>;
-  },
-  { error: Error | null }
-> {
-  constructor(props: any) {
+export class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
-    this.state = { error: null };
+    this.state = { error: null, url: props.url };
   }
 
   static getDerivedStateFromError(error: Error) {
     return { error };
   }
 
+  // automatically reset on url change
+  static getDerivedStateFromProps(props: Props, state: State): State {
+    state = { ...state };
+    if (props.url !== state.url) {
+      state.error = null;
+    }
+    return { ...state, url: props.url };
+  }
+
   reset = () => {
     this.setState({ error: null });
   };
diff --git a/packages/react-server/examples/basic/src/routes/test/error/error.tsx b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
index 7d8faacc8..8eaa19835 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/error.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
@@ -1,20 +1,8 @@
 "use client";
 
-import { Link, __history } from "@hiogawa/react-server/client";
-import type { ErrorRouteProps } from "@hiogawa/react-server/server";
-import React from "react";
-
-export default function ErrorPage(props: ErrorRouteProps) {
-  React.useEffect(() => {
-    // reset on route change.
-    // TODO: subscribe to browser entry re-render?
-    return __history.subscribe(() => {
-      React.startTransition(() => {
-        props.reset();
-      });
-    });
-  }, []);
+import { Link } from "@hiogawa/react-server/client";
 
+export default function ErrorPage() {
   return (
     <div className="flex flex-col items-start gap-2">
       <h3>[Error Page]</h3>
diff --git a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
index 54ea9c07a..95a4eeb17 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
@@ -6,8 +6,8 @@ export default function Layout(props: LayoutRouteProps) {
   return (
     <div className="flex flex-col items-start gap-2">
       <h3>[Layout]</h3>
-      {/* TODO: need two-pass render to catch SSR error? (cf. packages/vite-glob-routes/examples/demo/src/server/ssr.tsx) */}
-      <ErrorBoundary errorComponent={ErrorPage}>
+      <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>
+        {/* TODO: need to wrap with dom? */}
         <div>{props.children}</div>
       </ErrorBoundary>
     </div>
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 6ec40360f..37d0a876a 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -51,7 +51,6 @@ export async function renderHtml(
 
   // use unique id for each render to simplify ssr module invalidation during dev
   // (see src/lib/ssr.tsx for details)
-  // TODO: ssrId?
   const renderId = Math.random().toString(36).slice(2);
 
   // TODO: Reac.use promise?

From 57d4d7fc3cd379cbd33c2753ae23f99c65ed1eac Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 14:59:36 +0900
Subject: [PATCH 12/37] wip: status code

---
 packages/react-server/src/entry/server.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 37d0a876a..322504966 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -19,9 +19,9 @@ export async function handler(request: Request): Promise<Response> {
   }
 
   // ssr rsc
-  const htmlStream = await renderHtml(result.stream);
-  return new Response(htmlStream, {
-    status: result.status,
+  const ssrResult = await renderHtml(result.stream);
+  return new Response(ssrResult.htmlStream, {
+    status: ssrResult.status,
     headers: {
       "content-type": "text/html",
     },
@@ -38,9 +38,7 @@ export async function importReactServer(): Promise<
   }
 }
 
-export async function renderHtml(
-  rscStream: ReadableStream,
-): Promise<ReadableStream> {
+export async function renderHtml(rscStream: ReadableStream) {
   await initDomWebpackSsr();
 
   const { default: reactServerDomClient } = await import(
@@ -74,6 +72,7 @@ export async function renderHtml(
 
   // two pass SSR to re-render on error
   let ssrStream: ReadableStream<Uint8Array>;
+  let status = 200;
   try {
     ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
       bootstrapModules: assets.bootstrapModules,
@@ -97,14 +96,17 @@ export async function renderHtml(
     ssrStream = await reactDomServer.renderToReadableStream(errorRoot, {
       bootstrapModules: assets.bootstrapModules,
     });
+    status = 500;
   }
 
-  return ssrStream
+  const htmlStream = ssrStream
     .pipeThrough(invalidateImportCacheOnFinish(renderId))
     .pipeThrough(new TextDecoderStream())
     .pipeThrough(injectToHead(assets.head))
     .pipeThrough(new TextEncoderStream())
     .pipeThrough(injectRSCPayload(rscStream2));
+
+  return { htmlStream, status };
 }
 
 function injectToHead(data: string) {

From 42343ee2983638e4b9ad73e8133d7de3482f2d9e Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 16:22:27 +0900
Subject: [PATCH 13/37] feat: handle status code

---
 .../examples/basic/src/routes/test/error.tsx  | 13 +++++++++++
 .../basic/src/routes/test/error/_client.tsx   | 15 ++++++++++---
 .../basic/src/routes/test/error/error.tsx     | 14 ------------
 .../basic/src/routes/test/error/layout.tsx    | 15 -------------
 .../basic/src/routes/test/error/page.tsx      | 22 +++----------------
 .../examples/basic/src/routes/test/layout.tsx |  9 ++++++--
 .../react-server/src/entry/react-server.tsx   |  6 +----
 packages/react-server/src/entry/server.tsx    |  8 +++++--
 packages/react-server/src/index.ts            |  3 +--
 packages/react-server/src/lib/error.tsx       | 11 ++++++++++
 packages/react-server/src/lib/router.tsx      |  9 ++++++--
 11 files changed, 61 insertions(+), 64 deletions(-)
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error.tsx
 delete mode 100644 packages/react-server/examples/basic/src/routes/test/error/error.tsx
 delete mode 100644 packages/react-server/examples/basic/src/routes/test/error/layout.tsx
 create mode 100644 packages/react-server/src/lib/error.tsx

diff --git a/packages/react-server/examples/basic/src/routes/test/error.tsx b/packages/react-server/examples/basic/src/routes/test/error.tsx
new file mode 100644
index 000000000..b226827bd
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import type { ErrorRouteProps } from "@hiogawa/react-server/server";
+
+export default function ErrorPage(props: ErrorRouteProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <h4>ErrorPage</h4>
+      <div>status: {props.status}</div>
+      <div>message: {props.error.message}</div>
+    </div>
+  );
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
index a8cd22ea8..e6377eba5 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
@@ -1,12 +1,14 @@
 "use client";
 
+import { getErrorStatus } from "@hiogawa/react-server";
+import { type ErrorRouteProps } from "@hiogawa/react-server/server";
 import React from "react";
 
 // TOOD: for now, experiment inside demo
 
 interface Props {
   children?: React.ReactNode;
-  errorComponent: React.FC<any>;
+  errorComponent: React.FC<ErrorRouteProps>;
   url: string;
 }
 
@@ -44,8 +46,15 @@ export class ErrorBoundary extends React.Component<Props, State> {
   override render() {
     if (this.state.error) {
       const Component = this.props.errorComponent;
-      return <Component error={this.state.error} reset={this.reset} />;
+      return (
+        <Component
+          error={this.state.error}
+          status={getErrorStatus(this.state.error) ?? 500}
+          reset={this.reset}
+        />
+      );
     }
-    return this.props.children;
+    // TODO: need to be wrapped with dom?
+    return <div>{this.props.children}</div>;
   }
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/error/error.tsx b/packages/react-server/examples/basic/src/routes/test/error/error.tsx
deleted file mode 100644
index 8eaa19835..000000000
--- a/packages/react-server/examples/basic/src/routes/test/error/error.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-"use client";
-
-import { Link } from "@hiogawa/react-server/client";
-
-export default function ErrorPage() {
-  return (
-    <div className="flex flex-col items-start gap-2">
-      <h3>[Error Page]</h3>
-      <Link className="antd-btn antd-btn-default px-2" href="/test/error">
-        Reset!
-      </Link>
-    </div>
-  );
-}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
deleted file mode 100644
index 95a4eeb17..000000000
--- a/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { LayoutRouteProps } from "@hiogawa/react-server/server";
-import { ErrorBoundary } from "./_client";
-import ErrorPage from "./error";
-
-export default function Layout(props: LayoutRouteProps) {
-  return (
-    <div className="flex flex-col items-start gap-2">
-      <h3>[Layout]</h3>
-      <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>
-        {/* TODO: need to wrap with dom? */}
-        <div>{props.children}</div>
-      </ErrorBoundary>
-    </div>
-  );
-}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
index e0289e34c..425443fe5 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
@@ -1,20 +1,4 @@
-import { Link } from "@hiogawa/react-server/client";
-import type { PageRouteProps } from "@hiogawa/react-server/server";
-import { sleep } from "@hiogawa/utils";
-
-export default async function Page(props: PageRouteProps) {
-  await sleep(200);
-  const url = new URL(props.request.url);
-  if (url.searchParams.has("crash")) {
-    // TODO: not caught on SSR. need suspense?
-    throw new Error("crash!");
-  }
-  return (
-    <div className="flex flex-col items-start gap-2">
-      <h3>[Normal Page]</h3>
-      <Link className="antd-btn antd-btn-default px-2" href="/test/error?crash">
-        Crash!
-      </Link>
-    </div>
-  );
+export default async function Page() {
+  throw new Error("boom!");
+  return <></>;
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/layout.tsx b/packages/react-server/examples/basic/src/routes/test/layout.tsx
index e0c1137c8..e048e6189 100644
--- a/packages/react-server/examples/basic/src/routes/test/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/layout.tsx
@@ -1,7 +1,10 @@
+import type { LayoutRouteProps } from "@hiogawa/react-server/server";
 import { NavMenu } from "../../components/nav-menu";
 import { Hydrated } from "./_client";
+import ErrorPage from "./error";
+import { ErrorBoundary } from "./error/_client";
 
-export default async function Layout(props: React.PropsWithChildren) {
+export default async function Layout(props: LayoutRouteProps) {
   return (
     <div className="flex flex-col gap-2">
       <h2 className="text-lg">Test</h2>
@@ -22,7 +25,9 @@ export default async function Layout(props: React.PropsWithChildren) {
         <input className="antd-input px-2" placeholder="test-input" />
         <Hydrated />
       </div>
-      {props.children}
+      <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>
+        {props.children}
+      </ErrorBoundary>
     </div>
   );
 }
diff --git a/packages/react-server/src/entry/react-server.tsx b/packages/react-server/src/entry/react-server.tsx
index 0f57083c1..327cd04fc 100644
--- a/packages/react-server/src/entry/react-server.tsx
+++ b/packages/react-server/src/entry/react-server.tsx
@@ -84,11 +84,7 @@ function createRouter() {
   async function run(request: Request) {
     const url = new URL(request.url);
     const match = matchRoute(url.pathname, tree);
-    const node = await renderMatchRoute(
-      { request, match },
-      // TODO: default error page?
-      <div>Not Found: {url.pathname}</div>,
-    );
+    const node = await renderMatchRoute({ request, match });
     return { node, match };
   }
 
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 322504966..80b721df8 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -1,6 +1,8 @@
 import { splitFirst } from "@hiogawa/utils";
 import reactDomServer from "react-dom/server.edge";
 import { injectRSCPayload } from "rsc-html-stream/server";
+import { getErrorStatus } from "..";
+import { debug } from "../lib/debug";
 import { __global } from "../lib/global";
 import {
   createModuleMap,
@@ -77,7 +79,8 @@ export async function renderHtml(rscStream: ReadableStream) {
     ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
       bootstrapModules: assets.bootstrapModules,
       onError(error, errorInfo) {
-        console.log("[renderToReadableStream(rsc)]", { error, errorInfo });
+        // TODO: there's still error log from somewhere?
+        debug.ssr("renderToReadableStream", { error, errorInfo });
       },
     });
   } catch (e) {
@@ -85,6 +88,7 @@ export async function renderHtml(rscStream: ReadableStream) {
     // let browser render full CSR instead of hydration
     // which will reply client error boudnary from RSC error
     // TODO: proper two-pass SSR with error route tracking?
+    // TODO: meta tag system
     const errorRoot = (
       <html data-no-hydate>
         <head>
@@ -96,7 +100,7 @@ export async function renderHtml(rscStream: ReadableStream) {
     ssrStream = await reactDomServer.renderToReadableStream(errorRoot, {
       bootstrapModules: assets.bootstrapModules,
     });
-    status = 500;
+    status = (e instanceof Error && getErrorStatus(e)) || 500;
   }
 
   const htmlStream = ssrStream
diff --git a/packages/react-server/src/index.ts b/packages/react-server/src/index.ts
index cad780b7e..c5b5d631f 100644
--- a/packages/react-server/src/index.ts
+++ b/packages/react-server/src/index.ts
@@ -1,2 +1 @@
-// TODO: what to export?
-export {};
+export { createError, getErrorStatus } from "./lib/error";
diff --git a/packages/react-server/src/lib/error.tsx b/packages/react-server/src/lib/error.tsx
new file mode 100644
index 000000000..7343dd523
--- /dev/null
+++ b/packages/react-server/src/lib/error.tsx
@@ -0,0 +1,11 @@
+// TODO: rsc stream doesn't keep "digest"?
+//       for now, we just use Error.message
+export function createError(status: number): Error {
+  const digest = `__REACT_SERVER_ERROR__:${status}`;
+  return Object.assign(new Error(digest), { digest });
+}
+
+export function getErrorStatus(error: Error): number | undefined {
+  const m = error.message.match(/^__REACT_SERVER_ERROR__:(\d\d\d)$/);
+  return m && m[1] ? Number(m[1]) : undefined;
+}
diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index 543de09dd..af0565eb8 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -1,5 +1,6 @@
 import { objectHas, tinyassert } from "@hiogawa/utils";
 import React from "react";
+import { createError } from "./error";
 
 // cf. https://nextjs.org/docs/app/building-your-application/routing#file-conventions
 interface RouteEntry {
@@ -73,7 +74,6 @@ export function matchRoute(
 // TODO: separate react code in a different file
 export async function renderMatchRoute(
   props: RouteProps,
-  fallback: React.ReactNode,
 ): Promise<React.ReactNode> {
   // let clientLib: typeof import("../client-internal");
   // if (import.meta.env.DEV) {
@@ -93,7 +93,7 @@ export async function renderMatchRoute(
 
   const nodes = [...props.match.nodes].reverse();
 
-  let acc: React.ReactNode = fallback;
+  let acc: React.ReactNode = <ThrowNotFound />;
   if (!props.match.notFound) {
     // TODO: assert?
     const Page = nodes[0]?.value?.page?.default;
@@ -114,6 +114,10 @@ export async function renderMatchRoute(
   return acc;
 }
 
+const ThrowNotFound: React.FC = () => {
+  throw createError(404);
+};
+
 interface RouteProps {
   request: Request;
   match: MatchRouteResult;
@@ -123,6 +127,7 @@ export interface PageRouteProps extends RouteProps {}
 
 export interface ErrorRouteProps {
   error: Error;
+  status: number;
   reset: () => void;
 }
 

From 62c5e19d02479f25a4e6c3c497bc4227495cffbc Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 16:32:28 +0900
Subject: [PATCH 14/37] refactor: unused

---
 packages/react-server/src/entry/react-server.tsx | 7 +++----
 packages/react-server/src/lib/router.tsx         | 6 ++++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-server/src/entry/react-server.tsx b/packages/react-server/src/entry/react-server.tsx
index 327cd04fc..6a7c07eba 100644
--- a/packages/react-server/src/entry/react-server.tsx
+++ b/packages/react-server/src/entry/react-server.tsx
@@ -18,7 +18,6 @@ export type ReactServerHandlerResult =
   | Response
   | {
       stream: ReadableStream<Uint8Array>;
-      status: number;
     };
 
 export const handler: ReactServerHandler = async ({ request }) => {
@@ -36,7 +35,7 @@ export const handler: ReactServerHandler = async ({ request }) => {
   const rscOnlyRequest = unwrapRscRequest(request);
 
   // rsc
-  const { stream, status } = await render({
+  const { stream } = await render({
     request: rscOnlyRequest ?? request,
   });
   if (rscOnlyRequest) {
@@ -47,7 +46,7 @@ export const handler: ReactServerHandler = async ({ request }) => {
     });
   }
 
-  return { stream, status };
+  return { stream };
 };
 
 //
@@ -60,7 +59,7 @@ async function render({ request }: { request: Request }) {
     result.node,
     createBundlerConfig(),
   );
-  return { stream, status: result.match.notFound ? 404 : 200 };
+  return { stream };
 }
 
 //
diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index af0565eb8..78feae919 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -103,9 +103,11 @@ export async function renderMatchRoute(
   }
 
   for (const node of nodes) {
-    const Layout = node.value?.layout?.default;
-    if (node.value?.error) {
+    const ErrorPage = node.value?.error?.default;
+    if (ErrorPage) {
+      // acc = <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>{acc}</ErrorBoundary>
     }
+    const Layout = node.value?.layout?.default;
     if (Layout) {
       acc = <Layout {...props}>{acc}</Layout>;
     }

From 81257605099d662c1ed9bd4bf059605c4850b1f9 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 16:47:19 +0900
Subject: [PATCH 15/37] test: e2e

---
 .../examples/basic/e2e/basic.test.ts          | 19 +++++++++++++++----
 .../react-server/examples/basic/e2e/helper.ts |  1 +
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index 01278bef0..559f5a6b7 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -25,12 +25,23 @@ test("navigation", async ({ page }) => {
   await checkClientState();
 });
 
-test("404", async ({ page }) => {
-  checkNoError(page);
-
+test.only("error", async ({ page }) => {
   const res = await page.goto("/test/not-found");
   expect(res?.status()).toBe(404);
-  await page.getByText("Not Found: /test/not-found").click();
+
+  await page.getByText("hydrated: true").click();
+  await page.getByText("status: 404").click();
+
+  const checkClientState = await setupCheckClientState(page);
+
+  await page.getByRole("link", { name: "/test/error" }).click();
+  await page.getByText("status: 500").click();
+  await page.getByText("message: boom!").click();
+
+  await page.getByRole("link", { name: "/test/other" }).click();
+  await page.getByRole("heading", { name: "Other Page" }).click();
+
+  await checkClientState();
 });
 
 test("rsc hmr @dev", async ({ page }) => {
diff --git a/packages/react-server/examples/basic/e2e/helper.ts b/packages/react-server/examples/basic/e2e/helper.ts
index 3eec8fed6..7579e582c 100644
--- a/packages/react-server/examples/basic/e2e/helper.ts
+++ b/packages/react-server/examples/basic/e2e/helper.ts
@@ -4,6 +4,7 @@ import test, { type Page, expect } from "@playwright/test";
 export function checkNoError(page: Page) {
   const pageErrors: Error[] = [];
   page.on("pageerror", (e) => pageErrors.push(e));
+  // TODO: how to slow immediately in test?
   page.on("close", () => expect(pageErrors).toEqual([]));
 }
 

From 783e986c0b67063b406ea3f0abe89fcba1732ac3 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 16:47:43 +0900
Subject: [PATCH 16/37] test: no only

---
 packages/react-server/examples/basic/e2e/basic.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index 559f5a6b7..d2dfa0a55 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -25,7 +25,7 @@ test("navigation", async ({ page }) => {
   await checkClientState();
 });
 
-test.only("error", async ({ page }) => {
+test("error", async ({ page }) => {
   const res = await page.goto("/test/not-found");
   expect(res?.status()).toBe(404);
 

From 3c3813f1c04b75ab2e1532e4cd1488b295a891b6 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 18:46:43 +0900
Subject: [PATCH 17/37] fix: handle RSC render error digest

---
 .../examples/basic/e2e/basic.test.ts          |  5 +--
 .../examples/basic/src/routes/test/error.tsx  |  6 ++-
 .../basic/src/routes/test/error/_client.tsx   |  9 ++--
 .../react-server/src/entry/react-server.tsx   | 15 +++++++
 packages/react-server/src/entry/server.tsx    |  4 +-
 packages/react-server/src/index.ts            |  2 +-
 packages/react-server/src/lib/debug.ts        |  7 ++-
 packages/react-server/src/lib/error.tsx       | 43 +++++++++++++++----
 packages/react-server/src/lib/router.tsx      |  6 +--
 packages/react-server/src/lib/types-env.d.ts  |  4 +-
 10 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index d2dfa0a55..0656ee525 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -30,13 +30,12 @@ test("error", async ({ page }) => {
   expect(res?.status()).toBe(404);
 
   await page.getByText("hydrated: true").click();
-  await page.getByText("status: 404").click();
+  await page.getByText(`server error: {"status":404}`).click();
 
   const checkClientState = await setupCheckClientState(page);
 
   await page.getByRole("link", { name: "/test/error" }).click();
-  await page.getByText("status: 500").click();
-  await page.getByText("message: boom!").click();
+  await page.getByText(`server error: {"status":500}`).click();
 
   await page.getByRole("link", { name: "/test/other" }).click();
   await page.getByRole("heading", { name: "Other Page" }).click();
diff --git a/packages/react-server/examples/basic/src/routes/test/error.tsx b/packages/react-server/examples/basic/src/routes/test/error.tsx
index b226827bd..6538d8f1b 100644
--- a/packages/react-server/examples/basic/src/routes/test/error.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error.tsx
@@ -6,8 +6,10 @@ export default function ErrorPage(props: ErrorRouteProps) {
   return (
     <div className="flex flex-col gap-2">
       <h4>ErrorPage</h4>
-      <div>status: {props.status}</div>
-      <div>message: {props.error.message}</div>
+      <div>
+        server error:{" "}
+        {props.serverError ? JSON.stringify(props.serverError) : "(N/A)"}
+      </div>
     </div>
   );
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
index e6377eba5..ce6c1961a 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
@@ -44,17 +44,18 @@ export class ErrorBoundary extends React.Component<Props, State> {
   };
 
   override render() {
-    if (this.state.error) {
+    const error = this.state.error;
+    if (error) {
       const Component = this.props.errorComponent;
       return (
         <Component
-          error={this.state.error}
-          status={getErrorStatus(this.state.error) ?? 500}
+          error={error}
+          serverError={getErrorStatus(error)}
           reset={this.reset}
         />
       );
     }
-    // TODO: need to be wrapped with dom?
+    // TODO: why need to be wrapped with dom?
     return <div>{this.props.children}</div>;
   }
 }
diff --git a/packages/react-server/src/entry/react-server.tsx b/packages/react-server/src/entry/react-server.tsx
index 6a7c07eba..30d8c899c 100644
--- a/packages/react-server/src/entry/react-server.tsx
+++ b/packages/react-server/src/entry/react-server.tsx
@@ -1,5 +1,7 @@
 import { objectMapKeys } from "@hiogawa/utils";
 import reactServerDomServer from "react-server-dom-webpack/server.edge";
+import { debug } from "../lib/debug";
+import { ReactServerDigestError, createError } from "../lib/error";
 import { __global } from "../lib/global";
 import { generateRouteTree, matchRoute, renderMatchRoute } from "../lib/router";
 import { createBundlerConfig } from "../lib/rsc";
@@ -58,6 +60,19 @@ async function render({ request }: { request: Request }) {
   const stream = reactServerDomServer.renderToReadableStream(
     result.node,
     createBundlerConfig(),
+    {
+      onError(error, errorInfo) {
+        debug.rsc("[reactServerDomServer.renderToReadableStream]", {
+          error,
+          errorInfo,
+        });
+        const serverError =
+          error instanceof ReactServerDigestError
+            ? error
+            : createError({ status: 500 });
+        return serverError.digest;
+      },
+    },
   );
   return { stream };
 }
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 80b721df8..1e966b68c 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -79,7 +79,7 @@ export async function renderHtml(rscStream: ReadableStream) {
     ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
       bootstrapModules: assets.bootstrapModules,
       onError(error, errorInfo) {
-        // TODO: there's still error log from somewhere?
+        // TODO: should handle SSR error which is not RSC error?
         debug.ssr("renderToReadableStream", { error, errorInfo });
       },
     });
@@ -100,7 +100,7 @@ export async function renderHtml(rscStream: ReadableStream) {
     ssrStream = await reactDomServer.renderToReadableStream(errorRoot, {
       bootstrapModules: assets.bootstrapModules,
     });
-    status = (e instanceof Error && getErrorStatus(e)) || 500;
+    status = getErrorStatus(e)?.status ?? 500;
   }
 
   const htmlStream = ssrStream
diff --git a/packages/react-server/src/index.ts b/packages/react-server/src/index.ts
index c5b5d631f..edf4971c1 100644
--- a/packages/react-server/src/index.ts
+++ b/packages/react-server/src/index.ts
@@ -1 +1 @@
-export { createError, getErrorStatus } from "./lib/error";
+export { createError, getErrorContext as getErrorStatus } from "./lib/error";
diff --git a/packages/react-server/src/lib/debug.ts b/packages/react-server/src/lib/debug.ts
index 360bbf58a..534d5807e 100644
--- a/packages/react-server/src/lib/debug.ts
+++ b/packages/react-server/src/lib/debug.ts
@@ -35,4 +35,9 @@ type Debug<K extends string> = ((...args: unknown[]) => void) & {
   [k in K]: (...args: unknown[]) => void;
 };
 
-export const debug = createDebug("react-server", ["plugin", "ssr", "browser"]);
+export const debug = createDebug("react-server", [
+  "plugin",
+  "ssr",
+  "rsc",
+  "browser",
+]);
diff --git a/packages/react-server/src/lib/error.tsx b/packages/react-server/src/lib/error.tsx
index 7343dd523..5ea946d96 100644
--- a/packages/react-server/src/lib/error.tsx
+++ b/packages/react-server/src/lib/error.tsx
@@ -1,11 +1,38 @@
-// TODO: rsc stream doesn't keep "digest"?
-//       for now, we just use Error.message
-export function createError(status: number): Error {
-  const digest = `__REACT_SERVER_ERROR__:${status}`;
-  return Object.assign(new Error(digest), { digest });
+import { debug } from "./debug";
+
+// TODO: allow including arbitrary data?
+// TODO: accomodate redirection error convention?
+export interface ReactServerErrorContext {
+  status: number;
+}
+
+export class ReactServerDigestError extends Error {
+  constructor(public digest: string) {
+    super("ReactServerError");
+  }
+}
+
+export function createError(ctx: ReactServerErrorContext) {
+  const digest = `__REACT_SERVER_ERROR__:${JSON.stringify(ctx)}`;
+  return new ReactServerDigestError(digest);
 }
 
-export function getErrorStatus(error: Error): number | undefined {
-  const m = error.message.match(/^__REACT_SERVER_ERROR__:(\d\d\d)$/);
-  return m && m[1] ? Number(m[1]) : undefined;
+export function getErrorContext(
+  error: unknown,
+): ReactServerErrorContext | undefined {
+  if (
+    error instanceof Error &&
+    "digest" in error &&
+    typeof error.digest === "string"
+  ) {
+    const m = error.digest.match(/^__REACT_SERVER_ERROR__:(.*)$/);
+    if (m && m[1]) {
+      try {
+        return JSON.parse(m[1]);
+      } catch (e) {
+        debug("[getErrorContext]", e);
+      }
+    }
+  }
+  return;
 }
diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index 78feae919..52bc275f5 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -1,6 +1,6 @@
 import { objectHas, tinyassert } from "@hiogawa/utils";
 import React from "react";
-import { createError } from "./error";
+import { type ReactServerErrorContext, createError } from "./error";
 
 // cf. https://nextjs.org/docs/app/building-your-application/routing#file-conventions
 interface RouteEntry {
@@ -117,7 +117,7 @@ export async function renderMatchRoute(
 }
 
 const ThrowNotFound: React.FC = () => {
-  throw createError(404);
+  throw createError({ status: 404 });
 };
 
 interface RouteProps {
@@ -129,7 +129,7 @@ export interface PageRouteProps extends RouteProps {}
 
 export interface ErrorRouteProps {
   error: Error;
-  status: number;
+  serverError?: ReactServerErrorContext;
   reset: () => void;
 }
 
diff --git a/packages/react-server/src/lib/types-env.d.ts b/packages/react-server/src/lib/types-env.d.ts
index 1a4668840..d03fa7e98 100644
--- a/packages/react-server/src/lib/types-env.d.ts
+++ b/packages/react-server/src/lib/types-env.d.ts
@@ -7,7 +7,9 @@ declare module "react-server-dom-webpack/server.edge" {
   export function renderToReadableStream(
     node: React.ReactNode,
     bundlerConfig: import("./types").BundlerConfig,
-    opitons?: {},
+    opitons?: {
+      onError: import("react-dom/server").RenderToReadableStreamOptions["onError"];
+    },
   ): ReadableStream<Uint8Array>;
 
   export function decodeReply(body: string | FormData): Promise<unknown>;

From 307e72fff03b98bcf6c22d9d4b2e688d2d6800ec Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 19:19:33 +0900
Subject: [PATCH 18/37] test: e2e browser error

---
 .../examples/basic/e2e/basic.test.ts          |  6 +++++-
 .../src/routes/test/error/browser/_client.tsx | 10 ++++++++++
 .../src/routes/test/error/browser/page.tsx    |  5 +++++
 .../basic/src/routes/test/error/page.tsx      | 20 +++++++++++++++++--
 .../src/routes/test/error/server/page.tsx     |  3 +++
 5 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error/browser/_client.tsx
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error/browser/page.tsx
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error/server/page.tsx

diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index 0656ee525..31c82ec1c 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -35,7 +35,11 @@ test("error", async ({ page }) => {
   const checkClientState = await setupCheckClientState(page);
 
   await page.getByRole("link", { name: "/test/error" }).click();
-  await page.getByText(`server error: {"status":500}`).click();
+  await page.getByRole("link", { name: "Server" }).click();
+  await page.getByText('server error: {"status":500}').click();
+  await page.getByRole("link", { name: "/test/error" }).click();
+  await page.getByRole("link", { name: "Browser" }).click();
+  await page.getByText("server error: (N/A)").click();
 
   await page.getByRole("link", { name: "/test/other" }).click();
   await page.getByRole("heading", { name: "Other Page" }).click();
diff --git a/packages/react-server/examples/basic/src/routes/test/error/browser/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/browser/_client.tsx
new file mode 100644
index 000000000..e8c6a43ba
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/browser/_client.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import React from "react";
+
+export function ClinetPage() {
+  React.useEffect(() => {
+    throw new Error("boom!");
+  }, []);
+  return <div></div>;
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/browser/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/browser/page.tsx
new file mode 100644
index 000000000..7d562a747
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/browser/page.tsx
@@ -0,0 +1,5 @@
+import { ClinetPage } from "./_client";
+
+export default function Page() {
+  return <ClinetPage />;
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
index 425443fe5..8b5e72e4b 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
@@ -1,4 +1,20 @@
+import { Link } from "@hiogawa/react-server/client";
+
 export default async function Page() {
-  throw new Error("boom!");
-  return <></>;
+  return (
+    <div className="flex gap-2 p-2">
+      <Link
+        className="antd-btn antd-btn-default px-2"
+        href="/test/error/server"
+      >
+        Server
+      </Link>
+      <Link
+        className="antd-btn antd-btn-default px-2"
+        href="/test/error/browser"
+      >
+        Browser
+      </Link>
+    </div>
+  );
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/error/server/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/server/page.tsx
new file mode 100644
index 000000000..afcad545c
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/server/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  throw new Error("boom!");
+}

From 89d1e8cd6fa2f26af3e025e664387546fc8521bb Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 21:20:04 +0900
Subject: [PATCH 19/37] refactor: move code

---
 .../basic/src/routes/test/error/_client.tsx   | 61 -------------------
 .../examples/basic/src/routes/test/layout.tsx |  3 +-
 packages/react-server/src/client.tsx          |  2 +-
 packages/react-server/src/entry/server.tsx    |  4 +-
 packages/react-server/src/index.ts            |  2 +-
 .../src/lib/components/error-boundary.tsx     | 58 ++++++++++++++----
 packages/react-server/src/server.ts           |  2 +
 7 files changed, 55 insertions(+), 77 deletions(-)
 delete mode 100644 packages/react-server/examples/basic/src/routes/test/error/_client.tsx

diff --git a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
deleted file mode 100644
index ce6c1961a..000000000
--- a/packages/react-server/examples/basic/src/routes/test/error/_client.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import { getErrorStatus } from "@hiogawa/react-server";
-import { type ErrorRouteProps } from "@hiogawa/react-server/server";
-import React from "react";
-
-// TOOD: for now, experiment inside demo
-
-interface Props {
-  children?: React.ReactNode;
-  errorComponent: React.FC<ErrorRouteProps>;
-  url: string;
-}
-
-interface State {
-  error: Error | null;
-  url: string;
-}
-
-// cf.
-// https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
-// https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
-export class ErrorBoundary extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { error: null, url: props.url };
-  }
-
-  static getDerivedStateFromError(error: Error) {
-    return { error };
-  }
-
-  // automatically reset on url change
-  static getDerivedStateFromProps(props: Props, state: State): State {
-    state = { ...state };
-    if (props.url !== state.url) {
-      state.error = null;
-    }
-    return { ...state, url: props.url };
-  }
-
-  reset = () => {
-    this.setState({ error: null });
-  };
-
-  override render() {
-    const error = this.state.error;
-    if (error) {
-      const Component = this.props.errorComponent;
-      return (
-        <Component
-          error={error}
-          serverError={getErrorStatus(error)}
-          reset={this.reset}
-        />
-      );
-    }
-    // TODO: why need to be wrapped with dom?
-    return <div>{this.props.children}</div>;
-  }
-}
diff --git a/packages/react-server/examples/basic/src/routes/test/layout.tsx b/packages/react-server/examples/basic/src/routes/test/layout.tsx
index e048e6189..6708cf0cd 100644
--- a/packages/react-server/examples/basic/src/routes/test/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/layout.tsx
@@ -1,8 +1,8 @@
+import { ErrorBoundary } from "@hiogawa/react-server/client";
 import type { LayoutRouteProps } from "@hiogawa/react-server/server";
 import { NavMenu } from "../../components/nav-menu";
 import { Hydrated } from "./_client";
 import ErrorPage from "./error";
-import { ErrorBoundary } from "./error/_client";
 
 export default async function Layout(props: LayoutRouteProps) {
   return (
@@ -25,6 +25,7 @@ export default async function Layout(props: LayoutRouteProps) {
         <input className="antd-input px-2" placeholder="test-input" />
         <Hydrated />
       </div>
+      {/* TODO: implement as convention */}
       <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>
         {props.children}
       </ErrorBoundary>
diff --git a/packages/react-server/src/client.tsx b/packages/react-server/src/client.tsx
index 51ad76738..e63bf9fd8 100644
--- a/packages/react-server/src/client.tsx
+++ b/packages/react-server/src/client.tsx
@@ -1,4 +1,4 @@
 "use client";
 
 export { Link } from "./lib/components/link";
-export { __history } from "./lib/csr";
+export { ErrorBoundary } from "./lib/components/error-boundary";
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 1e966b68c..65ac031ce 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -1,8 +1,8 @@
 import { splitFirst } from "@hiogawa/utils";
 import reactDomServer from "react-dom/server.edge";
 import { injectRSCPayload } from "rsc-html-stream/server";
-import { getErrorStatus } from "..";
 import { debug } from "../lib/debug";
+import { getErrorContext } from "../lib/error";
 import { __global } from "../lib/global";
 import {
   createModuleMap,
@@ -100,7 +100,7 @@ export async function renderHtml(rscStream: ReadableStream) {
     ssrStream = await reactDomServer.renderToReadableStream(errorRoot, {
       bootstrapModules: assets.bootstrapModules,
     });
-    status = getErrorStatus(e)?.status ?? 500;
+    status = getErrorContext(e)?.status ?? 500;
   }
 
   const htmlStream = ssrStream
diff --git a/packages/react-server/src/index.ts b/packages/react-server/src/index.ts
index edf4971c1..cb0ff5c3b 100644
--- a/packages/react-server/src/index.ts
+++ b/packages/react-server/src/index.ts
@@ -1 +1 @@
-export { createError, getErrorContext as getErrorStatus } from "./lib/error";
+export {};
diff --git a/packages/react-server/src/lib/components/error-boundary.tsx b/packages/react-server/src/lib/components/error-boundary.tsx
index 7b3c5685d..736e60598 100644
--- a/packages/react-server/src/lib/components/error-boundary.tsx
+++ b/packages/react-server/src/lib/components/error-boundary.tsx
@@ -1,24 +1,60 @@
 "use client";
 
 import React from "react";
+import { getErrorContext } from "../error";
+import type { ErrorRouteProps } from "../router";
+
+// cf.
+// https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
+// https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+
+interface Props {
+  children?: React.ReactNode;
+  errorComponent: React.FC<ErrorRouteProps>;
+  url: string;
+}
+
+interface State {
+  error: Error | null;
+  url: string;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { error: null, url: props.url };
+  }
 
-// cf. https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
-export class ErrorBoundary extends React.Component<
-  {
-    children?: React.ReactNode;
-    errorComponent: React.FC<{ error?: Error }>;
-  },
-  { error?: Error }
-> {
   static getDerivedStateFromError(error: Error) {
     return { error };
   }
 
+  // automatically reset on url change
+  static getDerivedStateFromProps(props: Props, state: State): State {
+    return {
+      ...state,
+      url: props.url,
+      error: props.url === state.url ? state.error : null,
+    };
+  }
+
+  reset = () => {
+    this.setState({ error: null });
+  };
+
   override render() {
-    if (this.state.error) {
+    const error = this.state.error;
+    if (error) {
       const Component = this.props.errorComponent;
-      return <Component error={this.state.error} />;
+      return (
+        <Component
+          error={error}
+          serverError={getErrorContext(error)}
+          reset={this.reset}
+        />
+      );
     }
-    return this.props.children;
+    // TODO: why need to be wrapped with dom?
+    return <div>{this.props.children}</div>;
   }
 }
diff --git a/packages/react-server/src/server.ts b/packages/react-server/src/server.ts
index 63c986eae..2f24ccfca 100644
--- a/packages/react-server/src/server.ts
+++ b/packages/react-server/src/server.ts
@@ -1,5 +1,7 @@
+// TODO: export type from root?
 export type {
   PageRouteProps,
   LayoutRouteProps,
   ErrorRouteProps,
 } from "./lib/router";
+export { createError } from "./lib/error";

From 640858aa1c2b5496ac52a28f985407422d68876b Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 21:22:10 +0900
Subject: [PATCH 20/37] chore: comment

---
 packages/react-server/examples/basic/e2e/helper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/examples/basic/e2e/helper.ts b/packages/react-server/examples/basic/e2e/helper.ts
index 7579e582c..380dea268 100644
--- a/packages/react-server/examples/basic/e2e/helper.ts
+++ b/packages/react-server/examples/basic/e2e/helper.ts
@@ -4,7 +4,7 @@ import test, { type Page, expect } from "@playwright/test";
 export function checkNoError(page: Page) {
   const pageErrors: Error[] = [];
   page.on("pageerror", (e) => pageErrors.push(e));
-  // TODO: how to slow immediately in test?
+  // TODO: how to throw immediately in test? should use test.fail()?
   page.on("close", () => expect(pageErrors).toEqual([]));
 }
 

From 6df5a00e5163d2ed4707c5073c24b9fd8ffbcb1d Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 23:09:39 +0900
Subject: [PATCH 21/37] test: refactor checkNoError

---
 .../examples/basic/e2e/basic.test.ts          | 11 ++++++++++
 .../react-server/examples/basic/e2e/helper.ts | 20 +++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index 31c82ec1c..8a5245a9e 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -108,6 +108,8 @@ test("client hmr @dev", async ({ page }) => {
 });
 
 test("unocss", async ({ page, browser }) => {
+  checkNoError(page);
+
   await page.goto("/test");
   await expect(page.getByRole("heading", { name: "RSC Experiment" })).toHaveCSS(
     "font-weight",
@@ -122,6 +124,8 @@ test("unocss", async ({ page, browser }) => {
 });
 
 test("unocss hmr @dev", async ({ page, browser }) => {
+  checkNoError(page);
+
   await page.goto("/test");
   await page.getByText("hydrated: true").click();
 
@@ -150,6 +154,8 @@ test("unocss hmr @dev", async ({ page, browser }) => {
 });
 
 test("react-server css", async ({ page }) => {
+  checkNoError(page);
+
   await page.goto("/test/css");
   await expect(page.getByText("css normal")).toHaveCSS(
     "background-color",
@@ -163,6 +169,7 @@ test("react-server css", async ({ page }) => {
 
 test("react-server css @nojs", async ({ browser }) => {
   const page = await browser.newPage({ javaScriptEnabled: false });
+
   await page.goto("/test/css");
   await expect(page.getByText("css normal")).toHaveCSS(
     "background-color",
@@ -175,6 +182,8 @@ test("react-server css @nojs", async ({ browser }) => {
 });
 
 test("react-server css hmr @dev", async ({ page, browser }) => {
+  checkNoError(page);
+
   await page.goto("/test/css");
   await page.getByText("hydrated: true").click();
 
@@ -222,6 +231,8 @@ test("react-server css hmr @dev", async ({ page, browser }) => {
 });
 
 test("server action with js", async ({ page }) => {
+  checkNoError(page);
+
   await page.goto("/test/action");
   await page.getByText("hydrated: true").click();
 
diff --git a/packages/react-server/examples/basic/e2e/helper.ts b/packages/react-server/examples/basic/e2e/helper.ts
index 380dea268..5ec9aaefd 100644
--- a/packages/react-server/examples/basic/e2e/helper.ts
+++ b/packages/react-server/examples/basic/e2e/helper.ts
@@ -1,13 +1,29 @@
 import fs from "node:fs";
 import test, { type Page, expect } from "@playwright/test";
 
+//
+// page error check
+//
+
+const pageErrorsMap = new WeakMap<Page, Error[]>();
+
+test.afterEach(({ page }) => {
+  const errors = pageErrorsMap.get(page);
+  if (errors) {
+    expect(errors).toEqual([]);
+  }
+});
+
 export function checkNoError(page: Page) {
   const pageErrors: Error[] = [];
+  pageErrorsMap.set(page, pageErrors);
   page.on("pageerror", (e) => pageErrors.push(e));
-  // TODO: how to throw immediately in test? should use test.fail()?
-  page.on("close", () => expect(pageErrors).toEqual([]));
 }
 
+//
+// file edit utils
+//
+
 const originalFileMap = new Map<string, string>();
 
 test.afterEach(async () => {

From 675755e3f4fc3b88c8285145a8fa316da7cadae2 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 Mar 2024 23:44:01 +0900
Subject: [PATCH 22/37] wip: error page convention

---
 .../examples/basic/src/entry-react-server.tsx |  4 ++++
 .../examples/basic/src/routes/test/layout.tsx |  7 +-----
 packages/react-server/src/lib/global.ts       |  2 ++
 packages/react-server/src/lib/router.tsx      | 24 +++++++------------
 4 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/react-server/examples/basic/src/entry-react-server.tsx b/packages/react-server/examples/basic/src/entry-react-server.tsx
index 7cc4f448c..59a66ce9e 100644
--- a/packages/react-server/examples/basic/src/entry-react-server.tsx
+++ b/packages/react-server/examples/basic/src/entry-react-server.tsx
@@ -1,9 +1,13 @@
+import { ErrorBoundary } from "@hiogawa/react-server/client";
 import {
   type ReactServerHandler,
   handler as baseHandler,
 } from "@hiogawa/react-server/entry-react-server";
+import { __global } from "@hiogawa/react-server/internal";
 
 export const handler: ReactServerHandler = async (ctx) => {
+  __global.ErrorBoundary = ErrorBoundary;
+
   const url = new URL(ctx.request.url);
   if (url.pathname === "/test/__rpc") {
     return new Response(JSON.stringify({ hello: "world" }), {
diff --git a/packages/react-server/examples/basic/src/routes/test/layout.tsx b/packages/react-server/examples/basic/src/routes/test/layout.tsx
index 6708cf0cd..26bc099d2 100644
--- a/packages/react-server/examples/basic/src/routes/test/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/layout.tsx
@@ -1,8 +1,6 @@
-import { ErrorBoundary } from "@hiogawa/react-server/client";
 import type { LayoutRouteProps } from "@hiogawa/react-server/server";
 import { NavMenu } from "../../components/nav-menu";
 import { Hydrated } from "./_client";
-import ErrorPage from "./error";
 
 export default async function Layout(props: LayoutRouteProps) {
   return (
@@ -25,10 +23,7 @@ export default async function Layout(props: LayoutRouteProps) {
         <input className="antd-input px-2" placeholder="test-input" />
         <Hydrated />
       </div>
-      {/* TODO: implement as convention */}
-      <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>
-        {props.children}
-      </ErrorBoundary>
+      {props.children}
     </div>
   );
 }
diff --git a/packages/react-server/src/lib/global.ts b/packages/react-server/src/lib/global.ts
index 372c41e04..b225c9946 100644
--- a/packages/react-server/src/lib/global.ts
+++ b/packages/react-server/src/lib/global.ts
@@ -1,4 +1,5 @@
 import type { ViteDevServer } from "vite";
+import type { ErrorBoundary } from "../client-internal";
 import type { CallServerCallback } from "./types";
 
 // centeralize quick global escape hatch...
@@ -9,4 +10,5 @@ export const __global: {
     reactServer: ViteDevServer;
   };
   callServer: CallServerCallback;
+  ErrorBoundary: typeof ErrorBoundary;
 } = ((globalThis as any).__REACT_SERVER_GLOBAL ??= {});
diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index 52bc275f5..657e94f63 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -1,6 +1,7 @@
 import { objectHas, tinyassert } from "@hiogawa/utils";
 import React from "react";
 import { type ReactServerErrorContext, createError } from "./error";
+import { __global } from "./global";
 
 // cf. https://nextjs.org/docs/app/building-your-application/routing#file-conventions
 interface RouteEntry {
@@ -75,21 +76,8 @@ export function matchRoute(
 export async function renderMatchRoute(
   props: RouteProps,
 ): Promise<React.ReactNode> {
-  // let clientLib: typeof import("../client-internal");
-  // if (import.meta.env.DEV) {
-  //   // TODO: workaorund self-reference during dev
-  //   const lib = await import("node:module");
-  //   const require = lib.default.createRequire(import.meta.url);
-  //   // TODO: resolved client boundary breaks vite deps optimization
-  //   const resolved = require.resolve("@hiogawa/react-server/client-internal");
-  //   // console.log({ resolved });
-  //   clientLib = (await import(/* @vite-ignore */ resolved)) as any;
-  //   // console.log(clientLib, clientLib.ErrorBoundary);
-  // } else {
-  //   throw new Error("todo");
-  //   // clientLib = await import("@hiogawa/react-server/client-internal") as any;
-  // }
-  // clientLib.ErrorBoundary;
+  // TODO: for now, workaround self-reference by passing via global (Try Vite 5.2)
+  const ErrorBoundary = __global.ErrorBoundary;
 
   const nodes = [...props.match.nodes].reverse();
 
@@ -105,7 +93,11 @@ export async function renderMatchRoute(
   for (const node of nodes) {
     const ErrorPage = node.value?.error?.default;
     if (ErrorPage) {
-      // acc = <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>{acc}</ErrorBoundary>
+      acc = (
+        <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>
+          {acc}
+        </ErrorBoundary>
+      );
     }
     const Layout = node.value?.layout?.default;
     if (Layout) {

From 4b391fd02851672b983c2f293aa813901900ee9b Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 08:05:10 +0900
Subject: [PATCH 23/37] chore: comment

---
 packages/react-server/src/lib/router.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index 657e94f63..3a969856f 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -39,7 +39,6 @@ export function generateRouteTree(globEntries: Record<string, unknown>) {
 
 export type MatchRouteResult = {
   nodes: RouteTreeNode[];
-  // TODO: not found as error
   notFound: boolean;
   params: Record<string, string>;
 };
@@ -83,7 +82,6 @@ export async function renderMatchRoute(
 
   let acc: React.ReactNode = <ThrowNotFound />;
   if (!props.match.notFound) {
-    // TODO: assert?
     const Page = nodes[0]?.value?.page?.default;
     if (Page) {
       acc = <Page {...props} />;

From 787e69e256a7238f754000f20d5c63d0ed101f9c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 08:16:10 +0900
Subject: [PATCH 24/37] chore: tweak pokemon demo

---
 .../routes/demo/waku_02/[pokemon]/error.tsx   |  5 ++
 .../routes/demo/waku_02/[pokemon]/layout.tsx  | 13 +++++
 .../routes/demo/waku_02/[pokemon]/page.tsx    | 49 ++++++++-----------
 .../basic/src/routes/demo/waku_02/layout.tsx  |  1 +
 4 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/error.tsx
 create mode 100644 packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/layout.tsx

diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/error.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/error.tsx
new file mode 100644
index 000000000..660de5337
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/error.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function ErrorPage() {
+  return <div>Not found</div>;
+}
diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/layout.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/layout.tsx
new file mode 100644
index 000000000..f3a45cd0e
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/layout.tsx
@@ -0,0 +1,13 @@
+import { Link } from "@hiogawa/react-server/client";
+import { type LayoutRouteProps } from "@hiogawa/react-server/server";
+
+export default async function Layout(props: LayoutRouteProps) {
+  return (
+    <div className="flex flex-col items-center gap-4 p-4">
+      <Link href="/demo/waku_02" className="antd-btn antd-btn-default px-2">
+        Home
+      </Link>
+      {props.children}
+    </div>
+  );
+}
diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/page.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/page.tsx
index ae215941c..b6871e0f8 100644
--- a/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/page.tsx
@@ -1,42 +1,35 @@
-import { Link } from "@hiogawa/react-server/client";
-import type { PageRouteProps } from "@hiogawa/react-server/server";
+import { type PageRouteProps, createError } from "@hiogawa/react-server/server";
 import { tinyassert } from "@hiogawa/utils";
 import { fetchPokemons } from "../_utils";
 
 export default async function Page(props: PageRouteProps) {
   const pokemons = await fetchPokemons();
   tinyassert("pokemon" in props.match.params);
+
   const slug = props.match.params["pokemon"];
   const e = pokemons.find((e) => e.slug === slug);
+  if (!e) {
+    // TODO: extend error to include metadata e.g. slug?
+    throw createError({ status: 404 });
+  }
 
   return (
-    <div className="flex flex-col items-center gap-4 p-4">
-      <Link href="/demo/waku_02" className="antd-btn antd-btn-default px-2">
-        Home
-      </Link>
-
-      {/* TODO: not found error convention? */}
-      {!e && <>Not Found : {slug}</>}
-
-      {e && (
-        <div className="flex flex-col items-center">
-          <img
-            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${e.id}.png`}
-            alt={e.slug}
-            className="w-50 aspect-square"
-          />
-          <div className="flex flex-col items-center gap-0.5 text-lg">
-            <span>{e.name.english}</span>
-            <span>{e.name.japanese}</span>
-            <span>Types: {e.type.join(", ")}</span>
-            {Object.entries(e.base).map(([k, v]) => (
-              <div key={k}>
-                {k}: {v}
-              </div>
-            ))}
+    <div className="flex flex-col items-center">
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${e.id}.png`}
+        alt={e.slug}
+        className="w-50 aspect-square"
+      />
+      <div className="flex flex-col items-center gap-0.5 text-lg">
+        <span>{e.name.english}</span>
+        <span>{e.name.japanese}</span>
+        <span>Types: {e.type.join(", ")}</span>
+        {Object.entries(e.base).map(([k, v]) => (
+          <div key={k}>
+            {k}: {v}
           </div>
-        </div>
-      )}
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/layout.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/layout.tsx
index 29c3fd1b8..0b7a3d0e3 100644
--- a/packages/react-server/examples/basic/src/routes/demo/waku_02/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/layout.tsx
@@ -11,6 +11,7 @@ export default async function Layout(props: React.PropsWithChildren) {
           Waku
         </a>
       </h2>
+      {/* TODO: input to search */}
       {props.children}
     </div>
   );

From 79fc37f40a2e5e63b35fdf886c450b6de9e326dd Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 08:29:17 +0900
Subject: [PATCH 25/37] chore: noscript to show status on server error

---
 packages/react-server/src/entry/server.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 65ac031ce..733fc70cb 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -89,18 +89,20 @@ export async function renderHtml(rscStream: ReadableStream) {
     // which will reply client error boudnary from RSC error
     // TODO: proper two-pass SSR with error route tracking?
     // TODO: meta tag system
+    status = getErrorContext(e)?.status ?? 500;
     const errorRoot = (
       <html data-no-hydate>
         <head>
           <meta charSet="utf-8" />
         </head>
-        <body></body>
+        <body>
+          <noscript>{status}</noscript>
+        </body>
       </html>
     );
     ssrStream = await reactDomServer.renderToReadableStream(errorRoot, {
       bootstrapModules: assets.bootstrapModules,
     });
-    status = getErrorContext(e)?.status ?? 500;
   }
 
   const htmlStream = ssrStream

From 832aa2464440d55913409e70dee59e7f996dbd94 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 09:09:10 +0900
Subject: [PATCH 26/37] feat: add DefaultRootErrorPage

---
 .../examples/basic/src/entry-react-server.tsx |  4 ++--
 .../src/routes/test/error/browser/_client.tsx |  2 +-
 packages/react-server/src/client-internal.ts  |  5 ++++-
 .../react-server/src/entry/react-server.tsx   |  2 +-
 packages/react-server/src/entry/server.tsx    |  6 +++--
 .../src/lib/components/error-boundary.tsx     | 22 ++++++++++++++++---
 packages/react-server/src/lib/error.tsx       | 11 ++++++++++
 packages/react-server/src/lib/global.ts       |  6 +++--
 packages/react-server/src/lib/router.tsx      | 20 ++++++++++++-----
 9 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/packages/react-server/examples/basic/src/entry-react-server.tsx b/packages/react-server/examples/basic/src/entry-react-server.tsx
index 59a66ce9e..ccaa8e0af 100644
--- a/packages/react-server/examples/basic/src/entry-react-server.tsx
+++ b/packages/react-server/examples/basic/src/entry-react-server.tsx
@@ -1,4 +1,4 @@
-import { ErrorBoundary } from "@hiogawa/react-server/client";
+import * as clientInternal from "@hiogawa/react-server/client-internal";
 import {
   type ReactServerHandler,
   handler as baseHandler,
@@ -6,7 +6,7 @@ import {
 import { __global } from "@hiogawa/react-server/internal";
 
 export const handler: ReactServerHandler = async (ctx) => {
-  __global.ErrorBoundary = ErrorBoundary;
+  __global.clientInternal = clientInternal;
 
   const url = new URL(ctx.request.url);
   if (url.pathname === "/test/__rpc") {
diff --git a/packages/react-server/examples/basic/src/routes/test/error/browser/_client.tsx b/packages/react-server/examples/basic/src/routes/test/error/browser/_client.tsx
index e8c6a43ba..896a95f8e 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/browser/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/browser/_client.tsx
@@ -6,5 +6,5 @@ export function ClinetPage() {
   React.useEffect(() => {
     throw new Error("boom!");
   }, []);
-  return <div></div>;
+  return <div>Error on Effect</div>;
 }
diff --git a/packages/react-server/src/client-internal.ts b/packages/react-server/src/client-internal.ts
index 733694c1f..9d9792c86 100644
--- a/packages/react-server/src/client-internal.ts
+++ b/packages/react-server/src/client-internal.ts
@@ -1,4 +1,7 @@
 "use client";
 
 export { createServerReference } from "./lib/shared";
-export { ErrorBoundary } from "./lib/components/error-boundary";
+export {
+  ErrorBoundary,
+  DefaultRootErrorPage,
+} from "./lib/components/error-boundary";
diff --git a/packages/react-server/src/entry/react-server.tsx b/packages/react-server/src/entry/react-server.tsx
index 30d8c899c..f7306b21c 100644
--- a/packages/react-server/src/entry/react-server.tsx
+++ b/packages/react-server/src/entry/react-server.tsx
@@ -98,7 +98,7 @@ function createRouter() {
   async function run(request: Request) {
     const url = new URL(request.url);
     const match = matchRoute(url.pathname, tree);
-    const node = await renderMatchRoute({ request, match });
+    const node = renderMatchRoute({ request, match });
     return { node, match };
   }
 
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 733fc70cb..941c9591e 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -2,7 +2,7 @@ import { splitFirst } from "@hiogawa/utils";
 import reactDomServer from "react-dom/server.edge";
 import { injectRSCPayload } from "rsc-html-stream/server";
 import { debug } from "../lib/debug";
-import { getErrorContext } from "../lib/error";
+import { getErrorContext, getStatusText } from "../lib/error";
 import { __global } from "../lib/global";
 import {
   createModuleMap,
@@ -96,7 +96,9 @@ export async function renderHtml(rscStream: ReadableStream) {
           <meta charSet="utf-8" />
         </head>
         <body>
-          <noscript>{status}</noscript>
+          <noscript>
+            {status} {getStatusText(status)}
+          </noscript>
         </body>
       </html>
     );
diff --git a/packages/react-server/src/lib/components/error-boundary.tsx b/packages/react-server/src/lib/components/error-boundary.tsx
index 736e60598..6acb1d13f 100644
--- a/packages/react-server/src/lib/components/error-boundary.tsx
+++ b/packages/react-server/src/lib/components/error-boundary.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { getErrorContext } from "../error";
+import { getErrorContext, getStatusText } from "../error";
 import type { ErrorRouteProps } from "../router";
 
 // cf.
@@ -54,7 +54,23 @@ export class ErrorBoundary extends React.Component<Props, State> {
         />
       );
     }
-    // TODO: why need to be wrapped with dom?
-    return <div>{this.props.children}</div>;
+    return this.props.children;
   }
 }
+
+export function DefaultRootErrorPage(props: ErrorRouteProps) {
+  const status = props.serverError?.status;
+  return (
+    <html>
+      <body>
+        {status ? (
+          <div>
+            {status} {getStatusText(status)}
+          </div>
+        ) : (
+          <div>Unexpected Error</div>
+        )}
+      </body>
+    </html>
+  );
+}
diff --git a/packages/react-server/src/lib/error.tsx b/packages/react-server/src/lib/error.tsx
index 5ea946d96..980c8dad9 100644
--- a/packages/react-server/src/lib/error.tsx
+++ b/packages/react-server/src/lib/error.tsx
@@ -36,3 +36,14 @@ export function getErrorContext(
   }
   return;
 }
+
+const STATUS_TEXT_MAP = new Map([
+  [400, "Bad Request"],
+  [403, "Forbidden"],
+  [404, "Not Found"],
+  [500, "Internal Server Error"],
+]);
+
+export function getStatusText(status: number) {
+  return STATUS_TEXT_MAP.get(status) ?? "Unknown Server Error";
+}
diff --git a/packages/react-server/src/lib/global.ts b/packages/react-server/src/lib/global.ts
index b225c9946..8023c13b3 100644
--- a/packages/react-server/src/lib/global.ts
+++ b/packages/react-server/src/lib/global.ts
@@ -1,5 +1,4 @@
 import type { ViteDevServer } from "vite";
-import type { ErrorBoundary } from "../client-internal";
 import type { CallServerCallback } from "./types";
 
 // centeralize quick global escape hatch...
@@ -10,5 +9,8 @@ export const __global: {
     reactServer: ViteDevServer;
   };
   callServer: CallServerCallback;
-  ErrorBoundary: typeof ErrorBoundary;
+  // TODO
+  // for now, we workaround self-reference "@hiogawa/react-server/client-internal"
+  // by passing via global from user code (Try Vite 5.2)
+  clientInternal: typeof import("../client-internal");
 } = ((globalThis as any).__REACT_SERVER_GLOBAL ??= {});
diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index 3a969856f..cebdef43b 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -12,6 +12,7 @@ interface RouteEntry {
     default: React.FC<LayoutRouteProps>;
   };
   error?: {
+    // TODO: warn if no "use client"
     default: React.FC<ErrorRouteProps>;
   };
 }
@@ -72,11 +73,8 @@ export function matchRoute(
 }
 
 // TODO: separate react code in a different file
-export async function renderMatchRoute(
-  props: RouteProps,
-): Promise<React.ReactNode> {
-  // TODO: for now, workaround self-reference by passing via global (Try Vite 5.2)
-  const ErrorBoundary = __global.ErrorBoundary;
+export function renderMatchRoute(props: RouteProps) {
+  const { ErrorBoundary, DefaultRootErrorPage } = __global.clientInternal;
 
   const nodes = [...props.match.nodes].reverse();
 
@@ -91,9 +89,10 @@ export async function renderMatchRoute(
   for (const node of nodes) {
     const ErrorPage = node.value?.error?.default;
     if (ErrorPage) {
+      // TODO: why need to wrap with <div>?
       acc = (
         <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>
-          {acc}
+          <div>{acc}</div>
         </ErrorBoundary>
       );
     }
@@ -103,6 +102,15 @@ export async function renderMatchRoute(
     }
   }
 
+  acc = (
+    <ErrorBoundary
+      errorComponent={DefaultRootErrorPage}
+      url={props.request.url}
+    >
+      {acc}
+    </ErrorBoundary>
+  );
+
   return acc;
 }
 

From 9912dd4c0d05dcda8456701fc2c6bd954259063d Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 09:17:03 +0900
Subject: [PATCH 27/37] test: e2e DefaultRootErrorPage

---
 packages/react-server/examples/basic/e2e/basic.test.ts | 6 ++++++
 packages/react-server/src/client.tsx                   | 1 -
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index 8a5245a9e..d60ca6d02 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -47,6 +47,12 @@ test("error", async ({ page }) => {
   await checkClientState();
 });
 
+test("DefaultRootErrorPage", async ({ page }) => {
+  const res = await page.goto("/not-found");
+  expect(res?.status()).toBe(404);
+  await page.getByText("404 Not Found").click();
+});
+
 test("rsc hmr @dev", async ({ page }) => {
   checkNoError(page);
 
diff --git a/packages/react-server/src/client.tsx b/packages/react-server/src/client.tsx
index e63bf9fd8..5a8732f4c 100644
--- a/packages/react-server/src/client.tsx
+++ b/packages/react-server/src/client.tsx
@@ -1,4 +1,3 @@
 "use client";
 
 export { Link } from "./lib/components/link";
-export { ErrorBoundary } from "./lib/components/error-boundary";

From a2276f6d4c88a3f992fee47b39f1fe0a77cb24aa Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 09:38:59 +0900
Subject: [PATCH 28/37] fix: workaround self-reference import via
 "entry-react-server-wrapper"

---
 .../examples/basic/src/entry-react-server.tsx |  4 ----
 packages/react-server/src/entry/server.tsx    |  6 ++++--
 packages/react-server/src/plugin/index.ts     | 19 +++++++++++++++++--
 packages/react-server/src/plugin/utils.tsx    |  1 +
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/react-server/examples/basic/src/entry-react-server.tsx b/packages/react-server/examples/basic/src/entry-react-server.tsx
index ccaa8e0af..7cc4f448c 100644
--- a/packages/react-server/examples/basic/src/entry-react-server.tsx
+++ b/packages/react-server/examples/basic/src/entry-react-server.tsx
@@ -1,13 +1,9 @@
-import * as clientInternal from "@hiogawa/react-server/client-internal";
 import {
   type ReactServerHandler,
   handler as baseHandler,
 } from "@hiogawa/react-server/entry-react-server";
-import { __global } from "@hiogawa/react-server/internal";
 
 export const handler: ReactServerHandler = async (ctx) => {
-  __global.clientInternal = clientInternal;
-
   const url = new URL(ctx.request.url);
   if (url.pathname === "/test/__rpc") {
     return new Response(JSON.stringify({ hello: "world" }), {
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index 941c9591e..b1496f455 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -9,7 +9,7 @@ import {
   initDomWebpackSsr,
   invalidateImportCacheOnFinish,
 } from "../lib/ssr";
-import { ENTRY_REACT_SERVER, invalidateModule } from "../plugin/utils";
+import { ENTRY_REACT_SERVER_WRAPPER, invalidateModule } from "../plugin/utils";
 
 export async function handler(request: Request): Promise<Response> {
   const reactServer = await importReactServer();
@@ -34,7 +34,9 @@ export async function importReactServer(): Promise<
   typeof import("./react-server")
 > {
   if (import.meta.env.DEV) {
-    return __global.dev.reactServer.ssrLoadModule(ENTRY_REACT_SERVER) as any;
+    return __global.dev.reactServer.ssrLoadModule(
+      ENTRY_REACT_SERVER_WRAPPER,
+    ) as any;
   } else {
     return import("/dist/rsc/index.js" as string);
   }
diff --git a/packages/react-server/src/plugin/index.ts b/packages/react-server/src/plugin/index.ts
index 96737ea50..e4f2e3a86 100644
--- a/packages/react-server/src/plugin/index.ts
+++ b/packages/react-server/src/plugin/index.ts
@@ -22,7 +22,12 @@ import { debug } from "../lib/debug";
 import { __global } from "../lib/global";
 import { USE_CLIENT_RE, USE_SERVER_RE, getExportNames } from "./ast-utils";
 import { collectStyle, collectStyleUrls } from "./css";
-import { ENTRY_CLIENT, ENTRY_REACT_SERVER, type SsrAssetsType } from "./utils";
+import {
+  ENTRY_CLIENT,
+  ENTRY_REACT_SERVER,
+  ENTRY_REACT_SERVER_WRAPPER,
+  type SsrAssetsType,
+} from "./utils";
 
 const require = createRequire(import.meta.url);
 
@@ -144,6 +149,16 @@ export function vitePluginReactServer(options?: {
         },
       },
 
+      createVirtualPlugin("entry-react-server-wrapper", () => {
+        // TODO: workaround Vite self-reference import (Try Vite 5.2)
+        return /* js */ `
+          import { __global } from "@hiogawa/react-server/internal";
+          import * as clientInternal from "@hiogawa/react-server/client-internal";
+          __global.clientInternal = clientInternal;
+          export * from "${ENTRY_REACT_SERVER}";
+        `;
+      }),
+
       ...(options?.plugins ?? []),
     ],
     build: {
@@ -153,7 +168,7 @@ export function vitePluginReactServer(options?: {
       outDir: "dist/rsc",
       rollupOptions: {
         input: {
-          index: ENTRY_REACT_SERVER,
+          index: ENTRY_REACT_SERVER_WRAPPER,
         },
       },
     },
diff --git a/packages/react-server/src/plugin/utils.tsx b/packages/react-server/src/plugin/utils.tsx
index 855e4aa4e..3a880598d 100644
--- a/packages/react-server/src/plugin/utils.tsx
+++ b/packages/react-server/src/plugin/utils.tsx
@@ -15,3 +15,4 @@ export interface SsrAssetsType {
 // TODO: configurable?
 export const ENTRY_CLIENT = "/src/entry-client";
 export const ENTRY_REACT_SERVER = "/src/entry-react-server";
+export const ENTRY_REACT_SERVER_WRAPPER = "virtual:entry-react-server-wrapper";

From 253b2a7efce768b9b2dbcae339878e21225ff382 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 09:43:27 +0900
Subject: [PATCH 29/37] refactor: refactor ENTRY_CLIENT_WRAPPER

---
 packages/react-server/src/plugin/index.ts  | 20 ++++++++++++--------
 packages/react-server/src/plugin/utils.tsx |  1 +
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/react-server/src/plugin/index.ts b/packages/react-server/src/plugin/index.ts
index e4f2e3a86..782a1866b 100644
--- a/packages/react-server/src/plugin/index.ts
+++ b/packages/react-server/src/plugin/index.ts
@@ -24,6 +24,7 @@ import { USE_CLIENT_RE, USE_SERVER_RE, getExportNames } from "./ast-utils";
 import { collectStyle, collectStyleUrls } from "./css";
 import {
   ENTRY_CLIENT,
+  ENTRY_CLIENT_WRAPPER,
   ENTRY_REACT_SERVER,
   ENTRY_REACT_SERVER_WRAPPER,
   type SsrAssetsType,
@@ -149,15 +150,18 @@ export function vitePluginReactServer(options?: {
         },
       },
 
-      createVirtualPlugin("entry-react-server-wrapper", () => {
-        // TODO: workaround Vite self-reference import (Try Vite 5.2)
-        return /* js */ `
+      createVirtualPlugin(
+        ENTRY_REACT_SERVER_WRAPPER.slice("virtual:".length),
+        () => {
+          // TODO: workaround Vite self-reference import (Try Vite 5.2)
+          return /* js */ `
           import { __global } from "@hiogawa/react-server/internal";
           import * as clientInternal from "@hiogawa/react-server/client-internal";
           __global.clientInternal = clientInternal;
           export * from "${ENTRY_REACT_SERVER}";
         `;
-      }),
+        },
+      ),
 
       ...(options?.plugins ?? []),
     ],
@@ -201,7 +205,7 @@ export function vitePluginReactServer(options?: {
           rollupOptions: env.isSsrBuild
             ? undefined
             : {
-                input: "virtual:entry-client-wrapper.js",
+                input: ENTRY_CLIENT_WRAPPER,
               },
         },
       };
@@ -337,7 +341,7 @@ export function vitePluginReactServer(options?: {
           </script>
         `;
         const result: SsrAssetsType = {
-          bootstrapModules: ["/@id/__x00__virtual:entry-client-wrapper.js"],
+          bootstrapModules: [`/@id/__x00__${ENTRY_CLIENT_WRAPPER}`],
           head,
         };
         return `export default ${JSON.stringify(result)}`;
@@ -351,7 +355,7 @@ export function vitePluginReactServer(options?: {
             "utf-8",
           ),
         );
-        const entry = manifest["virtual:entry-client-wrapper.js"];
+        const entry = manifest[ENTRY_CLIENT_WRAPPER];
         tinyassert(entry);
         const head = (entry.css ?? [])
           .map((url) => `<link rel="stylesheet" href="/${url}" />`)
@@ -365,7 +369,7 @@ export function vitePluginReactServer(options?: {
 
       tinyassert(false);
     }),
-    createVirtualPlugin("entry-client-wrapper.js", () => {
+    createVirtualPlugin(ENTRY_CLIENT_WRAPPER.slice("virtual:".length), () => {
       // dev
       if (!manager.buildType) {
         // wrapper entry to ensure client entry runs after vite/react inititialization
diff --git a/packages/react-server/src/plugin/utils.tsx b/packages/react-server/src/plugin/utils.tsx
index 3a880598d..deb5b3f7d 100644
--- a/packages/react-server/src/plugin/utils.tsx
+++ b/packages/react-server/src/plugin/utils.tsx
@@ -15,4 +15,5 @@ export interface SsrAssetsType {
 // TODO: configurable?
 export const ENTRY_CLIENT = "/src/entry-client";
 export const ENTRY_REACT_SERVER = "/src/entry-react-server";
+export const ENTRY_CLIENT_WRAPPER = "virtual:entry-client-wrapper";
 export const ENTRY_REACT_SERVER_WRAPPER = "virtual:entry-react-server-wrapper";

From b3abadd10b2db917f1e5514e3bafee7d9b0c9ae4 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 09:51:01 +0900
Subject: [PATCH 30/37] chore: indent

---
 packages/react-server/src/plugin/index.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-server/src/plugin/index.ts b/packages/react-server/src/plugin/index.ts
index 782a1866b..689e5a113 100644
--- a/packages/react-server/src/plugin/index.ts
+++ b/packages/react-server/src/plugin/index.ts
@@ -153,13 +153,13 @@ export function vitePluginReactServer(options?: {
       createVirtualPlugin(
         ENTRY_REACT_SERVER_WRAPPER.slice("virtual:".length),
         () => {
-          // TODO: workaround Vite self-reference import (Try Vite 5.2)
+          // TODO: workaround Vite self-reference import via global (Try Vite 5.2)
           return /* js */ `
-          import { __global } from "@hiogawa/react-server/internal";
-          import * as clientInternal from "@hiogawa/react-server/client-internal";
-          __global.clientInternal = clientInternal;
-          export * from "${ENTRY_REACT_SERVER}";
-        `;
+            import { __global } from "@hiogawa/react-server/internal";
+            import * as clientInternal from "@hiogawa/react-server/client-internal";
+            __global.clientInternal = clientInternal;
+            export * from "${ENTRY_REACT_SERVER}";
+          `;
         },
       ),
 

From c02d051089cf85d53919e3018639dcbaadbca6ff Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 11:06:55 +0900
Subject: [PATCH 31/37] chore: unused

---
 packages/react-server/package.json   | 4 ----
 packages/react-server/tsup.config.ts | 3 ---
 2 files changed, 7 deletions(-)

diff --git a/packages/react-server/package.json b/packages/react-server/package.json
index 1c1bede7c..3aa34bdd4 100644
--- a/packages/react-server/package.json
+++ b/packages/react-server/package.json
@@ -8,10 +8,6 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./internal": {
-      "types": "./dist/internal.d.ts",
-      "default": "./dist/internal.js"
-    },
     "./client": {
       "types": "./dist/client.d.ts",
       "default": "./dist/client.js"
diff --git a/packages/react-server/tsup.config.ts b/packages/react-server/tsup.config.ts
index 09a43c085..a568ea28c 100644
--- a/packages/react-server/tsup.config.ts
+++ b/packages/react-server/tsup.config.ts
@@ -4,7 +4,6 @@ export default defineConfig([
   {
     entry: [
       "src/index.ts",
-      "src/internal.ts",
       "src/server.ts",
       "src/server-internal.ts",
       "src/client.tsx",
@@ -23,8 +22,6 @@ export default defineConfig([
       "/dist/rsc/index.js",
       "/dist/client/index.html?raw",
       "/index.html?raw",
-      // self reference
-      /^@hiogawa\/react-server/,
     ],
   },
 ]);

From 70ebceadb98a7419ddff0bb24ebe2834cb182f44 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 11:22:36 +0900
Subject: [PATCH 32/37] chore: tweak pokemon demo

---
 .../basic/src/routes/demo/waku_02/_client.tsx | 20 +++++++++++++++++++
 .../basic/src/routes/demo/waku_02/layout.tsx  |  4 +++-
 packages/react-server/src/lib/csr.tsx         |  2 ++
 packages/react-server/src/lib/global.ts       |  2 ++
 packages/react-server/src/lib/router.tsx      |  4 ++--
 5 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-server/examples/basic/src/routes/demo/waku_02/_client.tsx

diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/_client.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/_client.tsx
new file mode 100644
index 000000000..589294d3d
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/_client.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { __global } from "@hiogawa/react-server";
+
+// TODO: server action + redirect
+export function SearchInput() {
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const q = e.currentTarget["q"].value;
+        if (q) {
+          __global.history.push(`/demo/waku_02/${q}`);
+        }
+      }}
+    >
+      <input name="q" className="antd-input px-2" placeholder="Search..." />
+    </form>
+  );
+}
diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/layout.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/layout.tsx
index 0b7a3d0e3..45756d56c 100644
--- a/packages/react-server/examples/basic/src/routes/demo/waku_02/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/layout.tsx
@@ -1,3 +1,5 @@
+import { SearchInput } from "./_client";
+
 export default async function Layout(props: React.PropsWithChildren) {
   return (
     <div className="flex flex-col items-center gap-2">
@@ -11,7 +13,7 @@ export default async function Layout(props: React.PropsWithChildren) {
           Waku
         </a>
       </h2>
-      {/* TODO: input to search */}
+      <SearchInput />
       {props.children}
     </div>
   );
diff --git a/packages/react-server/src/lib/csr.tsx b/packages/react-server/src/lib/csr.tsx
index d72ddc7ba..ec6ecf86f 100644
--- a/packages/react-server/src/lib/csr.tsx
+++ b/packages/react-server/src/lib/csr.tsx
@@ -37,6 +37,7 @@ export function initDomWebpackCsr() {
 //
 
 import { type RouterHistory, createBrowserHistory } from "@tanstack/history";
+import { __global } from "..";
 
 // TODO: client context instead of global?
 // TODO: create a wrapper to do `callServer` before actual client url update?
@@ -44,4 +45,5 @@ export let __history: RouterHistory;
 
 export function initHistory() {
   __history = createBrowserHistory();
+  __global.history = __history;
 }
diff --git a/packages/react-server/src/lib/global.ts b/packages/react-server/src/lib/global.ts
index 5d196fdd3..070ce3155 100644
--- a/packages/react-server/src/lib/global.ts
+++ b/packages/react-server/src/lib/global.ts
@@ -1,3 +1,4 @@
+import type { RouterHistory } from "@tanstack/history";
 import type { ViteDevServer } from "vite";
 import type { CallServerCallback } from "./types";
 
@@ -8,6 +9,7 @@ export const __global: {
     server: ViteDevServer;
     reactServer: ViteDevServer;
   };
+  history: RouterHistory;
   callServer: CallServerCallback;
   // see "virtual:self-reference-workaround"
   clientInternal: typeof import("../client-internal");
diff --git a/packages/react-server/src/lib/router.tsx b/packages/react-server/src/lib/router.tsx
index cebdef43b..8ac5f83bc 100644
--- a/packages/react-server/src/lib/router.tsx
+++ b/packages/react-server/src/lib/router.tsx
@@ -89,10 +89,10 @@ export function renderMatchRoute(props: RouteProps) {
   for (const node of nodes) {
     const ErrorPage = node.value?.error?.default;
     if (ErrorPage) {
-      // TODO: why need to wrap with <div>?
+      // TODO: can we remove extra <div>?
       acc = (
         <ErrorBoundary errorComponent={ErrorPage} url={props.request.url}>
-          <div>{acc}</div>
+          <div className="error-boundary">{acc}</div>
         </ErrorBoundary>
       );
     }

From 1abf3fa4cfdda04ea101472f0ad464693381b9ec Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 11:28:38 +0900
Subject: [PATCH 33/37] demo: extend ReactServerErrorContext

---
 .../basic/src/routes/demo/waku_02/[pokemon]/error.tsx  |  6 ++++--
 .../basic/src/routes/demo/waku_02/[pokemon]/page.tsx   | 10 ++++++++--
 packages/react-server/src/server.ts                    |  2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/error.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/error.tsx
index 660de5337..1feac9d3d 100644
--- a/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/error.tsx
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/error.tsx
@@ -1,5 +1,7 @@
 "use client";
 
-export default function ErrorPage() {
-  return <div>Not found</div>;
+import type { ErrorRouteProps } from "@hiogawa/react-server/server";
+
+export default function ErrorPage(props: ErrorRouteProps) {
+  return <div>{props.serverError?.pokemonError || "Unknown error"}</div>;
 }
diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/page.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/page.tsx
index b6871e0f8..1b5cf8d49 100644
--- a/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/[pokemon]/page.tsx
@@ -2,6 +2,13 @@ import { type PageRouteProps, createError } from "@hiogawa/react-server/server";
 import { tinyassert } from "@hiogawa/utils";
 import { fetchPokemons } from "../_utils";
 
+// extend server error to include detail
+declare module "@hiogawa/react-server/server" {
+  interface ReactServerErrorContext {
+    pokemonError?: string;
+  }
+}
+
 export default async function Page(props: PageRouteProps) {
   const pokemons = await fetchPokemons();
   tinyassert("pokemon" in props.match.params);
@@ -9,8 +16,7 @@ export default async function Page(props: PageRouteProps) {
   const slug = props.match.params["pokemon"];
   const e = pokemons.find((e) => e.slug === slug);
   if (!e) {
-    // TODO: extend error to include metadata e.g. slug?
-    throw createError({ status: 404 });
+    throw createError({ status: 404, pokemonError: `Not found : ${slug}` });
   }
 
   return (
diff --git a/packages/react-server/src/server.ts b/packages/react-server/src/server.ts
index 2f24ccfca..27c937cea 100644
--- a/packages/react-server/src/server.ts
+++ b/packages/react-server/src/server.ts
@@ -4,4 +4,4 @@ export type {
   LayoutRouteProps,
   ErrorRouteProps,
 } from "./lib/router";
-export { createError } from "./lib/error";
+export { createError, type ReactServerErrorContext } from "./lib/error";

From 851563bb8feac34bd530bde2cd5e8db079bb84a5 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 11:32:03 +0900
Subject: [PATCH 34/37] chore: comment

---
 packages/react-server/src/lib/error.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/src/lib/error.tsx b/packages/react-server/src/lib/error.tsx
index 980c8dad9..bdadc4cf7 100644
--- a/packages/react-server/src/lib/error.tsx
+++ b/packages/react-server/src/lib/error.tsx
@@ -1,7 +1,7 @@
 import { debug } from "./debug";
 
-// TODO: allow including arbitrary data?
 // TODO: accomodate redirection error convention?
+// TODO: custom (de)serialization?
 export interface ReactServerErrorContext {
   status: number;
 }

From c10e7f6dd1529e44edca22ecc490fd42d311ec47 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 11:34:03 +0900
Subject: [PATCH 35/37] chore: tweak

---
 .../examples/basic/src/routes/demo/waku_02/_client.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-server/examples/basic/src/routes/demo/waku_02/_client.tsx b/packages/react-server/examples/basic/src/routes/demo/waku_02/_client.tsx
index 589294d3d..e26c4d21f 100644
--- a/packages/react-server/examples/basic/src/routes/demo/waku_02/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/demo/waku_02/_client.tsx
@@ -9,8 +9,8 @@ export function SearchInput() {
       onSubmit={(e) => {
         e.preventDefault();
         const q = e.currentTarget["q"].value;
-        if (q) {
-          __global.history.push(`/demo/waku_02/${q}`);
+        if (typeof q === "string") {
+          __global.history.push(`/demo/waku_02/${q.toLowerCase()}`);
         }
       }}
     >

From baf2952b27036a05164a2926604b96005c4772d8 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 11:42:35 +0900
Subject: [PATCH 36/37] e2e: test custom error

---
 .../react-server/examples/basic/e2e/basic.test.ts  |  9 ++++++++-
 .../examples/basic/src/routes/test/error/page.tsx  | 10 ++++++++--
 .../basic/src/routes/test/error/server/page.tsx    | 14 +++++++++++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index d60ca6d02..aaca7f03e 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -35,8 +35,15 @@ test("error", async ({ page }) => {
   const checkClientState = await setupCheckClientState(page);
 
   await page.getByRole("link", { name: "/test/error" }).click();
-  await page.getByRole("link", { name: "Server" }).click();
+  await page.getByRole("link", { name: "Server 500" }).click();
   await page.getByText('server error: {"status":500}').click();
+
+  await page.getByRole("link", { name: "/test/error" }).click();
+  await page.getByRole("link", { name: "Server Custom" }).click();
+  await page
+    .getByText('server error: {"status":403,"customMessage":"hello"}')
+    .click();
+
   await page.getByRole("link", { name: "/test/error" }).click();
   await page.getByRole("link", { name: "Browser" }).click();
   await page.getByText("server error: (N/A)").click();
diff --git a/packages/react-server/examples/basic/src/routes/test/error/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
index 8b5e72e4b..1e006a6b6 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/page.tsx
@@ -5,9 +5,15 @@ export default async function Page() {
     <div className="flex gap-2 p-2">
       <Link
         className="antd-btn antd-btn-default px-2"
-        href="/test/error/server"
+        href="/test/error/server?500"
       >
-        Server
+        Server 500
+      </Link>
+      <Link
+        className="antd-btn antd-btn-default px-2"
+        href="/test/error/server?custom"
+      >
+        Server Custom
       </Link>
       <Link
         className="antd-btn antd-btn-default px-2"
diff --git a/packages/react-server/examples/basic/src/routes/test/error/server/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/server/page.tsx
index afcad545c..391eae254 100644
--- a/packages/react-server/examples/basic/src/routes/test/error/server/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/error/server/page.tsx
@@ -1,3 +1,15 @@
-export default function Page() {
+import { type PageRouteProps, createError } from "@hiogawa/react-server/server";
+
+declare module "@hiogawa/react-server/server" {
+  interface ReactServerErrorContext {
+    customMessage?: string;
+  }
+}
+
+export default function Page(props: PageRouteProps) {
+  const url = new URL(props.request.url);
+  if (url.searchParams.has("custom")) {
+    throw createError({ status: 403, customMessage: "hello" });
+  }
   throw new Error("boom!");
 }

From 47610fcf0a31550e4702da9443f91c1b1bfc6a62 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 22 Mar 2024 11:44:59 +0900
Subject: [PATCH 37/37] chore: release

---
 packages/react-server/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/package.json b/packages/react-server/package.json
index 3aa34bdd4..1598cd02e 100644
--- a/packages/react-server/package.json
+++ b/packages/react-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hiogawa/react-server",
-  "version": "0.1.0-pre.8",
+  "version": "0.1.0-pre.9",
   "license": "MIT",
   "type": "module",
   "exports": {