From e8c58e923c5d144408b7db5921bb8d1be41a53ce Mon Sep 17 00:00:00 2001
From: Aaron Pettengill <pettengill.aaron@gmail.com>
Date: Sun, 16 Jun 2024 00:23:29 -0400
Subject: [PATCH] feat: add a root error boundary

---
 apps/docs-v2/app/root.tsx | 43 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/apps/docs-v2/app/root.tsx b/apps/docs-v2/app/root.tsx
index 9aebb651..705f6b6d 100644
--- a/apps/docs-v2/app/root.tsx
+++ b/apps/docs-v2/app/root.tsx
@@ -4,6 +4,8 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  isRouteErrorResponse,
+  useRouteError,
 } from "@remix-run/react";
 import "./tailwind.css";
 import { ThemeProvider } from "./ui/theme/themeMachine";
@@ -35,3 +37,44 @@ export function Layout({ children }: { children: React.ReactNode }) {
 export default function App() {
   return <Outlet />;
 }
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 404) {
+      return (
+        <div className="container flex flex-col gap-4 items-center justify-center h-screen">
+          <h1 className="text-3xl">404</h1>
+          <p>
+            These docs are still in development, so I probably haven't added
+            this page yet.
+          </p>
+        </div>
+      );
+    }
+    return (
+      <div className="container flex flex-col gap-4 items-center justify-center h-screen">
+        <h1 className="text-3xl">
+          {error.status} {error.statusText}
+        </h1>
+        <p>{error.data}</p>
+      </div>
+    );
+  } else if (error instanceof Error) {
+    return (
+      <div className="container flex flex-col gap-4 items-center justify-center h-screen">
+        <h1 className="text-3xl">Error</h1>
+        <p>{error.message}</p>
+        <p>The stack trace is:</p>
+        <pre>{error.stack}</pre>
+      </div>
+    );
+  } else {
+    return (
+      <div className="container flex flex-col gap-4 items-center justify-center h-screen">
+        <h1 className="text-3xl">Unknown error</h1>
+      </div>
+    );
+  }
+}