feat: add ErrorBoundary (#69)

* wip error boundary

* feat: replace icon

* test: add ErrorBoundary

Author: peppescg

src/components/Error.tsx

@@ -0,0 +1,41 @@
+import { CircleAlert } from "lucide-react";
+import { Header } from "./Header";
+import { Card } from "./ui/card";
+
+export function Error() {
+  return (
+    <div className="w-screen h-screen flex flex-col items-center justify-center">
+      <div className="flex-0 w-full">
+        <Header hasError />
+      </div>
+      <div className="h-24 flex flex-col flex-1 justify-center">
+        <Card className="p-8 flex flex-col items-center">
+          <CircleAlert className="text-red-600 mb-2 size-16" />
+          <div className="text-xl font-semibold text-gray-600 text-center">
+            An error occurred
+          </div>
+          <div className="text-md mb-4 text-gray-600 text-center text-balance">
+            If this issue persists, please reach out to us on{" "}
+            <a
+              className="underline text-gray-700"
+              href="https://discord.gg/stacklok"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Discord
+            </a>{" "}
+            or open a new{" "}
+            <a
+              className="underline text-gray-700"
+              href="https://github.com/stacklok/codegate/issues/new"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Github issue
+            </a>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/components/ErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { Component } from "react";
+
+interface Props {
+  children?: ReactNode;
+  fallback: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  public componentDidCatch() {
+    // this should log the error to a service like Sentry
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}

src/components/Header.tsx

@@ -2,12 +2,17 @@ import { Link } from "react-router-dom";
 import { SidebarTrigger } from "./ui/sidebar";
 import { Separator } from "./ui/separator";
 
-export function Header() {
+export function Header({ hasError }: { hasError?: boolean }) {
   return (
     <header className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-25 opacity-1 border-b-blue-200 border-b">
       <div className="flex items-center flex-1">
-        <SidebarTrigger />
-        <Separator orientation="vertical" className="h-8 mx-3" />
+        {!hasError && (
+          <>
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="h-8 mx-3" />
+          </>
+        )}
+
         <nav className="mx-1 flex">
           <Link to="/">
             <h1 className="text-2xl w-max flex font-semibold">

src/components/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,22 @@
+import { render } from "@/lib/test-utils";
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import ErrorBoundary from "../ErrorBoundary";
+import { Error } from "../Error";
+
+const ErrorComponent = () => {
+  throw Error();
+};
+
+describe("ErrorBoundary", () => {
+  it("renders fallback when a child throws an error", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    render(
+      <ErrorBoundary fallback={<Error />}>
+        <ErrorComponent />
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByText(/an error occurred/i)).toBeVisible();
+  });
+});

src/main.tsx

@@ -4,12 +4,16 @@ import "./index.css";
 import App from "./App.tsx";
 import { BrowserRouter } from "react-router-dom";
 import { SidebarProvider } from "./components/ui/sidebar.tsx";
+import ErrorBoundary from "./components/ErrorBoundary.tsx";
+import { Error } from "./components/Error.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
       <SidebarProvider>
-        <App />
+        <ErrorBoundary fallback={<Error />}>
+          <App />
+        </ErrorBoundary>
       </SidebarProvider>
     </BrowserRouter>
   </StrictMode>