From bd41b736a8ae3e117d6a9b0549853c24a1d126fb Mon Sep 17 00:00:00 2001
From: "Juan J. Jimenez-Anca" <cortopy@users.noreply.github.com>
Date: Sat, 6 Jan 2018 04:45:21 +0100
Subject: [PATCH] feat: display last error when definition/config load fails

Contains a breaking internal API change to `errActions.newThrownErr`, which will require a MINOR version bump. Swagger-Editor does not depend on the old usage style.
---
 src/core/plugins/download-url.js |  2 +-
 src/core/plugins/err/actions.js  |  4 ++--
 src/core/system.js               |  1 -
 src/core/utils.js                |  9 ---------
 src/standalone/layout.jsx        | 12 +++++++++---
 src/style/_layout.scss           |  2 ++
 6 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/core/plugins/download-url.js b/src/core/plugins/download-url.js
index d80e982b..d337c711 100644
--- a/src/core/plugins/download-url.js
+++ b/src/core/plugins/download-url.js
@@ -26,7 +26,7 @@ export default function downloadUrlPlugin (toolbox) {
       function next(res) {
         if(res instanceof Error || res.status >= 400) {
           specActions.updateLoadingStatus("failed")
-          return errActions.newThrownErr( new Error(res.statusText + " " + url) )
+          return errActions.newThrownErr( new Error((res.message || res.statusText) + " " + url) )
         }
         specActions.updateLoadingStatus("success")
         specActions.updateSpec(res.text)
diff --git a/src/core/plugins/err/actions.js b/src/core/plugins/err/actions.js
index 40fd1121..461971cd 100644
--- a/src/core/plugins/err/actions.js
+++ b/src/core/plugins/err/actions.js
@@ -7,10 +7,10 @@ export const NEW_SPEC_ERR_BATCH = "err_new_spec_err_batch"
 export const NEW_AUTH_ERR = "err_new_auth_err"
 export const CLEAR = "err_clear"
 
-export function newThrownErr(err, action) {
+export function newThrownErr(err) {
   return {
       type: NEW_THROWN_ERR,
-      payload: { action, error: serializeError(err) }
+      payload: serializeError(err)
   }
 }
 
diff --git a/src/core/system.js b/src/core/system.js
index b7b70f19..824bc558 100644
--- a/src/core/system.js
+++ b/src/core/system.js
@@ -18,7 +18,6 @@ function createStoreWithMiddleware(rootReducer, initialState, getSystem) {
     // createLogger( {
     //   stateTransformer: state => state && state.toJS()
     // } ),
-    // errorLog(getSystem), Need to properly handle errors that occur during a render. Ie: let them be...
     systemThunkMiddleware( getSystem )
   ]
 
diff --git a/src/core/utils.js b/src/core/utils.js
index a809b343..2b084ba4 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -126,15 +126,6 @@ export function systemThunkMiddleware(getSystem) {
   }
 }
 
-export const errorLog = getSystem => () => next => action => {
-  try{
-    next( action )
-  }
-  catch( e ) {
-    getSystem().errActions.newThrownErr( e, action )
-  }
-}
-
 export function defaultStatusCode ( responses ) {
   let codes = responses.keySeq()
   return codes.contains(DEFAULT_REPONSE_KEY) ? DEFAULT_REPONSE_KEY : codes.filter( key => (key+"")[0] === "2").sort().first()
diff --git a/src/standalone/layout.jsx b/src/standalone/layout.jsx
index 30e46ccc..a3a7d98c 100644
--- a/src/standalone/layout.jsx
+++ b/src/standalone/layout.jsx
@@ -16,7 +16,7 @@ export default class StandaloneLayout extends React.Component {
   }
 
   render() {
-    let { getComponent, specSelectors } = this.props
+    let { getComponent, specSelectors, errSelectors } = this.props
 
     let Container = getComponent("Container")
     let Row = getComponent("Row")
@@ -27,6 +27,8 @@ export default class StandaloneLayout extends React.Component {
     const OnlineValidatorBadge = getComponent("onlineValidatorBadge", true)
 
     const loadingStatus = specSelectors.loadingStatus()
+    const lastErr = errSelectors.lastError()
+    const lastErrMsg = lastErr ? lastErr.get("message") : ""
 
     return (
 
@@ -43,12 +45,16 @@ export default class StandaloneLayout extends React.Component {
           <div className="info">
             <div className="loading-container">
               <h4 className="title">Failed to load API definition.</h4>
-            </div>
+              <p>{lastErrMsg}</p>
+            </div>            
           </div>
         }
         { loadingStatus === "failedConfig" &&
           <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
-            <h4 className="title">Failed to load remote configuration.</h4>
+            <div className="loading-container">
+              <h4 className="title">Failed to load remote configuration.</h4>
+              <p>{lastErrMsg}</p>
+            </div>
           </div>
         }
         { !loadingStatus || loadingStatus === "success" && <BaseLayout /> }
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 72109a73..d9cc913e 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -657,6 +657,8 @@
     min-height: 1px;
     display: flex;
     justify-content: center;
+    align-items: center;
+    flex-direction: column;
 
     .loading
     {
-- 
GitLab