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

@@ -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)

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)
   }
 }
 

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 )
   ]
 

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()

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>
+              <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 /> }

src/style/_layout.scss

@@ -657,6 +657,8 @@
     min-height: 1px;
     display: flex;
     justify-content: center;
+    align-items: center;
+    flex-direction: column;
 
     .loading
     {