From 28332c5be56a613aa639da0fa0bbb9d5ffc0aa7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?=
 <magnus.stromseng@gmail.com>
Date: Mon, 18 Mar 2024 09:40:07 +0100
Subject: [PATCH] 121 add react error boundary to app between navbar (#143)

* feat(frontend): install react error boundary

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

* run prettier with tailwind plugin
---
 frontend/package-lock.json                    | 12 ++++++++++
 frontend/package.json                         |  1 +
 frontend/src/app/layout.tsx                   |  6 ++++-
 .../components/ErrorBoundaryNavigation.tsx    | 22 +++++++++++++++++++
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/ErrorBoundaryNavigation.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c4bc369..a73a5f2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -33,6 +33,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",
@@ -15363,6 +15364,17 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-error-boundary": {
+            "version": "4.0.13",
+            "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+            "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5"
+            },
+            "peerDependencies": {
+                "react": ">=16.13.1"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8387a21..01e38e4 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 1967f48..53fa7ab 100644
--- a/frontend/src/app/layout.tsx
+++ b/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>
diff --git a/frontend/src/components/ErrorBoundaryNavigation.tsx b/frontend/src/components/ErrorBoundaryNavigation.tsx
new file mode 100644
index 0000000..fb92d91
--- /dev/null
+++ b/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>
+    );
+}