Improve error handling and fix a crash

package.json

@@ -31,6 +31,7 @@
     "react": "^18.2.0",
     "react-cookie": "^5.0.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.14.1",
     "react-simple-code-editor": "^0.13.1",

src/App.tsx

@@ -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>
   );

src/components/CodeBlock/index.jsx

@@ -0,0 +1,34 @@
+import Editor from "react-simple-code-editor";
+import { highlight, languages } from "prismjs/components/prism-core";
+import 'prismjs/components/prism-clike';
+import "prismjs/components/prism-yaml";
+import 'prismjs/components/prism-javascript';
+
+export default function CodeBlock(props) {
+  const language = languages[props.language];
+  if ( ! props.value ) return null;
+  return (
+    <Editor
+      value={props.value}
+      readOnly={true}
+      highlight={(code) => {
+        if (!! language ) return highlight(code, language);
+        return code;
+      }}
+      style={{
+        fontFamily: [
+          "ui-monospace",
+          "SFMono-Regular",
+          '"SF Mono"',
+          "Menlo",
+          "Consolas",
+          "Liberation Mono",
+          '"Lucida Console"',
+          "Courier",
+          "monospace",
+        ].join(","),
+        textAlign: "initial",
+      }}
+    />
+  )
+}

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>
+  );
+}

src/components/JobList/index.tsx

@@ -202,7 +202,7 @@ type JobListProps = {
 
 export default function JobList({ query, sortMode }: JobListProps) {
   const options = useDefaultTableOptions<Job>();
-  const data = query.data?.jobs || [];
+  const data = (query.data?.jobs || []).filter(item => item.id);
   const table = useMaterialReactTable({
     ...options,
     columns,

src/pages/Job/index.jsx

@@ -13,14 +13,12 @@ import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import FolderIcon from '@mui/icons-material/Folder';
 import formatDuration from "date-fns/formatDuration";
 import { isValid, parse } from "date-fns";
-import Editor from "react-simple-code-editor";
-import { highlight, languages } from "prismjs/components/prism-core";
-import "prismjs/components/prism-yaml";
 import "prismjs/themes/prism-tomorrow.css";
 import { Helmet } from "react-helmet";
 import YAML from "json-to-pretty-yaml";
 
 import Link from "../../components/Link";
+import CodeBlock from "../../components/CodeBlock";
 import { useJob } from "../../lib/paddles";
 import { getDuration, dirName } from "../../lib/utils";
 
@@ -150,25 +148,7 @@ function JobDetails({ query }) {
   if (query.isError) return "!!!";
   const code = YAML.stringify(query.data);
   return (
-    <Editor
-      value={code}
-      readOnly={true}
-      highlight={(code) => highlight(code, languages.yaml)}
-      style={{
-        fontFamily: [
-          "ui-monospace",
-          "SFMono-Regular",
-          '"SF Mono"',
-          "Menlo",
-          "Consolas",
-          "Liberation Mono",
-          '"Lucida Console"',
-          "Courier",
-          "monospace",
-        ].join(","),
-        textAlign: "initial",
-      }}
-    />
+    <CodeBlock value={code} language="yaml" />
   );
 }