Remove CatchBoundary for v2

.changeset/eight-squids-greet.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/react": major
+"@remix-run/server-runtime": major
+---
+
+Remove `v2_errorBoundary` flag and `CatchBoundary` logic

docs/api/conventions.md

@@ -178,10 +178,6 @@ title: Conventions
 
 [Moved →][moved-41]
 
-### CatchBoundary
-
-[Moved →][moved-42]
-
 ### ErrorBoundary
 
 [Moved →][moved-43]
@@ -239,7 +235,6 @@ title: Conventions
 [moved-39]: ../route/links
 [moved-40]: ../route/links#htmllinkdescriptor
 [moved-41]: ../route/links#pagelinkdescriptor
-[moved-42]: ../route/catch-boundary
 [moved-43]: ../route/error-boundary
 [moved-44]: ../route/handle
 [moved-45]: ../route/should-revalidate

docs/guides/routing.md

@@ -369,7 +369,7 @@ export async function loader({ params }: LoaderArgs) {
 
 You can add splats at any level of your route hierarchy. Any sibling routes will match first (like `/files/mine`).
 
-It's common to add a `routes/$.jsx` file build custom 404 pages with data from a loader (without it, Remix renders your root `CatchBoundary` with no ability to load data for the page when the URL doesn't match any routes).
+It's common to add a `routes/$.jsx` file build custom 404 pages with data from a loader (without it, Remix renders your root `ErrorBoundary` with no ability to load data for the page when the URL doesn't match any routes).
 
 ## Conclusion
 

docs/pages/faq.md

@@ -220,11 +220,4 @@ Again, `formData.getAll()` is often all you need, we encourage you to give it a
 [form-data]: https://developer.mozilla.org/en-US/docs/Web/API/FormData
 [query-string]: https://www.npmjs.com/package/query-string
 [ramda]: https://www.npmjs.com/package/ramda
-
-## What's the difference between `CatchBoundary` & `ErrorBoundary`?
-
-Error boundaries render when your application throws an error and you had no clue it was going to happen. Most apps just go blank or have spinners spin forever. In remix the error boundary renders and you have granular control over it.
-
-Catch boundaries render when you decide in a loader that you can't proceed down the happy path to render the UI you want (auth required, record not found, etc.), so you throw a response and let some catch boundary up the tree handle it.
-
 [watch-on-you-tube]: https://www.youtube.com/watch?v=w2i-9cYxSdc&ab_channel=Remix

docs/route/error-boundary.md

@@ -4,28 +4,6 @@ title: ErrorBoundary
 
 # `ErrorBoundary`
 
-<docs-warning>The separation of `CatchBoundary` and `ErrorBoundary` has been deprecated and Remix v2 will use a singular `ErrorBoundary` for all thrown Responses and Errors. It is recommended that you opt-into the new behavior in Remix v1 via the `future.v2_errorBoundary` flag in your `remix.config.js` file. Please refer to the [ErrorBoundary (v2)][error-boundary-v2] docs for more information.</docs-warning>
+An `ErrorBoundary` is a React component that renders whenever anything is thrown anywhere on the route, either during rendering or during data loading. This can be a thrown `Response`/`Error` from a loader/action or an `Error` thrown during rendering. This `ErrorBoundary` is an implementation of the React Router []`errorElement`/`ErrorBoundary`][rr-error-boundary].
 
-An `ErrorBoundary` is a React component that renders whenever there is an error anywhere on the route, either during rendering or during data loading.
-
-**Note:** We use the word "error" to mean an uncaught exception; something you didn't anticipate happening. This is different from other types of "errors" that you are able to recover from easily, for example a 404 error where you can still show something in the user interface to indicate you weren't able to find some data.
-
-A Remix `ErrorBoundary` component works just like normal React [error boundaries][error-boundaries], but with a few extra capabilities. When there is an error in your route component, the `ErrorBoundary` will be rendered in its place, nested inside any parent routes. `ErrorBoundary` components also render when there is an error in the `loader` or `action` functions for a route, so all errors for that route may be handled in one spot.
-
-An `ErrorBoundary` component receives one prop: the `error` that occurred.
-
-```tsx
-export function ErrorBoundary({ error }) {
-  return (
-    <div>
-      <h1>Error</h1>
-      <p>{error.message}</p>
-      <p>The stack trace is:</p>
-      <pre>{error.stack}</pre>
-    </div>
-  );
-}
-```
-
-[error-boundaries]: https://reactjs.org/docs/error-boundaries.html
-[error-boundary-v2]: ./error-boundary-v2
+[rr-error-boundary]: https://reactrouter.com/en/main/route/error-element

integration/action-test.ts

@@ -19,7 +19,6 @@ test.describe("actions", () => {
     fixture = await createFixture({
       future: {
         v2_routeConvention: true,
-        v2_errorBoundary: true,
       },
       files: {
         "app/routes/urlencoded.jsx": js`