add error boundary for components (#545)

* add error handling

* change message

* update docs

client/package.json

@@ -32,6 +32,7 @@
     "react": "^18.2.0",
     "react-calendar": "^5.0.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-firebase-hooks": "^5.1.1",
     "react-router-dom": "^6.10.0",
     "react-sweet-state": "^2.7.1",

client/src/App.tsx

@@ -3,14 +3,23 @@ import queryClient from "services/QueryClient"
 import { QueryClientProvider } from "@tanstack/react-query"
 import { AllRoutes } from "./routes/routes"
 import { AppNavbar } from "components/composite/Navbar/AppNavbar"
+import { ErrorBoundary } from "react-error-boundary"
+import RefreshNotification from "pages/RefreshNotification/RefreshNotification"
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <AppNavbar />
         <div className="pt-[51px]">
-          <AllRoutes />
+          <ErrorBoundary
+            fallback={<RefreshNotification />}
+            onError={() => {
+              window.location.reload()
+            }}
+          >
+            <AllRoutes />
+          </ErrorBoundary>
         </div>
       </BrowserRouter>
     </QueryClientProvider>

client/src/pages/RefreshNotification/RefreshNotification.story.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import RefreshNotification from "./RefreshNotification"
+const meta: Meta<typeof RefreshNotification> = {
+  component: RefreshNotification
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DefaultRefreshNotification: Story = {
+  args: {}
+}

client/src/pages/RefreshNotification/RefreshNotification.tsx

@@ -0,0 +1,16 @@
+/**
+ * Used for if there is a lazy load error due to a chunk not being found
+ *
+ * Also catches any unhandled errors
+ */
+const RefreshNotification = () => {
+  return (
+    <div className="flex h-screen w-full items-center justify-center">
+      <h2 className="text-dark-blue-100">
+        Something went wrong. Please refresh the page
+      </h2>
+    </div>
+  )
+}
+
+export default RefreshNotification

yarn.lock

@@ -8249,6 +8249,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-calendar: "npm:^5.0.0"
     react-dom: "npm:^18.2.0"
+    react-error-boundary: "npm:^4.0.13"
     react-firebase-hooks: "npm:^5.1.1"
     react-router-dom: "npm:^6.10.0"
     react-sweet-state: "npm:^2.7.1"
@@ -16354,6 +16355,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^4.0.13":
+  version: 4.0.13
+  resolution: "react-error-boundary@npm:4.0.13"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: 10c0/6f3e0e4d7669f680ccf49c08c9571519c6e31f04dcfc30a765a7136c7e6fbbbe93423dd5a9fce12107f8166e54133e9dd5c2079a00c7a38201ac811f7a28b8e7
+  languageName: node
+  linkType: hard
+
 "react-firebase-hooks@npm:^5.1.1":
   version: 5.1.1
   resolution: "react-firebase-hooks@npm:5.1.1"