From 8ed4284453f924f3dd68e2e922fd43e9d9a21bf1 Mon Sep 17 00:00:00 2001 From: jackcruz53 Date: Mon, 17 Jul 2023 13:34:27 -0700 Subject: [PATCH 1/2] 45 Handles errors using react error boundaries --- src/App.tsx | 14 ++++++++++---- src/components/error.tsx | 13 +++++++++++++ 2 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 src/components/error.tsx diff --git a/src/App.tsx b/src/App.tsx index 690a29d7..ff69eff1 100644 --- a/src/App.tsx +++ b/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 ErrorElement from "./components/error" // Routes to be used by React Router, which handles all the // browser routing within this domain. const routes = [{ path: "/", - element: + element: , + errorElement: , },{ path: "/template_editor", element: , + errorElement: , }, ].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:
, + errorElement: , }, { path: `/app/${dbName}/:docId`, element: , + errorElement: , }, { path: `/app/${dbName}/:docId/json`, element: , + errorElement: , } ])) diff --git a/src/components/error.tsx b/src/components/error.tsx new file mode 100644 index 00000000..2884ce51 --- /dev/null +++ b/src/components/error.tsx @@ -0,0 +1,13 @@ +import React from "react" + +const errorElement = () => { + return ( +
+ Oh no! + It seems that we have encountered an error, please refresh and try again + If the problem persists, please contact us +
+ ) +} + +export default errorElement \ No newline at end of file From 9d2c056cbb60ba9eb586996b242623919a697b17 Mon Sep 17 00:00:00 2001 From: jackcruz53 Date: Tue, 25 Jul 2023 12:16:58 -0700 Subject: [PATCH 2/2] -adds error boundaries to the rootlayout children and changes the message for error --- src/App.tsx | 12 ++++++------ src/components/error.tsx | 22 ++++++++++++++++------ src/components/root_layout.tsx | 9 ++++++--- 3 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ff69eff1..97a99e2c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,35 +10,35 @@ import templatesConfig from './templates/templates_config' import TemplateEditor from "./components/editor" import Home from "./components/home" import JobsView from "./components/jobs_view" -import ErrorElement from "./components/error" +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: , - errorElement: , + RouterErrorElement: , },{ path: "/template_editor", element: , - errorElement: , + 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:
, - errorElement: , + RouterErrorElement: , }, { path: `/app/${dbName}/:docId`, element: , - errorElement: , + RouterErrorElement: , }, { path: `/app/${dbName}/:docId/json`, element: , - errorElement: , + RouterErrorElement: , } ])) diff --git a/src/components/error.tsx b/src/components/error.tsx index 2884ce51..7015067d 100644 --- a/src/components/error.tsx +++ b/src/components/error.tsx @@ -1,13 +1,23 @@ -import React from "react" +import React, { FC } from "react" -const errorElement = () => { +/* +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 (
- Oh no! - It seems that we have encountered an error, please refresh and try again - If the problem persists, please contact us +

An Unexpected Error Has Occurred

+

+ To recover, try the following: +

+

) } -export default errorElement \ No newline at end of file +export default RouterErrorElement \ No newline at end of file diff --git a/src/components/root_layout.tsx b/src/components/root_layout.tsx index d1187bee..becca93b 100644 --- a/src/components/root_layout.tsx +++ b/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 ( -
- {children} -
+ +
+ {children} +
+ );