fix: account for presence of Layout in default error boundary (#8859)

remix-run · Feb 22, 2024 · 1e31f68 · 1e31f68
1 parent dc5cdb7
commit 1e31f68
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 13 deletions.
diff --git a/.changeset/layout-error-boundary.md 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
@@ -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 (
+              <html>
+                <head>
+                  <title>Layout Title</title>
+                </head>
+                <body>
+                  {children}
+                </body>
+              </html>
+            );
+          }
+          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
@@ -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 (
       <BoundaryShell title="Unhandled Thrown Response!">
-        <h1 style={{ fontFamily: "system-ui, sans-serif", padding: "2rem" }}>
-          {error.status} {error.statusText}
-        </h1>
+        <main style={{ fontFamily: "system-ui, sans-serif", padding: "2rem" }}>
+          <h1 style={{ fontSize: "24px" }}>
+            {error.status} {error.statusText}
+          </h1>
+        </main>
       </BoundaryShell>
     );
   }
@@ -113,6 +117,27 @@ function BoundaryShell({
   title: string;
   children: React.ReactNode;
 }) {
+  let { routeModules } = useRemixContext();
+
+  let contents = (
+    <>
+      {children}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+              console.log(
+                "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://remix.run/guides/errors for more information."
+              );
+            `,
+        }}
+      />
+    </>
+  );
+
+  if (routeModules.root?.Layout) {
+    return contents;
+  }
+
   return (
     <html lang="en">
       <head>
@@ -124,16 +149,7 @@ function BoundaryShell({
         <title>{title}</title>
       </head>
       <body>
-        {children}
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              console.log(
-                "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://remix.run/guides/errors for more information."
-              );
-            `,
-          }}
-        />
+        {contents}
       </body>
     </html>
   );