feat: added route layout and error boundary

favicon.ico to reduce localhost 404
benvinegar · Jun 21, 2024 · 035e493 · 035e493
1 parent cca16c0
commit 035e493
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -6,13 +6,14 @@ import {
 } from "@remix-run/cloudflare";
 
 import {
+    isRouteErrorResponse,
     Links,
-    LiveReload,
     Meta,
     Outlet,
     Scripts,
     ScrollRestoration,
-    useLoaderData,
+    useRouteError,
+    useRouteLoaderData,
 } from "@remix-run/react";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
@@ -26,8 +27,13 @@ export const loader = ({ context, request }: LoaderFunctionArgs) => {
     });
 };
 
-export default function App() {
-    const data = useLoaderData<typeof loader>();
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+    const data = useRouteLoaderData<typeof loader>("root") ?? {
+        version: "unknown",
+        origin: "counterscale.dev",
+        url: "https://counterscale.dev/",
+    };
+    // const error = useRouteError();
 
     return (
         <html lang="en">
@@ -108,7 +114,7 @@ export default function App() {
                         </nav>
                     </header>
                     <main role="main" className="w-full">
-                        <Outlet />
+                        {children}
                     </main>
 
                     <footer className="py-4 flex justify-end text-s">
@@ -124,7 +130,6 @@ export default function App() {
                 </div>
                 <ScrollRestoration />
                 <Scripts />
-                <LiveReload />
                 <script
                     dangerouslySetInnerHTML={{
                         __html: "window.counterscale = {'q': [['set', 'siteId', 'counterscale-dev'], ['trackPageview']] };",
@@ -134,4 +139,30 @@ export default function App() {
             </body>
         </html>
     );
+};
+
+export default function App() {
+    return <Outlet />;
 }
+
+export const ErrorBoundary = () => {
+    const error = useRouteError();
+
+    if (isRouteErrorResponse(error)) {
+        return (
+            <>
+                <h1>
+                    {error.status} {error.statusText}
+                </h1>
+                <p>{error.data}</p>
+            </>
+        );
+    }
+
+    return (
+        <>
+            <h1>Error!</h1>
+            <p>{(error as { message?: string })?.message ?? "Unknown error"}</p>
+        </>
+    );
+};
diff --git a/public/favicon.ico b/public/favicon.ico