Improve how errors are displayed in the UI

1 files changed, 31 insertions, 0 deletions

diff --git a/app/assets/javascripts/components/middleware/errors.jsx b/app/assets/javascripts/components/middleware/errors.jsx
new file mode 100644
index 000000000..9d2aa19d0
--- /dev/null
+++ b/app/assets/javascripts/components/middleware/errors.jsx
@@ -0,0 +1,31 @@
+import { showNotification } from '../actions/notifications';
+
+const defaultFailSuffix = 'FAIL';
+
+export default function errorsMiddleware() {
+  return ({ dispatch }) => next => action => {
+    if (action.type) {
+      const isFail = new RegExp(`${defaultFailSuffix}$`, 'g');
+
+      if (action.type.match(isFail)) {
+        if (action.error.response) {
+          const { data, status, statusText } = action.error.response;
+
+          let message = statusText;
+          let title   = `${status}`;
+
+          if (data.error) {
+            message = data.error;
+          }
+
+          dispatch(showNotification(title, message));
+        } else {
+          console.error(action.error);
+          dispatch(showNotification('Oops!', 'An unexpected error occurred. Inspect the console for more details'));
+        }
+      }
+    }
+
+    return next(action);
+  };
+};