feat: create generic error page

Author: kantord

src/app/catalog/actions.ts

@@ -11,7 +11,7 @@ export async function getServers(): Promise<V0ServerJson[]> {
 
   if (resp.error) {
     console.error("[catalog] Failed to fetch servers:", resp.error);
-    return [];
+    throw new Error("Failed to fetch servers");
   }
 
   if (!resp.data) {

src/app/catalog/error.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+import { ErrorPage } from "@/components/error-page";
+import { Button } from "@/components/ui/button";
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function CatalogErrorPage({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <ErrorPage
+      title="Something went wrong"
+      actions={
+        <Button onClick={reset} variant="default">
+          Try again
+        </Button>
+      }
+    >
+      An unexpected error occurred. Please try again.
+    </ErrorPage>
+  );
+}

src/app/error.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+import { ErrorPage } from "@/components/error-page";
+import { NavbarLogo } from "@/components/navbar-logo";
+import { Button } from "@/components/ui/button";
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function RootErrorPage({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-col h-screen">
+      <header className="w-full border-b bg-muted/50 flex items-center justify-between pl-8 pr-4 h-16">
+        <NavbarLogo />
+      </header>
+      <main className="flex flex-col flex-1 overflow-hidden px-4 py-5">
+        <ErrorPage
+          title="Something went wrong"
+          actions={
+            <Button onClick={reset} variant="default">
+              Try again
+            </Button>
+          }
+        >
+          An unexpected error occurred. Please try again.
+        </ErrorPage>
+      </main>
+    </div>
+  );
+}

src/components/error-page/error-page.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { IllustrationNoLocation } from "@/components/illustrations/illustration-no-location";
+import { IllustrationError } from "@/components/illustrations/illustration-error";
 
 interface ErrorPageProps {
   title: string;
@@ -11,7 +11,7 @@ export function ErrorPage({ title, children, actions }: ErrorPageProps) {
   return (
     <div className="flex items-center justify-center min-h-[80vh]">
       <div className="flex flex-col items-center text-center gap-4 max-w-md">
-        <IllustrationNoLocation className="size-40" />
+        <IllustrationError className="size-40" />
 
         <div className="space-y-2">
           <h2 className="text-2xl font-bold tracking-tight">{title}</h2>

src/components/illustrations/illustration-error.tsx

@@ -0,0 +1,68 @@
+import type { SVGProps } from "react";
+
+export const IllustrationError = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 136 136"
+    fill="none"
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fill="var(--color-background)"
+      fillRule="evenodd"
+      d="M28.5 116c-12.15 0-22-9.626-22-21.5S16.35 73 28.5 73c.517 0 1.03.017 1.537.052A34.205 34.205 0 0 1 29.5 67c0-18.778 15.222-34 34-34 14.991 0 27.716 9.702 32.239 23.17C96.81 56.056 97.899 56 99 56c16.845 0 30.5 13.431 30.5 30 0 15.741-12.325 28.727-28 29.978V116h-73zm11.996 0h-6.965 6.965z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="var(--color-muted-foreground)"
+      strokeLinecap="round"
+      strokeWidth={2.5}
+      d="M40.496 116h-6.965m-5.031 0c-12.15 0-22-9.626-22-21.5S16.35 73 28.5 73c.517 0 1.03.017 1.537.052A34.205 34.205 0 0 1 29.5 67c0-18.778 15.222-34 34-34 14.991 0 27.716 9.702 32.239 23.17C96.81 56.056 97.899 56 99 56c16.845 0 30.5 13.431 30.5 30 0 15.741-12.325 28.727-28 29.978V116h-73z"
+    />
+    <path
+      fill="transparent"
+      fillRule="evenodd"
+      d="M53.112 40.343c0 32.223 29.02 58.775 66.388 62.36-4.683 5.758-11.914 9.665-20.153 10.278V113H32.243c-8.142 0-21.743-3.43-21.743-18.452 0-15.021 10.574-18.451 21.743-18.451.475 0 .946.015 1.413.044-.324-1.685-.381-3.423-.494-5.194-.758-11.963 4.46-27.04 19.968-31.947-.012.447-.018.894-.018 1.343zm10.504 50.415c-3.038 0-5.502 2.434-5.502 5.437s2.464 5.437 5.502 5.437c3.039 0 5.502-2.434 5.502-5.437s-2.463-5.437-5.502-5.437z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="var(--color-muted-foreground)"
+      strokeWidth={2.5}
+      d="M64 102a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11z"
+    />
+    <path
+      stroke="var(--color-muted-foreground)"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.5}
+      d="m48.5 85 7-5.493-7-5.23M79.5 85l-7-5.493 7-5.23"
+    />
+    <path
+      stroke="var(--color-muted-foreground)"
+      strokeLinecap="round"
+      strokeWidth={2.5}
+      d="M73.5 43a19.036 19.036 0 0 1 13.44 13.293"
+    />
+    <path
+      stroke="var(--color-muted-foreground)"
+      strokeWidth={2}
+      d="M94.5 26a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+    />
+    <path
+      fill="var(--color-muted-foreground)"
+      d="M125.5 42a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+    />
+    <path
+      stroke="var(--color-muted-foreground)"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.5}
+      d="m102.257 33.757 8.359 8.359m.127-8.359-8.359 8.359 8.359-8.359zM7.904 51.596l6 6m0-6-6 6 6-6z"
+    />
+    <path
+      fill="var(--color-muted-foreground)"
+      d="M21.5 45a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+    />
+  </svg>
+);

src/mocks/handlers.ts

@@ -9,6 +9,12 @@ const scenarioHandlers = [
   mockScenario("empty-servers").get("*/registry/v0.1/servers", () => {
     return HttpResponse.json({ servers: [], metadata: { count: 0 } });
   }),
+  mockScenario("server-error").get("*/registry/v0.1/servers", () => {
+    return HttpResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    );
+  }),
 ];
 
 export const handlers: RequestHandler[] = [