feat: add error boundary to filter

package.json

@@ -17,6 +17,7 @@
     "lodash.uniqwith": "^4.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-error-boundary": "^3.1.4",
     "react-scripts": "5.0.1",
     "reactstrap": "^9.0.2",
     "sass": "^1.50.0",

src/components/Filter.js

@@ -3,7 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
 import propTypes from 'prop-types';
 import React from 'react';
-import { Button, Card, CardBody, CardHeader, Col, Container, FormGroup, Input, Label, Row } from 'reactstrap';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Alert, Button, Card, CardBody, CardHeader, Col, Container, FormGroup, Input, Label, Row } from 'reactstrap';
 import { useImmerReducer } from 'use-immer';
 import config from '../services/config';
 import './Filter.scss';
@@ -27,6 +28,13 @@ const initialState = {
   display: MODE,
 };
 
+function ErrorFallback({ error }) {
+  return <Alert color="danger">{error.message}</Alert>;
+}
+ErrorFallback.propTypes = {
+  error: propTypes.object.isRequired,
+};
+
 export default function Filter({ mapView }) {
   const [isOpen, setIsOpen] = React.useState(true);
   const buttonDiv = React.useRef(null);
@@ -69,6 +77,7 @@ export default function Filter({ mapView }) {
           </div>
         </CardHeader>
         <CardBody>
+          <ErrorBoundary FallbackComponent={ErrorFallback}>
           <h5>Display FTP Projects by:</h5>
           <FormGroup check inline>
             <Input
@@ -144,6 +153,7 @@ export default function Filter({ mapView }) {
               <Col>swatch</Col>
             </Row>
           </Container>
+          </ErrorBoundary>
         </CardBody>
       </Card>
     </>