121 add react error boundary to app between navbar (#143)

* feat(frontend): install react error boundary

* feat(frontend): ✨ create an error boundary compoennt and add to root layout

* run prettier with tailwind plugin

frontend/package.json

@@ -38,6 +38,7 @@
         "qs": "^6.11.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.13",
         "react-markdown": "^9.0.1",
         "react-plotly.js": "^2.6.0",
         "satellite.js": "^5.0.0",

frontend/src/app/layout.tsx

@@ -15,6 +15,8 @@ export const metadata: Metadata = {
     description: "Generated by create next app",
 };
 
+import ErrorBoundaryNavigation from "@/components/ErrorBoundaryNavigation";
+
 export default function RootLayout({
     children,
 }: Readonly<{
@@ -31,7 +33,9 @@ export default function RootLayout({
                         disableTransitionOnChange
                     >
                         <Navbar />
-                        <main className="flex-grow">{children}</main>
+                        <ErrorBoundaryNavigation>
+                            <main className="flex-grow">{children}</main>
+                        </ErrorBoundaryNavigation>
                         <Footer />
                     </ThemeProvider>
                 </ApolloWrapper>

frontend/src/components/ErrorBoundaryNavigation.tsx

@@ -0,0 +1,22 @@
+"use client";
+import React from "react";
+
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function ErrorBoundaryNavigation({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <ErrorBoundary
+            fallback={
+                <div className="flex h-[calc(100vh-36px)] items-center justify-center">
+                    Something went wrong loading this page.
+                </div>
+            }
+        >
+            {children}
+        </ErrorBoundary>
+    );
+}