Dynamic error cdi; COUNTRY=jordan

frontend/docker-compose.yml

@@ -8,6 +8,7 @@ services:
     entrypoint: yarn start
     environment:
       - REACT_APP_COUNTRY
+      - REACT_APP_USE_LOCAL_HIP_SERVICE=http://localhost:3001/q_multi_geojson
     ports:
       - "3000:3000"
     volumes:

frontend/src/context/layers/composite_data.ts

@@ -19,7 +19,10 @@ export const fetchCompositeLayerData: LazyLoader<CompositeLayerProps> = () => as
   const endDate = new Date(startDate);
   endDate.setMonth(endDate.getMonth() + 1);
 
-  const { baseUrl, inputLayers, startDate: areaStartDate } = layer;
+  const { baseUrl: _baseUrl, inputLayers, startDate: areaStartDate } = layer;
+  const baseUrl = process.env.REACT_APP_USE_LOCAL_HIP_SERVICE
+    ? process.env.REACT_APP_USE_LOCAL_HIP_SERVICE
+    : _baseUrl;
   const { boundingBox } = appConfig.map;
 
   // docs: https://hip-service.ovio.org/docs#/default/run_q_multi_geojson_q_multi_geojson_post

frontend/src/utils/error-utils.ts

@@ -15,7 +15,9 @@ export class HTTPError extends Error {
   constructor(
     public readonly message: string,
     public readonly statusCode: number,
+    public readonly detail?: string,
   ) {
     super(message);
+    console.error('New HTTP Error: ', { message, statusCode, detail });
   }
 }

frontend/src/utils/fetch-with-timeout.ts

@@ -29,9 +29,13 @@ export const fetchWithTimeout = async (
       signal: controller.signal,
     });
     if (!res.ok) {
+      const body = await res.json();
       throw new HTTPError(
-        fetchErrorMessage ?? `Something went wrong requesting at ${resource}`,
+        body.detail ??
+          fetchErrorMessage ??
+          `Something went wrong requesting at ${resource}`,
         res.status,
+        body,
       );
     }
     return res;