Error Handling

    Remix will automatically catch errors and render the nearest error boundary for errors thrown while:

    • rendering in the browser
    • rendering on the server
    • in an action during the initial server rendered document request
    • in a loader during a client-side transition in the browser (Remix serializes the error and sends it over the network to the browser)
    • in an action during a client-side transition in the browser

    If you used one of the starter templates you should already have an error boundary in your root.{tsx|jsx} file. You’ll want to edit that right away because that’s what your users will see whenever an uncaught error is thrown.

    Nested Error Boundaries

    Each route in the hierarchy is a potential error boundary. If a nested route exports an error boundary, then any errors below it will be caught and rendered there. This means that the rest of the surrounding UI in the parent routes continue to render normally so the user is able to click another link and not lose any client-side state they might have had.

    For example, consider these routes:

    2. │   ├── invoices
    4. │   └── invoices.js
    5. └── sales.js

    If a route doesn’t have an error boundary, the error “bubbles up” to the closest error boundary, all the way to the root, so you don’t have to add error boundaries to every route—only when you want to add that extra touch to your UI.