more devtools enhancements

src/actions/index.js

@@ -59,14 +59,14 @@ function triggerDefaultState(dispatch, getState) {
 
     try {
         MultiGraph.overallOrder();
-    } catch(err) {
+    } catch (err) {
         dispatch(
             onError({
                 type: 'backEnd',
                 error: {
                     message: 'Circular Dependencies',
                     html: err.toString(),
-                }
+                },
             })
         );
     }
@@ -673,7 +673,9 @@ function updateOutput(
             if (res.status !== STATUS.OK) {
                 // update the status of this request
                 updateRequestQueue(true, res.status);
-                return;
+
+                // eject into `catch` handler below
+                throw res;
             }
 
             /*
@@ -903,7 +905,7 @@ function updateOutput(
             });
         })
         .catch(err => {
-            // Handle html & JSON error responses
+            // Handle html error responses
             err.text().then(text => {
                 dispatch(
                     onError({

src/components/error/FrontEnd/FrontEndError.css

@@ -1,11 +1,14 @@
+.error-container {
+    margin-top: 10px;
+}
+
 .dash-fe-errors {
     min-width: 386px;
     max-width: 650px;
     max-height: 450px;
     display: inline-block;
 }
 
-
 .dash-fe-error__icon-error {
     width: 20px;
     height: 20px;
@@ -32,6 +35,13 @@
     width: 100%;
     cursor: pointer;
 }
+.dash-fe-error-top__group:first-child {
+    /*
+     * 77% is the maximum space allowed based off of the other elements
+     * in the top part of the error container (timestamp & collapse arrow).
+     * this was manually determined */
+    width: 77%;
+}
 .dash-fe-error-top__group {
     display: inline-flex;
     align-items: center;
@@ -42,25 +52,56 @@
     padding: 0px;
     font-size: 14px;
     display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 .dash-fe-error__timestamp {
-    margin-right: 30px;
+    margin-right: 20px;
 }
 .dash-fe-error__collapse--flipped {
     -webkit-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
-.dash-fe-error__st {
-    background-color: #fdf3f4;
-    min-width: 386px;
-    max-width: 650px;
-    max-height: 450px;
+.dash-fe-error__info_title {
+    margin: 0;
+    color: #506784;
+    font-size: 16px;
+    background-color: #f3f6fa;
+    border: 2px solid #dfe8f3;
+    box-sizing: border-box;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 10px;
+}
+
+.dash-fe-error__info {
+    border: 1px solid #dfe8f3;
+    margin: 0 0 1em 0;
+    padding: 10px;
+
+    background-color: white;
+    border: 2px solid #dfe8f3;
+    border-radius: 0px 0px 4px 4px;
+    color: #506784;
     overflow: scroll;
-    padding: 2rem;
-    margin-top: 8px;
-    display: inline-block;
+}
+
+.dash-fe-error__curved {
+    border-radius: 4px;
+}
+
+.dash-fe-error__curved-top {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-width: 0px;
+}
+
+.dash-fe-error__curved-bottom {
+    border-radius-bottom-left: 4px;
+    border-radius-bottom-right: 4px;
 }
 
 .dash-be-error__st {

src/components/error/FrontEnd/FrontEndError.react.js

@@ -34,7 +34,6 @@ class FrontEndError extends Component {
                 onClick={() => this.setState({collapsed: !collapsed})}
             >
                 <span className="dash-fe-error-top__group">
-                    ☣️&nbsp;
                     <span className="dash-fe-error__title">
                         {e.error.message || 'Error'}
                     </span>
@@ -60,22 +59,35 @@ class FrontEndError extends Component {
         ) : (
             <div className={cardClasses}>
                 {errorHeader}
-                <ErrorContent error={e.error} />
+                <ErrorContent error={e.error} type={e.type} />
             </div>
         );
     }
 }
 
 /* eslint-disable no-inline-comments */
-function ErrorContent({error}) {
+function ErrorContent({error, type}) {
     return (
         <div className="error-container">
-            {/* Frontend Error objects */}
+            {!error.message || type === 'backEnd' ? null : (
+                <div className="dash-fe-error__st">
+                    <div className="dash-fe-error__info dash-fe-error__curved">
+                        {error.message}
+                    </div>
+                </div>
+            )}
+
             {!error.stack ? null : (
                 <div className="dash-fe-error__st">
-                    {error.stack.split('\n').map(line => (
-                        <p>{line}</p>
-                    ))}
+                    <div className="dash-fe-error__info_title dash-fe-error__curved-top">
+                        {"JS Stack trace (see browser's console for details)"}
+                    </div>
+                    <div className="dash-fe-error__info dash-fe-error__curved-bottom">
+                        <hr />
+                        {error.stack.split('\n').map(line => (
+                            <p>{line}</p>
+                        ))}
+                    </div>
                 </div>
             )}
             {/* Backend Error */}
@@ -123,12 +135,14 @@ const errorPropTypes = PropTypes.shape({
 
 ErrorContent.propTypes = {
     error: errorPropTypes,
+    type: PropTypes.oneOf(['backEnd', 'frontEnd']),
 };
 
 FrontEndError.propTypes = {
     e: PropTypes.shape({
         myUID: PropTypes.string,
         timestamp: PropTypes.object,
+        type: PropTypes.oneOf(['backEnd', 'frontEnd']),
         error: errorPropTypes,
     }),
     resolve: PropTypes.func,

src/components/error/menu/DebugAlertContainer.react.js

@@ -20,7 +20,7 @@ class DebugAlertContainer extends Component {
                     {alertsOpened ? (
                         <ErrorIconWhite className="dash-debug-alert-container__icon" />
                     ) : (
-                        '☣️'
+                        '🛑 '
                     )}
                     {this.props.errors.length}
                 </div>

src/components/error/menu/DebugMenu.css

@@ -19,6 +19,7 @@
         0px 1px 3px rgba(162, 177, 198, 0.32);
     border-radius: 4px;
     padding: 12px 0px;
+    background-color: white;
 }
 
 .dash-debug-menu--closed:hover {

src/components/error/menu/DebugMenu.react.js

@@ -93,9 +93,8 @@ class DebugMenu extends Component {
             error.frontEnd.length + error.backEnd.length > 0 && !opened ? (
                 <div className="dash-debug-alert-label">
                     <div className="dash-debug-alert">
-                        ☣️&nbsp;{error.frontEnd.length + error.backEnd.length}
+                        🛑 &nbsp;{error.frontEnd.length + error.backEnd.length}
                     </div>
-                    <div className="dash-debug-alert">⚠️&nbsp;0</div>
                 </div>
             ) : null;