ErrorBoundary for Remix app

root.jsx

export function ErrorBoundary({ error }) {
  console.log(error);

  return (
    <Document>
      <Layout>
        <section className="p-6">
          <div className="relative items-center w-full px-5 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl">
            <h1>There was an Error</h1>
            <p>{error.message}</p>
          </div>
        </section>
      </Layout>
    </Document>
  );
}