From 937badec21c2fc7f565230b69804c4e0d55a5d77 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Mon, 8 Apr 2024 09:40:58 +0900
Subject: [PATCH] feat(react-server): log unexpected error (#273)

---
 .../examples/basic/e2e/basic.test.ts          | 19 +++++++++++---
 .../basic/src/routes/test/error/layout.tsx    | 22 ++++++++++++++++
 .../basic/src/routes/test/error/page.tsx      | 25 +------------------
 .../src/routes/test/error/use-client/page.tsx |  3 +++
 .../src/routes/test/error/use-server/page.tsx |  3 +++
 .../examples/basic/src/routes/test/layout.tsx |  1 -
 .../react-server/src/entry/react-server.tsx   |  3 +++
 packages/react-server/src/entry/server.tsx    |  4 ++-
 8 files changed, 50 insertions(+), 30 deletions(-)
 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/use-client/page.tsx
 create mode 100644 packages/react-server/examples/basic/src/routes/test/error/use-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 cf41a2533..683884b39 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -115,7 +115,7 @@ test("Link modifier", async ({ page, context }) => {
 });
 
 test("error", async ({ page }) => {
-  const res = await page.goto("/test/not-found");
+  const res = await page.goto("/test/error-not-found");
   expect(res?.status()).toBe(404);
 
   await waitForHydration(page);
@@ -124,19 +124,30 @@ test("error", async ({ page }) => {
   const checkClientState = await setupCheckClientState(page);
 
   await page.getByRole("link", { name: "/test/error" }).click();
-  await page.getByRole("link", { name: "Server 500" }).click();
+  await page.getByRole("link", { name: "/test/error/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.getByRole("link", { name: "/test/error/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.getByRole("link", { name: "/test/error/browser" }).click();
   await page.getByText("server error: (N/A)").click();
 
+  // wrong usage errors would brew away the whole app on build?
+  if (!process.env.E2E_PREVIEW) {
+    await page.getByRole("link", { name: "/test/error" }).click();
+    await page.getByRole("link", { name: "/test/error/use-client" }).click();
+    await page.getByText('server error: {"status":500}').click();
+
+    await page.getByRole("link", { name: "/test/error" }).click();
+    await page.getByRole("link", { name: "/test/error/use-server" }).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/layout.tsx b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
new file mode 100644
index 000000000..04ccda7ba
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx
@@ -0,0 +1,22 @@
+import type { LayoutProps } from "@hiogawa/react-server/server";
+import { NavMenu } from "../../../components/nav-menu";
+
+export default function Layout(props: LayoutProps) {
+  return (
+    <div className="flex flex-col gap-2 p-2">
+      <h4 className="font-bold">Error Test</h4>
+      <NavMenu
+        className="flex flex-col items-start gap-1"
+        links={[
+          "/test/error/not-found",
+          "/test/error/server?500",
+          "/test/error/server?custom",
+          "/test/error/browser",
+          "/test/error/use-client",
+          "/test/error/use-server",
+        ]}
+      />
+      <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 1e006a6b6..c6437a5e3 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,26 +1,3 @@
-import { Link } from "@hiogawa/react-server/client";
-
 export default async function Page() {
-  return (
-    <div className="flex gap-2 p-2">
-      <Link
-        className="antd-btn antd-btn-default px-2"
-        href="/test/error/server?500"
-      >
-        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"
-        href="/test/error/browser"
-      >
-        Browser
-      </Link>
-    </div>
-  );
+  return null;
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/error/use-client/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/use-client/page.tsx
new file mode 100644
index 000000000..d9e8b5c49
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/use-client/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <button onClick={() => {}}>Boom!</button>;
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/error/use-server/page.tsx b/packages/react-server/examples/basic/src/routes/test/error/use-server/page.tsx
new file mode 100644
index 000000000..f068e517a
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/error/use-server/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <form action={() => {}}>Boom!</form>;
+}
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 681b8ba6c..aba02d839 100644
--- a/packages/react-server/examples/basic/src/routes/test/layout.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/layout.tsx
@@ -17,7 +17,6 @@ export default async function Layout(props: LayoutProps) {
           "/test/head",
           "/test/css",
           "/test/error",
-          "/test/not-found",
           "/test/transition",
           "/test/redirect",
           "/test/session",
diff --git a/packages/react-server/src/entry/react-server.tsx b/packages/react-server/src/entry/react-server.tsx
index 96a9f4ecd..981c5e0b1 100644
--- a/packages/react-server/src/entry/react-server.tsx
+++ b/packages/react-server/src/entry/react-server.tsx
@@ -113,6 +113,9 @@ const reactServerOnError: RenderToReadableStreamOptions["onError"] = (
     error,
     errorInfo,
   });
+  if (!(error instanceof ReactServerDigestError)) {
+    console.error("[react-server:renderToReadableStream]", error);
+  }
   const serverError =
     error instanceof ReactServerDigestError
       ? error
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index ad4be0f6d..e12369a6f 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -129,8 +129,10 @@ export async function renderHtml(
         ? []
         : assets.bootstrapModules,
       onError(error, errorInfo) {
-        // TODO: should handle SSR error which is not RSC error?
         debug("renderToReadableStream", { error, errorInfo });
+        if (!getErrorContext(error)) {
+          console.error("[react-dom:renderToReadableStream]", error);
+        }
       },
     });
   } catch (e) {