Improved Backend error handling

- Backend response error must not be put into Redux state
- Failed proxy request with status code 504 produces circular JSON structure

locales/en/translations.json

@@ -132,7 +132,11 @@
         "elevation": "Elevation"
       },
       "holder": {
-        "code" : "Holder"
+        "code" : "Holder",
+        "country": {
+          "iso3": "Holder country",
+          "region": "Holder region"
+        }
       },
       "lastModifiedDate": {
         "": "Last updated",

server/config.ts

@@ -15,7 +15,7 @@ const config = {
     // Timeout (ms) for proxied calls to the API
     frontendPath: argv['frontend-path'] || '',
     // Backend
-    apiTimeout: +(argv['api-timeout'] || 5000),
+    apiTimeout: +(argv['api-timeout'] || 10000),
     apiUrl: argv['api-url'] || 'http://localhost:8080',
     clientId: argv['client-id'] || 'defaultclient@localhost',
     clientSecret: argv['client-secret'] || 'changeme',

server/middleware/fetchComponentData.ts

@@ -13,7 +13,7 @@ export default function fetchComponentData(dispatch, branch, search) {
             return dispatch(need({ search, params: match.params }));
         })
         // a nice array of Promises
-            .forEach((promise) => promisesWithProps.push(promise));
+        .forEach((promise) => promisesWithProps.push(promise));
     });
 
     return Promise.all(promisesWithProps);

server/middleware/prerenderer.tsx

@@ -112,7 +112,14 @@ const prerenderer = (html, errHtml) => (req, res) => {
         const branch = matchRoutes(routes, pathWithoutLang);
 
         fetchComponentData(store.dispatch, branch, search)
-            .then(() => { return renderView();
+        .catch((err) => {
+            console.log('Error fetching component data', err);
+            res.status(500).end(err.message);
+            // const errFilledHtml = makeErrorHtml(errHtml, err);
+            // res.status(500).set('Content-Type', 'text/html').send(errFilledHtml);
+        })
+        .then(() => {
+            return renderView();
         }).then((html) => {
             const serverRenderTime = `${Date.now() - startTime}ms`;
             console.log('Server render time:', startTime, Date.now(), serverRenderTime);
@@ -146,7 +153,7 @@ const prerenderer = (html, errHtml) => (req, res) => {
 };
 
 const makeErrorHtml = (template, error) => {
-  const theFilledHtml = template.replace('ERROR_MESSAGE', error.message.replace('500', '503')).replace('ERROR_DETAILS', error.response.data);
+  const theFilledHtml = template.replace('ERROR_MESSAGE', error.status).replace('ERROR_DETAILS', error.data);
 
   return theFilledHtml;
 };

src/actions/accessions.ts

@@ -59,7 +59,7 @@ export const applyFilters = (filters: string | AccessionFilter, page: IPageReque
       dispatch(updateRoute(paged));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveAccessions(null, error.response));
+      dispatch(receiveAccessions(null, error));
     });
 };
 
@@ -71,7 +71,7 @@ export const applyOverviewFilters = (filters: string | AccessionFilter, page: IP
       dispatch(updateRoute2(overview.filterCode, '/a/overview'));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveAccessionOverview(null, error.response));
+      dispatch(receiveAccessionOverview(null, error));
     });
 };
 
@@ -81,7 +81,7 @@ export const loadAccessionsOverviewPage = (filterCode: string) => (dispatch) =>
       dispatch(receiveAccessionOverview(paged));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveAccessionOverview(null, error.response));
+      dispatch(receiveAccessionOverview(null, error));
     });
 };
 
@@ -92,7 +92,7 @@ export const loadAccessionsMapInfo = (filters: string | AccessionFilter) => (dis
       dispatch(updateRoute2(mapInfo.filterCode, '/a/map'));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveAccessionMapInfo(null, error.response));
+      dispatch(receiveAccessionMapInfo(null, error));
     });
 };
 
@@ -108,7 +108,7 @@ export const loadAccessionsPage = (page: IPageRequest) => (dispatch, getState) =
       dispatch(updateRoute(paged));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveAccessions(null, error.response));
+      dispatch(receiveAccessions(null, error));
     });
 };
 
@@ -121,7 +121,7 @@ export const loadAccession = ({ uuid, doi }: { uuid?: string, doi?: string }) =>
       dispatch(receiveAccession(accession));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveAccession(null, error.response));
+      dispatch(receiveAccession(null, error));
     });
 };
 
@@ -131,6 +131,6 @@ export const overviewAccessions = (filterCode: string) => (dispatch) => {
       dispatch(receiveAccessionOverview(overview));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveAccessionOverview(null, error.response));
+      dispatch(receiveAccessionOverview(null, error));
     });
 };

