Add ErrorFallback component

And wrap both the main app body and the DataGrid component with it. Signed-off-by: Zack Cerza <[email protected]>
ceph · Oct 20, 2023 · 1c90e01 · 1c90e01
1 parent 7ba0766
commit 1c90e01
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 37 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Routes, Route, Navigate } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { Helmet } from "react-helmet";
 
 import AppBar from "./components/AppBar";
@@ -13,8 +13,10 @@ import Nodes from "./pages/Nodes";
 import Node from "./pages/Node";
 import StatsNodesLock from "./pages/StatsNodesLock";
 import StatsNodesJobs from "./pages/StatsNodesJobs";
+import { ErrorBoundary } from "react-error-boundary";
 
 import "./App.css";
+import ErrorFallback from "./components/ErrorFallback";
 
 type AppProps = {
   darkMode: boolean;
@@ -37,19 +39,21 @@ function App(props: AppProps) {
       </header>
       <Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
       <div className="App-body">
-        <Routes>
-          <Route path="/" element={<Runs />} />
-          <Route path="/nodes" element={<Nodes />} />
-          <Route path="/nodes/:name" element={<Node />} />
-          <Route path="/stats/nodes/jobs" element={<StatsNodesJobs />} />
-          <Route path="/stats/nodes/lock" element={<StatsNodesLock />} />
-          <Route path="/runs" element={<Runs />} />
-          <Route path="/runs/:name" element={<Run />} />
-          <Route path="/runs/:name/jobs/:job_id" element={<Job />} />
-          <Route path="/queue" element={<Queue />} />
-          <Route path="/:name" element={<Run />} />
-          <Route path="/:name/:job_id" element={<Job />} />
-        </Routes>
+        <ErrorBoundary FallbackComponent={ErrorFallback} >
+          <Routes>
+            <Route path="/" element={<Runs />} />
+            <Route path="/nodes" element={<Nodes />} />
+            <Route path="/nodes/:name" element={<Node />} />
+            <Route path="/stats/nodes/jobs" element={<StatsNodesJobs />} />
+            <Route path="/stats/nodes/lock" element={<StatsNodesLock />} />
+            <Route path="/runs" element={<Runs />} />
+            <Route path="/runs/:name" element={<Run />} />
+            <Route path="/runs/:name/jobs/:job_id" element={<Job />} />
+            <Route path="/queue" element={<Queue />} />
+            <Route path="/:name" element={<Run />} />
+            <Route path="/:name/:job_id" element={<Job />} />
+          </Routes>
+        </ErrorBoundary>
       </div>
     </div>
   );

diff --git a/src/components/DataGrid/index.jsx b/src/components/DataGrid/index.jsx
@@ -1,8 +1,10 @@
 import { DataGrid as MuiDataGrid } from "@mui/x-data-grid";
+import { ErrorBoundary } from "react-error-boundary";
 import { styled } from "@mui/material/styles";
 import { darken, lighten } from "@mui/material/styles";
 
 import { colorTint } from "../../lib/utils";
+import ErrorFallback from "../ErrorFallback";
 
 const PREFIX = "index";
 
@@ -154,29 +156,31 @@ export default function DataGrid(props) {
     <Root style={{ width: "100%" }}>
       <div style={{ display: "flex", height: "100%" }}>
         <div style={{ flexGrow: 1 }}>
-          <MuiDataGrid
-            autoHeight
-            className={classes.root}
-            density="compact"
-            initialState={props.initialState}
-            pageSizeOptions={[25, 50, 100]}
-            paginationMode={props.paginationMode}
-            paginationModel={{
-              page: Number(props.page) || 0,
-              pageSize: Number(props.pageSize) || 25,
-            }}
-            onPaginationModelChange={props.onPaginationModelChange}
-            loading={props.loading}
-            rows={props.rows}
-            rowCount={props.rowCount || 9999}
-            getRowId={props.getRowId}
-            getRowClassName={props.getRowClassName}
-            filterMode={props.filterMode}
-            filterModel={props.filterModel}
-            onFilterModelChange={props.onFilterModelChange}
-            columns={props.columns}
-            hideFooter={props.hideFooter}
-          />
+          <ErrorBoundary FallbackComponent={ErrorFallback} >
+            <MuiDataGrid
+              autoHeight
+              className={classes.root}
+              density="compact"
+              initialState={props.initialState}
+              pageSizeOptions={[25, 50, 100]}
+              paginationMode={props.paginationMode}
+              paginationModel={{
+                page: Number(props.page) || 0,
+                pageSize: Number(props.pageSize) || 25,
+              }}
+              onPaginationModelChange={props.onPaginationModelChange}
+              loading={props.loading}
+              rows={props.rows}
+              rowCount={props.rowCount || 9999}
+              getRowId={props.getRowId}
+              getRowClassName={props.getRowClassName}
+              filterMode={props.filterMode}
+              filterModel={props.filterModel}
+              onFilterModelChange={props.onFilterModelChange}
+              columns={props.columns}
+              hideFooter={props.hideFooter}
+            />
+        </ErrorBoundary>
         </div>
       </div>
     </Root>

diff --git a/src/components/ErrorFallback/index.tsx b/src/components/ErrorFallback/index.tsx
@@ -0,0 +1,24 @@
+import Typography from "@mui/material/Typography";
+import Link from "../Link";
+
+import CodeBlock from "../CodeBlock";
+
+export default function ErrorFallback(props: {error: Error}) {
+  return (
+    <div>
+      <Typography
+        color="textPrimary"
+        variant="h5"
+      >
+        Apologies - the component encountered an error. Please&nbsp;
+        <Link
+          to="https://github.com/ceph/pulpito-ng/issues/new"
+        >
+          file an issue
+        </Link> 
+        &nbsp;including this error message:
+      </Typography>
+      <CodeBlock value={props.error?.message || ""} language="js" />
+    </div>
+  );
+}