From 9455a0a0a3447657fbb2f81b5e6b417c3a798049 Mon Sep 17 00:00:00 2001
From: gearnode <bryan@frimin.fr>
Date: Wed, 12 Feb 2025 08:57:24 -0800
Subject: [PATCH] Update style error boundary

Signed-off-by: gearnode <bryan@frimin.fr>
---
 apps/console/src/App.tsx                      | 84 ++++++++++++++++---
 apps/console/src/components/ErrorBoundary.tsx | 14 ++--
 2 files changed, 80 insertions(+), 18 deletions(-)

diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx
index 45534233f..237657395 100644
--- a/apps/console/src/App.tsx
+++ b/apps/console/src/App.tsx
@@ -7,6 +7,7 @@ import { RelayEnvironmentProvider } from "react-relay";
 import { BrowserRouter, Route, Routes } from "react-router";
 import "App.css";
 import ErrorBoundary from "./components/ErrorBoundary";
+import { ErrorPage } from "./pages/ErrorPage";
 import ConsoleLayout from "./layouts/ConsoleLayout";
 import { RelayEnvironment } from "./RelayEnvironment";
 
@@ -30,23 +31,80 @@ const FrameworkOverviewPage = lazy(() => import("./pages/FrameworkOverviewPage")
 function App() {
   return (
     <StrictMode>
-      <ErrorBoundary fallback={<p>Something went wrong</p>}>
+      <ErrorBoundary>
         <PostHogProvider client={posthog}>
           <RelayEnvironmentProvider environment={RelayEnvironment}>
             <HelmetProvider>
               <BrowserRouter>
-                <Suspense>
-                  <Routes>
-                    <Route path="/" element={<ConsoleLayout />}>
-                      <Route index element={<HomePage />} />
-                      <Route path="/peoples" element={<PeoplesPage />} />
-                      <Route path="/vendors" element={<VendorList />} />
-                      <Route path="/frameworks" element={<FrameworksPage />} />
-                      <Route path="/frameworks/:frameworkId" element={<FrameworkOverviewPage />} />
-                    </Route>
-                    <Route path="*" element={<NotFoundPage />} />
-                  </Routes>
-                </Suspense>
+                <Routes>
+                  <Route
+                    path="/"
+                    element={
+                      <ErrorBoundary>
+                        <ConsoleLayout />
+                      </ErrorBoundary>
+                    }
+                  >
+                    <Route
+                      index
+                      element={
+                        <Suspense>
+                          <ErrorBoundary>
+                            <HomePage />
+                          </ErrorBoundary>
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="/peoples"
+                      element={
+                        <Suspense>
+                          <ErrorBoundary>
+                            <PeoplesPage />
+                          </ErrorBoundary>
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="/vendors"
+                      element={
+                        <Suspense>
+                          <ErrorBoundary>
+                            <VendorList />
+                          </ErrorBoundary>
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="/frameworks"
+                      element={
+                        <Suspense>
+                          <ErrorBoundary>
+                            <FrameworksPage />
+                          </ErrorBoundary>
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="/frameworks/:frameworkId"
+                      element={
+                        <Suspense>
+                          <ErrorBoundary>
+                            <FrameworkOverviewPage />
+                          </ErrorBoundary>
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="*"
+                      element={
+                        <Suspense>
+                          <NotFoundPage />
+                        </Suspense>
+                      }
+                    />
+                  </Route>
+                </Routes>
               </BrowserRouter>
             </HelmetProvider>
           </RelayEnvironmentProvider>
diff --git a/apps/console/src/components/ErrorBoundary.tsx b/apps/console/src/components/ErrorBoundary.tsx
index 795f6af75..65a2ce4f6 100644
--- a/apps/console/src/components/ErrorBoundary.tsx
+++ b/apps/console/src/components/ErrorBoundary.tsx
@@ -1,23 +1,24 @@
 import { Component, ErrorInfo, ReactNode } from "react";
+import { ErrorPage } from "@/pages/ErrorPage";
 
 interface ErrorBoundaryProps {
   children: ReactNode;
-  fallback: ReactNode;
+  fallback?: ReactNode;
 }
 
 interface ErrorBoundaryState {
   hasError: boolean;
-  error: Error | undefined;
+  error?: Error;
 }
 
 class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   constructor(props: ErrorBoundaryProps) {
     super(props);
-    this.state = { hasError: false, error: undefined };
+    this.state = { hasError: false };
   }
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error: error };
+    return { hasError: true, error };
   }
 
   componentDidCatch(error: Error, info: ErrorInfo): void {
@@ -27,7 +28,10 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 
   render(): ReactNode {
     if (this.state.hasError) {
-      return this.props.fallback;
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return <ErrorPage error={this.state.error} />;
     }
 
     return this.props.children;