src/actions/institutes.ts

@@ -41,7 +41,7 @@ export const applyFilters = (filters: string | FaoInstituteFilter, page: IPageRe
             dispatch(updateRoute(paged));
         }).catch((error) => {
             console.log(`API error`, error);
-            dispatch(receiveInstitutes(null, error.response));
+            dispatch(receiveInstitutes(null, error));
         });
 };
 
@@ -57,7 +57,7 @@ export const loadInstitutesPage = (page: IPageRequest) => (dispatch, getState) =
             dispatch(updateRoute(paged));
         }).catch((error) => {
             console.log(`API error`, error);
-            dispatch(receiveInstitutes(null, error.response));
+            dispatch(receiveInstitutes(null, error));
         });
 };
 
@@ -67,6 +67,6 @@ export const loadInstitute = (code: string) => (dispatch) => {
             dispatch(receiveInstitute(institute));
         }).catch((error) => {
             console.log(`API error`, error);
-            dispatch(receiveInstitute(null, error.response));
+            dispatch(receiveInstitute(null, error));
         });
 };

src/actions/requests.ts

@@ -63,7 +63,7 @@ export const listMaterialRequests = (page: IPageRequest) => (dispatch) => {
             }
         })
         .catch((error) => {
-            dispatch(receiveRequests(null, error.response));
+            dispatch(receiveRequests(null, error));
         });
 };
 
@@ -73,7 +73,7 @@ export const loadMaterialRequest = (uuid: string) => (dispatch) => {
             dispatch(receiveRequest(request));
         })
         .catch((error) => {
-            dispatch(receiveRequest(null, error.response));
+            dispatch(receiveRequest(null, error));
         });
 };
 
@@ -84,7 +84,7 @@ export const recheckPidAction = (uuid: string) => (dispatch) => {
             dispatch(refreshRequestPID(request));
         })
         .catch((error) => {
-            dispatch(receiveRequest(null, error.response));
+            dispatch(receiveRequest(null, error));
         });
 };
 
@@ -96,7 +96,7 @@ export const validateRequestAction = (uuid: string) => (dispatch) => {
             dispatch(refreshRequest(request));
         })
         .catch((error) => {
-            dispatch(receiveRequest(null, error.response));
+            dispatch(receiveRequest(null, error));
         });
 };
 
@@ -107,6 +107,6 @@ export const sendValidationEmailAction = (uuid: string) => (dispatch) => {
             dispatch(refreshRequest(request));
         })
         .catch((error) => {
-            dispatch(receiveRequest(null, error.response));
+            dispatch(receiveRequest(null, error));
         });
 };

src/actions/subsets.ts

@@ -57,7 +57,7 @@ export const applyFilters = (filters: string | SubsetFilter, page: IPageRequest
       dispatch(updateRoute(paged));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveSubsets(null, error.response));
+      dispatch(receiveSubsets(null, error));
     });
 };
 
@@ -73,7 +73,7 @@ export const loadSubsetsPage = (page: IPageRequest) => (dispatch, getState) => {
       dispatch(updateRoute(paged));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveSubsets(null, error.response));
+      dispatch(receiveSubsets(null, error));
     });
 };
 
@@ -83,7 +83,7 @@ export const loadMySubsets = (page: IPageRequest) => (dispatch, getState) => {
             dispatch(receiveSubsets(paged));
         }).catch((error) => {
             console.log(`API error`, error);
-            dispatch(receiveSubsets(null, error.response));
+            dispatch(receiveSubsets(null, error));
         });
 };
 
@@ -93,7 +93,7 @@ export const loadSubset = (uuid: string) => (dispatch) => {
       dispatch(receiveSubset(subset));
     }).catch((error) => {
       console.log(`API error`, error);
-      dispatch(receiveSubset(null, error.response));
+      dispatch(receiveSubset(null, error));
     });
 };
 

src/model/ApiError.ts

+
+
+class ApiError {
+    public status: number;
+    public statusText: string;
+    public data: any;
+
+    public static axiosError(err): ApiError {
+        const ae = new ApiError();
+        if (err.response) {
+            ae.status = err.response.status;
+            ae.statusText = err.response.statusText;
+            ae.data = err.response.data;
+        } else {
+            ae.status = -1;
+            ae.data = 'Unknown error';
+        }
+        return ae;
+    }
+}
+
+export default ApiError;

src/utilities/axiosConfig.ts

 import axios from 'axios';
 
+import ApiError from 'model/ApiError';
+
 axios.interceptors.response.use((response) => {
     return response;
 }, (error) => {
-    if (error.response.status < 500) {
-        return Promise.reject(error.response.data);
-    } else {
-        return Promise.reject(error);
-    }
+    return Promise.reject(ApiError.axiosError(error));
 });