index.tsx

import {type ErrorBoundaryComponent} from '@shopify/remix-oxygen';
import {useCatch, useRouteError, isRouteErrorResponse} from '@remix-run/react';

export default function Index() {
  return (
    <p>
      Edit this route in <em>app/routes/index.tsx</em>.
    </p>
  );
}

export const ErrorBoundaryV1: ErrorBoundaryComponent = ({error}) => {
  console.error(error);

  return <div>There was an error.</div>;
};

export function CatchBoundary() {
  const caught = useCatch();
  console.error(caught);

  return (
    <div>
      There was an error. Status: {caught.status}. Message:{' '}
      {caught.data?.message}
    </div>
  );
}

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    console.error(error.status, error.statusText, error.data);
    return <div>Route Error</div>;
  } else {
    console.error((error as Error).message);
    return <div>Thrown Error</div>;
  }
}