45 Handles errors using react error boundaries

src/App.tsx

@@ -7,32 +7,38 @@ import JsonStoreView from './components/json_store_view'
 import MdxTemplateView from './components/mdx_template_view'
 import RootLayout from './components/root_layout'
 import templatesConfig from './templates/templates_config'
-import TemplateEditor from "./components/editor";
-import Home from "./components/home";
-import JobsView from "./components/jobs_view";
+import TemplateEditor from "./components/editor"
+import Home from "./components/home"
+import JobsView from "./components/jobs_view"
+import RouterErrorElement from "./components/error"
 
 // Routes to be used by React Router, which handles all the
 // browser routing within this domain.
 const routes = [{
     path: "/",
-    element: <RootLayout><Home/></RootLayout>
+    element: <RootLayout><Home/></RootLayout>,
+    RouterErrorElement: <RouterErrorElement/>,
   },{
     path: "/template_editor",
     element: <TemplateEditor />,
+    RouterErrorElement: <RouterErrorElement/>,
   },
 ].concat(Object.keys(templatesConfig).flatMap(dbName => [{
     path: `/app/${dbName}`,
     // TODO: Create a component that provides the functionality
     // to manage the documents in this DB
     element: <RootLayout><div><JobsView dbName={dbName} /></div></RootLayout>,
+    RouterErrorElement: <RouterErrorElement/>,
   },
   {
     path: `/app/${dbName}/:docId`,
     element: <RootLayout><MdxTemplateView dbName={dbName} /></RootLayout>,
+    RouterErrorElement: <RouterErrorElement/>,
   },
   {
     path: `/app/${dbName}/:docId/json`,
     element: <RootLayout><JsonStoreView dbName={dbName} /></RootLayout>,
+    RouterErrorElement: <RouterErrorElement/>,
   }
 ]))
 

src/components/error.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from "react"
+
+/* 
+This element provides a fallback state for the router element
+It is displayed when the router encounters an error and cannot render the requested page
+This should be used when there is no other way to recover from the error and a component fails to render
+*/
+const RouterErrorElement: FC = () => {
+    return (
+        <div>
+            <h1>An Unexpected Error Has Occurred</h1>
+            <p>
+                To recover, try the following:
+                <ul>
+                    <li>Refresh the browser</li>
+                    <li>Go back to the <a href="/">home screen</a></li>
+                </ul>
+            </p>
+        </div>
+    )
+}
+
+export default RouterErrorElement

src/components/root_layout.tsx

@@ -6,6 +6,7 @@ import Image from 'react-bootstrap/Image'
 import NavBar from 'react-bootstrap/NavBar'
 import { useLocation, Link } from "react-router-dom";
 import { Button } from 'react-bootstrap';
+import DisplayErrorErrorBoundary from './display_error_error_boundary';
 
 interface RootLayoutProps {
   children: React.ReactNode,
@@ -65,9 +66,11 @@ return (
         </NavBar.Brand>
       </Container>
     </NavBar>
-    <div style={{ paddingTop: "1rem" ,paddingBottom:"1rem"}}>
-      {children}
-    </div>
+    <DisplayErrorErrorBoundary>
+      <div style={{ paddingTop: "1rem" ,paddingBottom:"1rem"}}>
+        {children}
+      </div>
+    </DisplayErrorErrorBoundary>
   </div>
 );