Implement API error handling

7 files changed, 35 insertions, 14 deletions

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index dbc205fc..bb71fa95 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -11,6 +11,7 @@ import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
+import { useCatch } from '../reactHelper';
 
 const useStyles = makeStyles(() => ({
   chart: {
@@ -35,7 +36,7 @@ const ChartReportPage = () => {
     return result;
   })();
 
-  const handleSubmit = async (deviceId, from, to, mail, headers) => {
+  const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
       deviceId, from, to, mail,
     });
@@ -48,8 +49,10 @@ const ChartReportPage = () => {
         fixTime: formatDate(position.fixTime, 'HH:mm:ss'),
       }));
       setItems(formattedPositions);
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 076979ba..f1b0c6bd 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -11,6 +11,7 @@ import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
+import { useCatch } from '../reactHelper';
 
 const typesArray = [
   ['allEvents', 'eventAll'],
@@ -53,7 +54,7 @@ const EventReportPage = () => {
   const [eventTypes, setEventTypes] = useState(['allEvents']);
   const [items, setItems] = useState([]);
 
-  const handleSubmit = async (deviceId, from, to, mail, headers) => {
+  const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
       deviceId, from, to, mail,
     });
@@ -68,8 +69,10 @@ const EventReportPage = () => {
           window.location.assign(window.URL.createObjectURL(await response.blob()));
         }
       }
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   const formatValue = (item, key) => {
     switch (key) {
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index cd2c3694..118c7758 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -10,6 +10,7 @@ import usePersistedState from '../common/util/usePersistedState';
 import PositionValue from '../common/components/PositionValue';
 import ColumnSelect from './components/ColumnSelect';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
+import { useCatch } from '../reactHelper';
 
 const RouteReportPage = () => {
   const t = useTranslation();
@@ -19,7 +20,7 @@ const RouteReportPage = () => {
   const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']);
   const [items, setItems] = useState([]);
 
-  const handleSubmit = async (deviceId, from, to, mail, headers) => {
+  const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
       deviceId, from, to, mail,
     });
@@ -33,8 +34,10 @@ const RouteReportPage = () => {
           window.location.assign(window.URL.createObjectURL(await response.blob()));
         }
       }
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}>
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index 214773fe..b1652468 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -9,6 +9,7 @@ import ReportsMenu from './components/ReportsMenu';
 import ReportFilter from './components/ReportFilter';
 import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
+import { useCatch } from '../reactHelper';
 
 const columnsArray = [
   ['captureTime', 'statisticsCaptureTime'],
@@ -30,13 +31,15 @@ const StatisticsPage = () => {
   const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']);
   const [items, setItems] = useState([]);
 
-  const handleSubmit = async (_, from, to) => {
+  const handleSubmit = useCatch(async (_, from, to) => {
     const query = new URLSearchParams({ from, to });
     const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' });
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index dd55b774..dc2ac19a 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -12,6 +12,7 @@ import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 import ColumnSelect from './components/ColumnSelect';
 import usePersistedState from '../common/util/usePersistedState';
+import { useCatch } from '../reactHelper';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -33,7 +34,7 @@ const StopReportPage = () => {
   const [columns, setColumns] = usePersistedState('stopColumns', ['startTime', 'endTime', 'startOdometer', 'address']);
   const [items, setItems] = useState([]);
 
-  const handleSubmit = async (deviceId, from, to, mail, headers) => {
+  const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
       deviceId, from, to, mail,
     });
@@ -47,8 +48,10 @@ const StopReportPage = () => {
           window.location.assign(window.URL.createObjectURL(await response.blob()));
         }
       }
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   const formatValue = (item, key) => {
     switch (key) {
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index e838cd9e..1b8fd8e0 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -12,6 +12,7 @@ import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
+import { useCatch } from '../reactHelper';
 
 const columnsArray = [
   ['startTime', 'reportStartDate'],
@@ -37,7 +38,7 @@ const SummaryReportPage = () => {
   const [daily, setDaily] = useState(false);
   const [items, setItems] = useState([]);
 
-  const handleSubmit = async (deviceId, from, to, mail, headers) => {
+  const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
       deviceId, from, to, daily, mail,
     });
@@ -51,8 +52,10 @@ const SummaryReportPage = () => {
           window.location.assign(window.URL.createObjectURL(await response.blob()));
         }
       }
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   const formatValue = (item, key) => {
     switch (key) {
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index c9d620e8..6e230388 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -12,6 +12,7 @@ import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 import ColumnSelect from './components/ColumnSelect';
 import usePersistedState from '../common/util/usePersistedState';
+import { useCatch } from '../reactHelper';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -39,7 +40,7 @@ const TripReportPage = () => {
   const [columns, setColumns] = usePersistedState('tripColumns', ['startTime', 'endTime', 'distance', 'averageSpeed']);
   const [items, setItems] = useState([]);
 
-  const handleSubmit = async (deviceId, from, to, mail, headers) => {
+  const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
       deviceId, from, to, mail,
     });
@@ -53,8 +54,10 @@ const TripReportPage = () => {
           window.location.assign(window.URL.createObjectURL(await response.blob()));
         }
       }
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   const formatValue = (item, key) => {
     switch (key) {