.

Author: kantord

src/app/catalog/[repoName]/[serverName]/[version]/not-found.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ErrorPage } from "@/components/error-page";
+import { ErrorPageLayout } from "@/components/error-page";
 import { NavigateBackButton } from "@/components/navigate-back-button";
 import { Button } from "@/components/ui/button";
 
@@ -13,7 +13,7 @@ export default function NotFound() {
         className="w-fit"
       />
 
-      <ErrorPage
+      <ErrorPageLayout
         title="Server Not Found"
         actions={
           <Button asChild variant="default">
@@ -23,7 +23,7 @@ export default function NotFound() {
       >
         The MCP server you're looking for doesn't exist or has been removed from
         the catalog.
-      </ErrorPage>
+      </ErrorPageLayout>
     </div>
   );
 }

src/app/catalog/error.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { RuntimeError } from "@/components/error-page";
+import { ErrorPage } from "@/components/error-page";
 
 interface ErrorProps {
   error: Error & { digest?: string };
   reset: () => void;
 }
 
 export default function CatalogErrorPage({ error, reset }: ErrorProps) {
-  return <RuntimeError error={error} reset={reset} />;
+  return <ErrorPage error={error} reset={reset} />;
 }

src/app/error.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { RuntimeError } from "@/components/error-page";
+import { ErrorPage } from "@/components/error-page";
 
 interface ErrorProps {
   error: Error & { digest?: string };
   reset: () => void;
 }
 
 export default function RootErrorPage({ error, reset }: ErrorProps) {
-  return <RuntimeError error={error} reset={reset} />;
+  return <ErrorPage error={error} reset={reset} />;
 }

src/app/not-found.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ErrorPage } from "@/components/error-page";
+import { ErrorPageLayout } from "@/components/error-page";
 import { Navbar } from "@/components/navbar";
 import { Button } from "@/components/ui/button";
 
@@ -8,7 +8,7 @@ export default async function NotFound() {
     <div className="flex flex-col h-screen">
       <Navbar />
       <main className="flex flex-col flex-1 overflow-hidden px-4 py-5">
-        <ErrorPage
+        <ErrorPageLayout
           title="Page Not Found"
           actions={
             <Button asChild variant="default">
@@ -17,7 +17,7 @@ export default async function NotFound() {
           }
         >
           The page you're looking for doesn't exist or has been moved.
-        </ErrorPage>
+        </ErrorPageLayout>
       </main>
     </div>
   );

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

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ErrorPage } from "./error-page-client";
+
+describe("ErrorPage", () => {
+  it("logs errors to console on mount", () => {
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    const error = new Error("Test error");
+
+    render(<ErrorPage error={error} reset={vi.fn()} />);
+
+    expect(consoleError).toHaveBeenCalledWith(error);
+    consoleError.mockRestore();
+  });
+
+  it("displays 'Something went wrong' title", () => {
+    render(<ErrorPage error={new Error("Test")} reset={vi.fn()} />);
+
+    expect(
+      screen.getByRole("heading", { name: /something went wrong/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("displays error description", () => {
+    render(<ErrorPage error={new Error("Test")} reset={vi.fn()} />);
+
+    expect(
+      screen.getByText(/an unexpected error occurred/i),
+    ).toBeInTheDocument();
+  });
+
+  it("calls reset function when Try again button is clicked", async () => {
+    const user = userEvent.setup();
+    const reset = vi.fn();
+
+    render(<ErrorPage error={new Error("Test")} reset={reset} />);
+
+    await user.click(screen.getByRole("button", { name: /try again/i }));
+
+    expect(reset).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not expose error message to user", () => {
+    const error = new Error("Sensitive internal error details");
+
+    render(<ErrorPage error={error} reset={vi.fn()} />);
+
+    expect(
+      screen.queryByText(/sensitive internal error/i),
+    ).not.toBeInTheDocument();
+  });
+});

…/components/error-page/runtime-error.tsx …ponents/error-page/error-page-client.tsxsrc/components/error-page/runtime-error.tsx renamed to src/components/error-page/error-page-client.tsx src/components/error-page/runtime-error.tsx renamed to src/components/error-page/error-page-client.tsx

@@ -2,20 +2,20 @@
 
 import { useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { ErrorPage } from "./error-page";
+import { ErrorPageLayout } from "./error-page";
 
-interface RuntimeErrorProps {
+interface ErrorPageProps {
   error: Error & { digest?: string };
   reset: () => void;
 }
 
-export function RuntimeError({ error, reset }: RuntimeErrorProps) {
+export function ErrorPage({ error, reset }: ErrorPageProps) {
   useEffect(() => {
     console.error(error);
   }, [error]);
 
   return (
-    <ErrorPage
+    <ErrorPageLayout
       title="Something went wrong"
       actions={
         <Button onClick={reset} variant="default">
@@ -24,6 +24,6 @@ export function RuntimeError({ error, reset }: RuntimeErrorProps) {
       }
     >
       An unexpected error occurred. Please try again.
-    </ErrorPage>
+    </ErrorPageLayout>
   );
 }

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

@@ -1,30 +1,36 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { ErrorPage } from "./error-page";
+import { ErrorPageLayout } from "./error-page";
 
-describe("ErrorPage", () => {
+describe("ErrorPageLayout", () => {
   it("displays the title", () => {
-    render(<ErrorPage title="Test Error">Error description</ErrorPage>);
+    render(
+      <ErrorPageLayout title="Test Error">Error description</ErrorPageLayout>,
+    );
 
     expect(
       screen.getByRole("heading", { name: /test error/i }),
     ).toBeInTheDocument();
   });
 
   it("displays children as description", () => {
-    render(<ErrorPage title="Error">This is the error message</ErrorPage>);
+    render(
+      <ErrorPageLayout title="Error">
+        This is the error message
+      </ErrorPageLayout>,
+    );
 
     expect(screen.getByText(/this is the error message/i)).toBeInTheDocument();
   });
 
   it("displays action buttons when provided", () => {
     render(
-      <ErrorPage
+      <ErrorPageLayout
         title="Error"
         actions={<button type="button">Click me</button>}
       >
         Description
-      </ErrorPage>,
+      </ErrorPageLayout>,
     );
 
     expect(
@@ -34,7 +40,7 @@ describe("ErrorPage", () => {
 
   it("displays a decorative illustration", () => {
     const { container } = render(
-      <ErrorPage title="Error">Description</ErrorPage>,
+      <ErrorPageLayout title="Error">Description</ErrorPageLayout>,
     );
 
     const svg = container.querySelector("svg[aria-hidden='true']");

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

@@ -1,13 +1,17 @@
 import type { ReactNode } from "react";
 import { IllustrationError } from "@/components/illustrations/illustration-error";
 
-interface ErrorPageProps {
+interface ErrorPageLayoutProps {
   title: string;
   children: ReactNode;
   actions?: ReactNode;
 }
 
-export function ErrorPage({ title, children, actions }: ErrorPageProps) {
+export function ErrorPageLayout({
+  title,
+  children,
+  actions,
+}: ErrorPageLayoutProps) {
   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">

src/components/error-page/index.ts

@@ -1,2 +1,2 @@
-export { ErrorPage } from "./error-page";
-export { RuntimeError } from "./runtime-error";
+export { ErrorPageLayout } from "./error-page";
+export { ErrorPage } from "./error-page-client";