Error handling

package.json

@@ -30,9 +30,10 @@
     "react": "^18.2.0",
     "react-bootstrap": "~1.6.5",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-icons": "^4.4.0",
     "react-rnd": "^10.3.7",
-    "recoil": "^0.7.4"
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.18.6",

src/App.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import pkg from '../package.json';
 import './style/App.css';
+import './style/error.css';
 import ControlPanel from './components/ControlPanel';
 import TileLayout from './components/TileLayout';
+import ErrorFallbackComponent from './components/ErrorFallback';
+
 
 const App: React.FC = () => {
   return (
     <div className={"App"}>
       <div id={"version"}>v{pkg.version}</div>
 
-      <ControlPanel />
-      <TileLayout />
+      <ErrorBoundary FallbackComponent={ErrorFallbackComponent}>
+        <ControlPanel />
+        <TileLayout />
+      </ErrorBoundary>
 
     </div>
   );

src/components/ErrorFallback.tsx

@@ -0,0 +1,21 @@
+type ErrorFallbackParams = {error: Error, resetErrorBoundary: () => void};
+const ErrorFallbackComponent = ({error, resetErrorBoundary}: ErrorFallbackParams) => (
+  <div role="alert" className="error">
+    <h3>Woops!</h3>
+
+    <div className="error-message">{error.message}</div>
+
+    <p>
+     It's likely this application is down because other web services it depends on are currently down.
+     Refresh the page later to try again.
+    </p>
+
+    <p><b>
+      {"Please contact "}
+      <a href="mailto:[email protected]">NSIDC User Services</a>
+      {" if you need additional assistance."}
+    </b></p>
+  </div>
+);
+
+export default ErrorFallbackComponent;

src/components/Tile.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import {useRecoilValue} from 'recoil';
 
 import '../style/card.css';
@@ -10,6 +11,7 @@ import selectedSatelliteVariableObjectAtom from '../state/client/derived/selecte
 import selectedTileTypeAtom from '../state/client/selectedTileType';
 import LinePlot from './LinePlot';
 import SlippyMap from './SlippyMap';
+import ErrorFallbackComponent from './ErrorFallback';
 
 
 type ITileProps = ITileIdentifier & {style: React.CSSProperties};
@@ -44,12 +46,14 @@ const Tile: React.FC<ITileProps> = (props) => {
     throw new Error('This can not happen!');
   }
   return (
-    <div className={'Tile snow-today-card'} style={props.style}>
-      {content}
-      <div className='tile-citation'>
-        {CITATION}
+      <div className={'Tile snow-today-card'} style={props.style}>
+        <ErrorBoundary FallbackComponent={ErrorFallbackComponent}>
+          {content}
+          <div className='tile-citation'>
+            {CITATION}
+          </div>
+        </ErrorBoundary>
       </div>
-    </div>
   );
 }
 

src/serverState/plotData.ts

@@ -24,6 +24,8 @@ const usePlotDataQuery = (
     staleTime: Infinity,
     // Don't retry failed requests; in this case there is no plot!
     retry: false,
+    // Propagate all errors to the nearest error boundary
+    useErrorBoundary: true,
   },
 );
 export default usePlotDataQuery;

src/serverState/regionShape.ts

@@ -21,6 +21,8 @@ const useRegionShapeQuery = (regionShapeFilePath: string | undefined) => useQuer
     // Never re-fetch this data!
     cacheTime: Infinity,
     staleTime: Infinity,
+    // Propagate all errors to the nearest error boundary
+    useErrorBoundary: true,
   },
 );
 export default useRegionShapeQuery;

src/serverState/regionsIndex.ts

@@ -21,6 +21,8 @@ const useRegionsIndexQuery = (
       // Never re-fetch this data!
       cacheTime: Infinity,
       staleTime: Infinity,
+      // Propagate all errors to the nearest error boundary
+      useErrorBoundary: true,
     }
   );
 }

src/serverState/variablesIndex.ts

@@ -44,6 +44,8 @@ const useVariablesIndexQuery = (
       // Never re-fetch this data!
       cacheTime: Infinity,
       staleTime: Infinity,
+      // Propagate all errors to the nearest error boundary
+      useErrorBoundary: true,
     }
   );
 }

src/style/error.css

@@ -0,0 +1,14 @@
+.error {
+  margin: 10px;
+}
+
+.error-message {
+  font-family: monospace;
+  white-space: pre;
+
+  margin: 10px;
+  padding: 10px;
+
+  background-color: whitesmoke;
+  color: red;
+}