feat(react-server): log unexpected error (#273)

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();
 

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>
+  );
+}

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;
 }

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>;
+}

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>;
+}

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",

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

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) {