Implement API error handling

3 files changed, 11 insertions, 2 deletions

diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index 46f5e67c..7bcf90a8 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -37,6 +37,8 @@ const EventPage = () => {
       const response = await fetch(`/api/events/${id}`);
       if (response.ok) {
         setEvent(await response.json());
+      } else {
+        throw Error(await response.text());
       }
     }
   }, [id]);
@@ -49,6 +51,8 @@ const EventPage = () => {
         if (positions.length > 0) {
           setPosition(positions[0]);
         }
+      } else {
+        throw Error(await response.text());
       }
     }
   }, [event]);
diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js
index 4c13955a..76bb560f 100644
--- a/modern/src/other/PositionPage.js
+++ b/modern/src/other/PositionPage.js
@@ -41,6 +41,8 @@ const PositionPage = () => {
         if (positions.length > 0) {
           setItem(positions[0]);
         }
+      } else {
+        throw Error(await response.text());
       }
     } else {
       setItem({});
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index 9bdf87be..c1c56ac1 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -18,6 +18,7 @@ import PositionsMap from '../map/PositionsMap';
 import { formatTime } from '../common/util/formatter';
 import ReportFilter from '../reports/components/ReportFilter';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import { useCatch } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -121,7 +122,7 @@ const ReplayPage = () => {
     }
   }, [index, positions]);
 
-  const handleSubmit = async (deviceId, from, to, _, headers) => {
+  const handleSubmit = useCatch(async (deviceId, from, to, _, headers) => {
     setSelectedDeviceId(deviceId);
     const query = new URLSearchParams({ deviceId, from, to });
     const response = await fetch(`/api/positions?${query.toString()}`, { headers });
@@ -129,8 +130,10 @@ const ReplayPage = () => {
       setIndex(0);
       setPositions(await response.json());
       setExpanded(false);
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <div className={classes.root}>