From ba35df94536528879435c7c2d1d8118d90afe32b Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Mon, 8 Apr 2024 08:51:09 +0900 Subject: [PATCH 1/5] feat(react-server): log unexpected error --- packages/react-server/src/entry/react-server.tsx | 3 +++ packages/react-server/src/entry/server.tsx | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) 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) { From 5c63078fe0f85ac36e774f5e54237ad2f9f90ca0 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Mon, 8 Apr 2024 09:13:59 +0900 Subject: [PATCH 2/5] chore: more examples --- .../basic/src/routes/test/error/layout.tsx | 21 ++++++++++++++++ .../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 +++ 4 files changed, 28 insertions(+), 24 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/src/routes/test/error/layout.tsx b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx new file mode 100644 index 000000000..0a17544f8 --- /dev/null +++ b/packages/react-server/examples/basic/src/routes/test/error/layout.tsx @@ -0,0 +1,21 @@ +import type { LayoutProps } from "@hiogawa/react-server/server"; +import { NavMenu } from "../../../components/nav-menu"; + +export default function Layout(props: LayoutProps) { + return ( +
+

Error Test

+ +
{props.children}
+
+ ); +} 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 ( -
- - Server 500 - - - Server Custom - - - Browser - -
- ); + 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 ; +} 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
{}}>Boom!
; +} From 1bc8e7ea57457e22d9e66f3a8f16e3ab103c43a9 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Mon, 8 Apr 2024 09:15:56 +0900 Subject: [PATCH 3/5] chore: simplify examples --- packages/react-server/examples/basic/e2e/basic.test.ts | 2 +- .../examples/basic/src/routes/test/error/layout.tsx | 1 + packages/react-server/examples/basic/src/routes/test/layout.tsx | 1 - 3 files changed, 2 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 cf41a2533..282785785 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); 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 0a17544f8..04ccda7ba 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 @@ -8,6 +8,7 @@ export default function Layout(props: LayoutProps) { Date: Mon, 8 Apr 2024 09:17:41 +0900 Subject: [PATCH 4/5] chore: update test --- .../react-server/examples/basic/e2e/basic.test.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts index 282785785..8e74260ee 100644 --- a/packages/react-server/examples/basic/e2e/basic.test.ts +++ b/packages/react-server/examples/basic/e2e/basic.test.ts @@ -124,19 +124,27 @@ 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(); + 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(); From 650fe28542890782840051341bb8816dde3b8ac9 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Mon, 8 Apr 2024 09:24:58 +0900 Subject: [PATCH 5/5] test: tweak --- .../examples/basic/e2e/basic.test.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts index 8e74260ee..683884b39 100644 --- a/packages/react-server/examples/basic/e2e/basic.test.ts +++ b/packages/react-server/examples/basic/e2e/basic.test.ts @@ -137,13 +137,16 @@ test("error", async ({ page }) => { await page.getByRole("link", { name: "/test/error/browser" }).click(); await page.getByText("server error: (N/A)").click(); - 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(); + // 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();