Shopify · wizardlyhel · Mar 30, 2023 · Mar 29, 2023 · Mar 29, 2023 · Mar 29, 2023
diff --git a/.changeset/tidy-papayas-check.md b/.changeset/tidy-papayas-check.md
@@ -0,0 +1,99 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Adopt Remix [`v2_errorBoundary`](https://remix.run/docs/en/release-next/route/error-boundary-v2) future flag
+
+### `v2_errorBoundary` migration steps
+
+1. Remove all `CatchBoundary` route exports
+
+2. Handle route level errors with `ErrorBoundary`
+
+   Before:
+
+   ```jsx
+   // app/root.tsx
+   export function ErrorBoundary({error}: {error: Error}) {
+     const [root] = useMatches();
+     const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
+
+     return (
+       <html lang={locale.language}>
+         <head>
+           <title>Error</title>
+           <Meta />
+           <Links />
+         </head>
+         <body>
+           <Layout layout={root?.data?.layout}>
+             <GenericError error={error} />
+           </Layout>
+           <Scripts />
+         </body>
+       </html>
+     );
+   }
+   ```
+
+   After:
+
+   ```jsx
+   // app/root.tsx
+   import {isRouteErrorResponse, useRouteError} from '@remix-run/react';
+
+   export function ErrorBoundary({error}: {error: Error}) {
+     const [root] = useMatches();
+     const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
+     const routeError = useRouteError();
+     const isRouteError = isRouteErrorResponse(routeError);
+
+     let title = 'Error';
+     let pageType = 'page';
+
+     // We have an route error
+     if (isRouteError) {
+       title = 'Not found';
+
+       // We have a page not found error
+       if (routeError.status === 404) {
+         pageType = routeError.data || pageType;
+       }
+     }
+
+     return (
+       <html lang={locale.language}>
+         <head>
+           <title>{title}</title>
+           <Meta />
+           <Links />
+         </head>
+         <body>
+           <Layout
+             layout={root?.data?.layout}
+             key={`${locale.language}-${locale.country}`}
+           >
+             {isRouteError ? (
+               <>
+                 {routeError.status === 404 ? (
+                   <NotFound type={pageType} />
+                 ) : (
+                   <GenericError
+                     error={{
+                       message: `${routeError.status} ${routeError.data}`,
+                     }}
+                   />
+                 )}
+               </>
+             ) : (
+               <GenericError
+                 error={error instanceof Error ? error : undefined}
+               />
+             )}
+           </Layout>
+           <Scripts />
+         </body>
+       </html>
+     );
+   }
+   ```
diff --git a/packages/cli/src/virtual-routes/routes/index.tsx b/packages/cli/src/virtual-routes/routes/index.tsx
@@ -55,10 +55,6 @@ export async function loader({context}: {context: AppLoadContext}) {
 
 export const HYDROGEN_SHOP_ID = 'gid://shopify/Shop/55145660472';
 
-export function CatchBoundary() {
-  return <ErrorPage />;
-}
-
 export function ErrorBoundary() {
   return <ErrorPage />;
 }

diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx
@@ -5,14 +5,15 @@ import {
   type AppLoadContext,
 } from '@shopify/remix-oxygen';
 import {
+  isRouteErrorResponse,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-  useCatch,
   useLoaderData,
   useMatches,
+  useRouteError,
 } from '@remix-run/react';
 import {ShopifySalesChannel, Seo} from '@shopify/hydrogen';
 import {Layout} from '~/components';
@@ -93,16 +94,26 @@ export default function App() {
   );
 }
 
-export function CatchBoundary() {
+export function ErrorBoundary({error}: {error: Error}) {
   const [root] = useMatches();
-  const caught = useCatch();
-  const isNotFound = caught.status === 404;
-  const locale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const routeError = useRouteError();
+  const isRouteError = isRouteErrorResponse(routeError);
+
+  let title = 'Error';
+  let pageType = 'page';
+
+  if (isRouteError) {
+    title = 'Not found';
+    if (routeError.status === 404) pageType = routeError.data || pageType;
+  }
 
   return (
     <html lang={locale.language}>
       <head>
-        <title>{isNotFound ? 'Not found' : 'Error'}</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>{title}</title>
         <Meta />
         <Links />
       </head>
@@ -111,12 +122,18 @@ export function CatchBoundary() {
           layout={root?.data?.layout}
           key={`${locale.language}-${locale.country}`}
         >
-          {isNotFound ? (
-            <NotFound type={caught.data?.pageType} />
+          {isRouteError ? (
+            <>
+              {routeError.status === 404 ? (
+                <NotFound type={pageType} />
+              ) : (
+                <GenericError
+                  error={{message: `${routeError.status} ${routeError.data}`}}
+                />
+              )}
+            </>
           ) : (
-            <GenericError
-              error={{message: `${caught.status} ${caught.data}`}}
-            />
+            <GenericError error={error instanceof Error ? error : undefined} />
           )}
         </Layout>
         <Scripts />
@@ -125,29 +142,6 @@ export function CatchBoundary() {
   );
 }
 
-export function ErrorBoundary({error}: {error: Error}) {
-  const [root] = useMatches();
-  const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
-
-  return (
-    <html lang={locale.language}>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <title>Error</title>
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Layout layout={root?.data?.layout}>
-          <GenericError error={error} />
-        </Layout>
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
 const LAYOUT_QUERY = `#graphql
   query layoutMenus(
     $language: LanguageCode

diff --git a/templates/demo-store/app/routes/($lang)/collections/$collectionHandle.tsx b/templates/demo-store/app/routes/($lang)/collections/$collectionHandle.tsx
@@ -120,7 +120,7 @@ export async function loader({params, request, context}: LoaderArgs) {
   });
 
   if (!collection) {
-    throw new Response(null, {status: 404});
+    throw new Response('collection', {status: 404});
   }
 
   const collectionNodes = flattenConnection(collections);

diff --git a/templates/demo-store/app/routes/($lang)/products/$productHandle.tsx b/templates/demo-store/app/routes/($lang)/products/$productHandle.tsx
@@ -71,7 +71,7 @@ export async function loader({params, request, context}: LoaderArgs) {
   });
 
   if (!product?.id) {
-    throw new Response(null, {status: 404});
+    throw new Response('product', {status: 404});
   }
 
   const recommended = getRecommendedProducts(context.storefront, product.id);

diff --git a/templates/demo-store/remix.config.js b/templates/demo-store/remix.config.js
@@ -19,6 +19,7 @@ module.exports = {
   future: {
     unstable_postcss: true,
     unstable_tailwind: true,
+    v2_errorBoundary: true,
     v2_meta: true,
   },
 };