And maybe save everything

Author: noemifrisina

src/routes/BeamlineI24.tsx

@@ -3,6 +3,8 @@ import { BeamlineStatsTabPanel } from "screens/BeamlineStats";
 import { DetectorMotionTabPanel } from "screens/DetectorMotion";
 import { OavMover } from "screens/OavMover/OavMover";
 import React from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { FallbackScreen } from "screens/FallbackScreen";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -41,36 +43,38 @@ export function BeamlineI24() {
     setTab(newTab);
   };
   return (
-    <Box>
-      <Box
-        component="section"
-        sx={{
-          borderBottom: 1,
-          borderColor: "divider",
-          color: theme.palette.text.secondary,
-        }}
-      >
-        <Tabs
-          value={tab}
-          onChange={handleChange}
-          aria-label="basic tabs example"
-          textColor="secondary"
-          centered
+    <ErrorBoundary fallback={<FallbackScreen />}>
+      <Box>
+        <Box
+          component="section"
+          sx={{
+            borderBottom: 1,
+            borderColor: "divider",
+            color: theme.palette.text.secondary,
+          }}
         >
-          <Tab label="Beamline info" {...a11yProps(0)} />
-          <Tab label="Detector position" {...a11yProps(1)} />
-          <Tab label="OAV view" {...a11yProps(2)} />
-        </Tabs>
+          <Tabs
+            value={tab}
+            onChange={handleChange}
+            aria-label="basic tabs example"
+            textColor="secondary"
+            centered
+          >
+            <Tab label="Beamline info" {...a11yProps(0)} />
+            <Tab label="Detector position" {...a11yProps(1)} />
+            <Tab label="OAV view" {...a11yProps(2)} />
+          </Tabs>
+        </Box>
+        <CustomTabPanel value={tab} index={0}>
+          <BeamlineStatsTabPanel />
+        </CustomTabPanel>
+        <CustomTabPanel value={tab} index={1}>
+          <DetectorMotionTabPanel />
+        </CustomTabPanel>
+        <CustomTabPanel value={tab} index={2}>
+          <OavMover />
+        </CustomTabPanel>
       </Box>
-      <CustomTabPanel value={tab} index={0}>
-        <BeamlineStatsTabPanel />
-      </CustomTabPanel>
-      <CustomTabPanel value={tab} index={1}>
-        <DetectorMotionTabPanel />
-      </CustomTabPanel>
-      <CustomTabPanel value={tab} index={2}>
-        <OavMover />
-      </CustomTabPanel>
-    </Box>
+    </ErrorBoundary>
   );
 }

src/routes/FixedTarget.tsx

@@ -1,26 +1,30 @@
 import { Box, Typography, useTheme } from "@mui/material";
 import { ParamsPanel } from "screens/CollectionPanel";
 import { ReadOnlyInputs } from "components/ReadOnlyInputs";
+import { ErrorBoundary } from "react-error-boundary";
+import { FallbackScreen } from "screens/FallbackScreen";
 
 export function FixedTarget() {
   const theme = useTheme();
   return (
-    <Box marginTop={2}>
-      <Typography
-        variant="h1"
-        sx={{
-          color: theme.palette.info.main,
-          fontSize: 24,
-          fontWeight: "fontWeightBold",
-        }}
-      >
-        Fixed Target Data Collection Setup
-      </Typography>
-      <ReadOnlyInputs
-        visit="ca://BL24I-MO-IOC-13:GP100"
-        detector="ca://BL24I-MO-IOC-13:GP101"
-      />
-      <ParamsPanel expt="fixed-target" />
-    </Box>
+    <ErrorBoundary fallback={<FallbackScreen />}>
+      <Box marginTop={2}>
+        <Typography
+          variant="h1"
+          sx={{
+            color: theme.palette.info.main,
+            fontSize: 24,
+            fontWeight: "fontWeightBold",
+          }}
+        >
+          Fixed Target Data Collection Setup
+        </Typography>
+        <ReadOnlyInputs
+          visit="ca://BL24I-MO-IOC-13:GP100"
+          detector="ca://BL24I-MO-IOC-13:GP101"
+        />
+        <ParamsPanel expt="fixed-target" />
+      </Box>
+    </ErrorBoundary>
   );
 }

src/routes/JungfrauRotation.tsx

@@ -1,27 +1,31 @@
 import { Box, Grid2, Typography, useTheme } from "@mui/material";
 import { ParamsPanel } from "../screens/CollectionPanel";
 import { CollectDarksPanel } from "../components/JungFrau/CollectDarksPanel";
+import { ErrorBoundary } from "react-error-boundary";
+import { FallbackScreen } from "screens/FallbackScreen";
 
 export function JfRotation() {
   const theme = useTheme();
   return (
-    <Box marginTop={2}>
-      <Typography
-        variant="h1"
-        sx={{
-          color: theme.palette.info.main,
-          fontSize: 24,
-          fontWeight: "fontWeightBold",
-        }}
-      >
-        Jungfrau Rotation Scans Setup
-      </Typography>
-      <Grid2 container marginTop={2} spacing={2}>
-        <Grid2 size={5}>
-          <CollectDarksPanel />
+    <ErrorBoundary fallback={<FallbackScreen />}>
+      <Box marginTop={2}>
+        <Typography
+          variant="h1"
+          sx={{
+            color: theme.palette.info.main,
+            fontSize: 24,
+            fontWeight: "fontWeightBold",
+          }}
+        >
+          Jungfrau Rotation Scans Setup
+        </Typography>
+        <Grid2 container marginTop={2} spacing={2}>
+          <Grid2 size={5}>
+            <CollectDarksPanel />
+          </Grid2>
+          <ParamsPanel expt="jf" />
         </Grid2>
-        <ParamsPanel expt="jf" />
-      </Grid2>
-    </Box>
+      </Box>
+    </ErrorBoundary>
   );
 }

src/screens/FallbackScreen.tsx

@@ -0,0 +1,14 @@
+import { Box, Typography } from "@mui/material";
+
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+
+export function FallbackScreen() {
+  return (
+    <Box alignContent={"center"}>
+      <ErrorOutlineIcon color="error" fontSize="large" />
+      <Typography component="h1" variant="h4">
+        Page currently unavailable
+      </Typography>
+    </Box>
+  );
+}