Docs Navigation


A CatchBoundary is a React component that renders whenever an action or loader throws a Response.

Note: We use the word "catch" to represent the codepath taken when a Response type is thrown; you thought about bailing from the "happy path". This is different from an uncaught error you did not expect to occur.

A Remix CatchBoundary component works just like a route component, but instead of useLoaderData you have access to useCatch. When a response is thrown in an action or loader, the CatchBoundary will be rendered in its place, nested inside parent routes.

A CatchBoundary component has access to the status code and thrown response data through useCatch.

import { useCatch } from "@remix-run/react";

export function CatchBoundary() {
  const caught = useCatch();

  return (
      <p>Status: {caught.status}</p>
        <code>{JSON.stringify(, null, 2)}</code>