From 37d7614ea5553ebf7bd3717ab22adfa8300102a5 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Thu, 22 Feb 2024 08:53:48 -0800 Subject: [PATCH] fix: account for presence of Layout in default error boundary --- .changeset/layout-error-boundary.md | 5 +++ integration/root-route-test.ts | 40 ++++++++++++++++++++++ packages/remix-react/errorBoundaries.tsx | 42 ++++++++++++++++-------- 3 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 .changeset/layout-error-boundary.md diff --git a/.changeset/layout-error-boundary.md b/.changeset/layout-error-boundary.md new file mode 100644 index 00000000000..b0709f7dde2 --- /dev/null +++ b/.changeset/layout-error-boundary.md @@ -0,0 +1,5 @@ +--- +"@remix-run/react": patch +--- + +account for presence of Layout in default error boundary diff --git a/integration/root-route-test.ts b/integration/root-route-test.ts index e3ab456f368..c24801a60c8 100644 --- a/integration/root-route-test.ts +++ b/integration/root-route-test.ts @@ -112,4 +112,44 @@ test.describe("root route", () => { console.error = oldConsoleError; }); + + test("renders the Layout around the default ErrorBoundary", async ({ page }) => { + let oldConsoleError; + oldConsoleError = console.error; + console.error = () => {}; + + fixture = await createFixture( + { + files: { + "app/root.tsx": js` + export function Layout({ children }) { + return ( + + + Layout Title + + + {children} + + + ); + } + export default function Root() { + throw new Error('broken render') + } + `, + }, + }, + ServerMode.Development + ); + appFixture = await createAppFixture(fixture, ServerMode.Development); + let app = new PlaywrightFixture(appFixture, page); + await app.goto("/"); + await page.waitForSelector("h1"); + console.log(await app.getHtml()) + expect(await app.getHtml("title")).toMatch("Layout Title"); + expect(await app.getHtml("h1")).toMatch("Application Error"); + + console.error = oldConsoleError; + }); }); diff --git a/packages/remix-react/errorBoundaries.tsx b/packages/remix-react/errorBoundaries.tsx index d89c908cfd0..2a892f300cf 100644 --- a/packages/remix-react/errorBoundaries.tsx +++ b/packages/remix-react/errorBoundaries.tsx @@ -2,6 +2,8 @@ import * as React from "react"; import type { Location } from "@remix-run/router"; import { isRouteErrorResponse } from "react-router-dom"; +import { useRemixContext } from "./components" + type RemixErrorBoundaryProps = React.PropsWithChildren<{ location: Location; error?: Error; @@ -67,9 +69,11 @@ export function RemixRootDefaultErrorBoundary({ error }: { error: unknown }) { if (isRouteErrorResponse(error)) { return ( -

- {error.status} {error.statusText} -

+
+

+ {error.status} {error.statusText} +

+
); } @@ -113,6 +117,27 @@ function BoundaryShell({ title: string; children: React.ReactNode; }) { + let { routeModules } = useRemixContext(); + + let contents = ( + <> + {children} +