Log and show more helpful error messages to the user.

frontend/server/app.js

@@ -5,6 +5,7 @@ const express = require('express');
 const fs = require('fs');
 const isFunction = require('lodash/isFunction');
 const get = require('lodash/get');
+const log = require('npmlog');
 const path = require('path');
 const passport = require('passport');
 const session = require('express-session');
@@ -42,6 +43,9 @@ const exporterMode = config.get('exporterMode');
 const codeExportEnabled = config.get('codeExportEnabled');
 const repositoryHost = config.get('repositoryHost');
 
+log.level = 'debug'; // config.get('logLevel');
+log.addLevel('debug', 2900, { fg: 'green' });
+
 const memoryStore = new MemoryStore({
   checkPeriod: 86400000, // prune expired entries every 24h
 });
@@ -51,6 +55,10 @@ const logger = morgan('common', {
   }),
 });
 
+if (process.env.NODE_ENV !== 'test') {
+  app.use(morgan('dev'));
+}
+
 if (isDevelopment) {
   const compiler = webpack(webpackConfig);
   // Webpack Configuration (dev and hot reload)

frontend/src/modules/data/reducer.js

@@ -170,7 +170,7 @@ const fetchStatus = (state = initialFetchStatusState, action) => {
 
 const messages = (state = [], action) => {
   const actionMessages = action.error
-    ? [action.payload.message]
+    ? [action.payload]
     : compact(
         at(action, [
           'payload.result.message',

frontend/src/modules/data/sagas.js

@@ -30,9 +30,8 @@ function* handleDataRequest(method, action) {
       ...rest,
       payload: action.payload,
     });
-    const data = camelizeKeys(
-      response,
-      (key, convert) => (/^(_id|_v)$/.test(key) ? key : convert(key))
+    const data = camelizeKeys(response, (key, convert) =>
+      /^(_id|_v)$/.test(key) ? key : convert(key)
     );
     const payload =
       schema && !has(data, 'error') ? normalize(data, schema) : data;
@@ -46,8 +45,12 @@ function* handleDataRequest(method, action) {
     yield put({
       type: `${action.type}/failed`,
       error: true,
-      meta,
-      payload: err,
+      meta: {
+        ...meta,
+        timestamp: new Date(),
+        status: err.status,
+      },
+      payload: err.message,
     });
   }
 

frontend/src/services/api.js

@@ -2,6 +2,21 @@ import ky from 'ky';
 
 import { getToken } from './auth';
 
+async function handleError(err) {
+  const { response } = err;
+  const { statusText } = response;
+  let errorMessage = statusText;
+
+  try {
+    const { error, message } = await response.json();
+    errorMessage = error || message;
+  } catch {
+    throw new Error(errorMessage);
+  }
+
+  throw new Error(errorMessage);
+}
+
 export const get = async (url, options) => {
   try {
     const token = getToken();
@@ -16,8 +31,7 @@ export const get = async (url, options) => {
 
     return json;
   } catch (err) {
-    const { message } = await err.response.json();
-    throw new Error(message);
+    return handleError(err);
   }
 };
 
@@ -37,8 +51,7 @@ export const post = async (url, options) => {
 
     return json;
   } catch (err) {
-    const { error } = await err.response.json();
-    throw new Error(error || err);
+    return handleError(err);
   }
 };
 
@@ -58,8 +71,7 @@ export const put = async (url, options) => {
 
     return json;
   } catch (err) {
-    const { error } = await err.response.json();
-    throw new Error(error || err);
+    return handleError(err);
   }
 };
 
@@ -77,8 +89,7 @@ export const destroy = async (url, options) => {
 
     return json;
   } catch (err) {
-    const { error } = await err.response.json();
-    throw new Error(error || err);
+    return handleError(err);
   }
 };