How to load site styles for the v2 ErrorBoundary in the root.tsx? #6356

piotrkulpinski · 2023-05-09T10:50:26Z

piotrkulpinski
May 9, 2023

Hi,
I'm migrating my app to the new v2 features but I'm struggling with the new ErrorBoundary.
I can't get it to work as before, where I had a global boundary that was displaying the errors in the context of my app.

Currently, when the error is thrown in the root.tsx file, it's rendered on a clean HTML file, without any styles as if the links function was not rendered at all.

root.tsx:

import type { LinksFunction } from '@remix-run/node'
import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
import styles from '~/styles/app.css'

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: styles },
]

const App = () => {
 // throw new Error('test')

  return (
    <html>
      <head>
        <Links />
      </head>

      <body>
        Content
      </body>
    </html>
  )
}

export const ErrorBoundary = () => {
  const error = useRouteError()

  if (isRouteErrorResponse(error)) {
    return <h1>{error.status}</h1>
  }

  return <h1>Unknown Error</h1>
}

export default App

Any ideas?

sergiodxa · 2023-05-09T16:32:01Z

sergiodxa
May 9, 2023
Maintainer

The ErrorBoundary of your root must render the basic HTML document including <Links /> and possibly <Meta />, usually I create a Document component with that and pass the body content with the props.children

export default function Component() {
  return (
    <Document>
      <Outlet />
    </Document>
  )
}

export function ErrorBoundary() {
  let error = useRouteError()

  if (isRouteErrorResponse(error)) {
    return (
      <Document title={error.statusText}>
        <h1>{error.status}</h1>
      </Document>
    )
  }

  return (
    <Document title="Unknown Error ">
      <h1>Unknown Error</h1>
    </Document>
  )
}

function Document(props: { children: ReactNode; title: string }) {
  return (
    <html>
      <head>
        {props.title ? <title>{props.title}</title> : null}
        <Meta />
        <Links />
      </head>
      <body>
        {props.children}
        <Scripts />
      </body>
    </html>
  )
}

3 replies

piotrkulpinski May 9, 2023
Author

Thanks! I thought that in the V2 you shouldn't wrap the error boundary in the HTML tags (from looking at the docs).

sergiodxa May 10, 2023
Maintainer

I enabled V2 of ErrorBoundary and it works, there’s no reason to stop doing it for the root ErrorBoundary.

thebeyondr Jan 15, 2024

Thanks, lads! I was just trying to fix my error boundary in root and this helped. I'm using Vite & TailwindCSS and the Error Boundary was ignoring my styles. I think this should be added to a template if it isn't already — its really helpful.

For anyone who might find it useful:

// -- REMIX IMPORTS SKIPPED --

import { ReactNode } from "react";
import "./tailwind.css";

export default function App() {
  return (
    <Document>
      <Outlet />
    </Document>
  );
}

export function ErrorBoundary() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    return (
      <Document title={error.statusText}>
        <section className="w-full h-svh bg-red-100 text-red-600">
          <h1 className="text-3xl">Oops!</h1>
          <p>There was an error:</p>
          <pre>
            {error.status} {error.statusText || error.data}
          </pre>
          <Link to="/">Go home</Link>
        </section>
      </Document>
    );
  }
  if (error instanceof Error) {
    return (
      <div>
        <h1>Error</h1>
        <p>{error.message}</p>
        <p>The stack trace is:</p>
        <pre>{error.stack}</pre>
      </div>
    );
  }
  return <h1>Unknown Error</h1>;
}

function Document(props: { children: ReactNode, title?: string }) {
  return (
    <html lang="en">
      <head>
        {props.title ? <title>{props.title}</title> : null}
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {props.children}
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

fernandojbf · 2023-05-15T15:58:23Z

fernandojbf
May 15, 2023

@sergiodxa

In a multiple tenant applications where configurations are defined using a loader (styles, translations etc), how can we create a fallback 404 Page using V2 ErrorBoundary?

I understand the direction that ErrorBoundary in root should be deterministic since the error can occur in the root itself, but without having the Root wrapper we loose the capability of having fallback pages for the rest of the app. (404 pages does not mean a errored Root)

I'm missing something or is this a limitation of the V2?

3 replies

fernandojbf May 15, 2023

another example would be: If root is making the layout of the page, using header and footer with data from a CMS (requested by rootLoader), how can we build a fallback 404 page that contains Footer and Header...

fernandojbf May 17, 2023

I believe there is a work around using https://remix.run/docs/en/main/file-conventions/route-files-v2#splat-routes.

If we add a splat route after root, this will be treated as fallback. Having the ErrorBoundary will be treated as Outlet of root.

// /routes/$.tsx
import { Response } from "@remix-run/node";

export const loader = () => {
  throw new Response("Not Found", { status: 404 });
};

export default () => null;

export const ErrorBoundary = () => <div>error</div>;

I think I would prefer a more configurable way.
This can work for now but I think remix could benefit of having entry files for error, (like root.tsx). This would bring more options (error entries could have loaders too, links, meta .... etc).

This would be only used for root errors (like no match routes). If the developer would need something more simple (like ErrorBoundary V2) not adding those entry files and adding the ErrorBoundary export would be enough.

Seems to me that having only ErrorBoundary export is too much restrictive for what can be made in a error page.

RaoulHC Dec 8, 2023

I've been wrangling with this and I agree it seems limited.

I might be missing something (I'm still relatively new to remix and web dev), but it seems like you can ensure that nested routes in general have an error handler, and that it's rendered in the outlet, but you can't do this for the root route as it becomes the error boundary above the root layout.

This splat workaround doesn't entirely solve the issue as any routes are caught and then throw a 40x/50x response miss this error boundary (for example /user/:id where a user for that id doesn't exist).
I've ended up also adding error boundaries for all other routes above root, which works, but definitely isn't DRY and you've got to remember to do this for every new route you add, which is much more error prone.

How to load site styles for the v2 ErrorBoundary in the root.tsx? #6356

Uh oh!

Uh oh!

piotrkulpinski May 9, 2023

root.tsx:

Replies: 2 comments · 6 replies

Uh oh!

sergiodxa May 9, 2023 Maintainer

Uh oh!

piotrkulpinski May 9, 2023 Author

Uh oh!

sergiodxa May 10, 2023 Maintainer

Uh oh!

Uh oh!

thebeyondr Jan 15, 2024

Uh oh!

fernandojbf May 15, 2023

Uh oh!

fernandojbf May 15, 2023

Uh oh!

fernandojbf May 17, 2023

Uh oh!

RaoulHC Dec 8, 2023

piotrkulpinski
May 9, 2023

Replies: 2 comments 6 replies

sergiodxa
May 9, 2023
Maintainer

piotrkulpinski May 9, 2023
Author

sergiodxa May 10, 2023
Maintainer

fernandojbf
May 15, 2023