Added better error viewer (#32)

app/app.js

@@ -227,10 +227,10 @@ app.on('ready', () => {
   mainWindow.loadURL(`file://${__dirname}/app.html`);
 
   if (IS_DEV && IS_MAC) {
-    BrowserWindow.addDevToolsExtension(
-      '/Users/gschier/Library/Application Support/Google/Chrome/Default/' +
-      'Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0'
-    );
+    // BrowserWindow.addDevToolsExtension(
+    //   '/Users/gschier/Library/Application Support/Google/Chrome/Default/' +
+    //   'Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0'
+    // );
   }
 
   // Uncomment this to test things

app/components/ResponsePane.js

@@ -7,10 +7,10 @@ import ResponseViewer from './viewers/ResponseViewer';
 import ResponseHeadersViewer from './viewers/ResponseHeadersViewer';
 import ResponseCookiesViewer from './viewers/ResponseCookiesViewer';
 import {getPreviewModeName} from '../lib/previewModes';
-import {PREVIEW_MODE_SOURCE} from '../lib/previewModes';
 import {REQUEST_TIME_TO_SHOW_COUNTER} from '../lib/constants';
 import {MOD_SYM} from '../lib/constants';
 import {trackEvent} from '../lib/analytics';
+import {PREVIEW_MODE_SOURCE} from '../lib/previewModes';
 
 class ResponsePane extends Component {
 
@@ -156,6 +156,7 @@ class ResponsePane extends Component {
                 editorLineWrapping={editorLineWrapping}
                 editorFontSize={editorFontSize}
                 body={response.error}
+                error={true}
                 url={response.url}
               />
             ) : (

app/components/base/Link.js

@@ -2,15 +2,14 @@ import React, {Component, PropTypes} from 'react';
 import {shell} from 'electron';
 
 class Link extends Component {
-  _handleClick (e) {
-    e.preventDefault();
-    shell.openExternal(this.props.href);
-  }
-
   render () {
-    const {href, children, ...other} = this.props;
-    return (
-      <a href={href} onClick={this._handleClick.bind(this)} {...other}>
+    const {button, href, children, ...other} = this.props;
+    return button ? (
+      <button onClick={() => shell.openExternal(href)} {...other}>
+        {children}
+      </button>
+    ) :(
+      <a href={href} onClick={e => {e.preventDefault(); shell.openExternal(href)}} {...other}>
         {children}
       </a>
     )
@@ -18,7 +17,10 @@ class Link extends Component {
 }
 
 Link.propTypes = {
-  href: PropTypes.string.isRequired
+  href: PropTypes.string.isRequired,
+
+  // Optional
+  button: PropTypes.bool
 };
 
 export default Link;

app/components/viewers/ResponseError.js

@@ -0,0 +1,63 @@
+import React, {Component, PropTypes} from 'react';
+
+import Link from '../../components/base/Link';
+import {getModal} from '../modals/index';
+import SettingsModal from '../modals/SettingsModal';
+
+class ResponseError extends Component {
+  render () {
+    const {error} = this.props;
+
+    let msg = null;
+    if (error && error.toLowerCase().indexOf('certificate') !== -1) {
+      msg = (
+        <button className="btn btn--super-compact btn--outlined"
+                onClick={() => getModal(SettingsModal).show()}>
+          Disable SSL Validation
+        </button>
+      )
+    } else if (error && error.toLowerCase().indexOf('getaddrinfo') !== -1) {
+      msg = (
+        <button className="btn btn--super-compact btn--outlined"
+                onClick={() => getModal(SettingsModal).show()}>
+          Setup Network Proxy
+        </button>
+      )
+    } else {
+      msg = (
+        <Link button={true} className="btn btn--super-compact btn--outlined"
+                href="http://docs.insomnia.rest">
+          View the Docs
+        </Link>
+      )
+    }
+
+    return (
+      <div>
+        <div className="monospace pad">
+          {error}
+        </div>
+        <hr/>
+        <div className="text-center pad">
+          <p className="faint pad-left pad-right">
+            It looks like you encountered a strange error. Here are some suggestions.
+          </p>
+          {msg}
+          &nbsp;&nbsp;
+          <Link button={true} className="btn btn--super-compact btn--outlined margin-top-sm"
+                href="mailto:support@insomnia.rest">
+            Contact Support
+          </Link>
+        </div>
+      </div>
+    );
+  }
+}
+
+ResponseError.propTypes = {
+  error: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired
+};
+
+export default ResponseError;
+

app/components/viewers/ResponseViewer.js

@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react';
 
 import Editor from '../base/Editor';
 import ResponseWebview from './ResponseWebview';
+import ResponseError from './ResponseError';
 import {PREVIEW_MODE_FRIENDLY, PREVIEW_MODE_SOURCE} from '../../lib/previewModes';
 
 class ResponseViewer extends Component {
@@ -22,9 +23,19 @@ class ResponseViewer extends Component {
       editorLineWrapping,
       editorFontSize,
       body,
-      url
+      url,
+      error
     } = this.props;
 
+    if (error) {
+      return (
+        <ResponseError
+          url={url}
+          error={body}
+        />
+      )
+    }
+
     switch (previewMode) {
       case PREVIEW_MODE_FRIENDLY:
         return (
@@ -64,7 +75,8 @@ ResponseViewer.propTypes = {
   url: PropTypes.string.isRequired,
 
   // Optional
-  contentType: PropTypes.string
+  contentType: PropTypes.string,
+  error: PropTypes.bool
 };
 
 export default ResponseViewer;

app/containers/WorkspaceDropdown.js

@@ -2,7 +2,9 @@ import React, {Component, PropTypes} from 'react';
 import {ipcRenderer} from 'electron';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux'
+import {shell} from 'electron';
 
+import Link from '../components/base/Link';
 import Dropdown from '../components/base/Dropdown';
 import DropdownDivider from '../components/base/DropdownDivider';
 import DropdownHint from '../components/base/DropdownHint';
@@ -128,6 +130,16 @@ class WorkspaceDropdown extends Component {
               <DropdownHint char=","></DropdownHint>
             </button>
           </li>
+          <li>
+            <Link button={true} href="http://docs.insomnia.rest">
+              <i className="fa fa-blank"></i> Documentation
+            </Link>
+          </li>
+          <li>
+            <Link button={true} href="mailto:support@insomnia.rest">
+              <i className="fa fa-blank"></i> Support
+            </Link>
+          </li>
           <li>
             <button onClick={e => getModal(ChangelogModal).show()}>
               <i className="fa fa-blank"></i> Changelog

app/css/constants/colors.scss

@@ -12,20 +12,20 @@ $bg-backdrop: rgba(30, 30, 30, 0.6);
 /* Font Colors */
 $font-light-bg: #444;
 $font-super-light-bg: #666;
-$font-dark-bg: #ddd;
+$font-dark-bg: #eee;
 $font-super-dark-bg: #ddd;
 $font-brand-bg: #eee;
 $font-light-bg-link: darken($bg-brand, 3);
 
-$hl-xxxs: rgba(130, 130, 130, 0.04);
-$hl-xxs: rgba(130, 130, 130, 0.07);
-$hl-xs: rgba(130, 130, 130, 0.09);
-$hl-sm: rgba(130, 130, 130, 0.15);
-$hl-md: rgba(130, 130, 130, 0.25);
-$hl-lg: rgba(130, 130, 130, 0.35);
-$hl-xl: rgba(130, 130, 130, 0.5);
-$hl-xxl: rgba(130, 130, 130, 0.8);
-$hl: rgba(130, 130, 130, 1);
+$hl-xxxs: rgba(140, 140, 140, 0.04);
+$hl-xxs: rgba(140, 140, 140, 0.07);
+$hl-xs: rgba(140, 140, 140, 0.1);
+$hl-sm: rgba(140, 140, 140, 0.15);
+$hl-md: rgba(140, 140, 140, 0.25);
+$hl-lg: rgba(140, 140, 140, 0.35);
+$hl-xl: rgba(140, 140, 140, 0.5);
+$hl-xxl: rgba(140, 140, 140, 0.8);
+$hl: rgba(140, 140, 140, 1);
 
 $success: #88bd29;
 $notice: #e5d550;

app/css/layout/base.scss

@@ -168,6 +168,16 @@ i.fa {
   padding: $padding-md;
 }
 
+.pad-left {
+  box-sizing: border-box;
+  padding-left: $padding-md;
+}
+
+.pad-right {
+  box-sizing: border-box;
+  padding-right: $padding-md;
+}
+
 .pad-top {
   box-sizing: border-box;
   padding-top: $padding-md;
@@ -178,6 +188,10 @@ i.fa {
   padding-top: $padding-sm;
 }
 
+.margin-top-sm {
+  margin-top: $padding-sm;
+}
+
 .pad-bottom {
   box-sizing: border-box;
   padding-bottom: $padding-md;

package.json

@@ -88,8 +88,9 @@
     "concurrently": "^2.0.0",
     "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
-    "electron-builder": "^5.19.1",
-    "electron-packager": "^7.3.0",
+    "devtron": "^1.3.0",
+    "electron-builder": "^5.34.1",
+    "electron-packager": "^7.7.0",
     "electron-prebuilt": "~1.2.8",
     "elm": "^0.17.1",
     "elm-hot-loader": "^0.3.3",