Merge branch 'feature/error-for-failed-to-load' into dev

Close #14

src/browser/index.jsx

@@ -10,6 +10,8 @@ const Col = ReactBootstrap.Col;
 const Nav = ReactBootstrap.Nav;
 const NavItem = ReactBootstrap.NavItem;
 const Badge = ReactBootstrap.Badge;
+const ListGroup = ReactBootstrap.ListGroup;
+const ListGroupItem = ReactBootstrap.ListGroupItem;
 
 const electron = require('electron');
 const remote = electron.remote;
@@ -204,6 +206,7 @@ var TabBar = React.createClass({
 var MattermostView = React.createClass({
   getInitialState: function() {
     return {
+      did_fail_load: null
     };
   },
   handleUnreadCountChange: function(unreadCount, mentionCount, isUnread, isMentioned) {
@@ -216,6 +219,18 @@ var MattermostView = React.createClass({
     var thisObj = this;
     var webview = ReactDOM.findDOMNode(this.refs.webview);
 
+    webview.addEventListener('did-fail-load', function(e) {
+      console.log(thisObj.props.name, 'webview did-fail-load', e);
+      // should use permanent way to indicate
+      var did_fail_load_notification = new Notification(`Failed to load "${thisObj.props.name}"`, {
+        body: `ErrorCode: ${e.errorCode}`,
+        icon: '../resources/appicon.png'
+      });
+      thisObj.setState({
+        did_fail_load: e
+      });
+    });
+
     // Open link in browserWindow. for exmaple, attached files.
     webview.addEventListener('new-window', function(e) {
       var currentURL = url.parse(webview.getURL());
@@ -293,7 +308,40 @@ var MattermostView = React.createClass({
     // 'disablewebsecurity' is necessary to display external images.
     // However, it allows also CSS/JavaScript.
     // So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
-    return (<webview id={ this.props.id } className="mattermostView" style={ this.props.style } preload="webview/mattermost.js" src={ this.props.src } ref="webview"></webview>);
+    if (this.state.did_fail_load === null) {
+      return (<webview id={ this.props.id } className="mattermostView" style={ this.props.style } preload="webview/mattermost.js" src={ this.props.src } ref="webview"></webview>);
+    } else {
+      return (<ErrorView id={ this.props.id + '-fail' } className="errorView" errorInfo={ this.state.did_fail_load } style={ this.props.style }></ErrorView>)
+    }
+  }
+});
+
+// ErrorCode: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
+// FIXME: need better wording in English
+var ErrorView = React.createClass({
+  render: function() {
+    return (
+      <Grid id={ this.props.id } style={ this.props.style }>
+        <h1>Failed to load the URL</h1>
+        <p>
+          { 'URL: ' }
+          { this.props.errorInfo.validatedURL }
+        </p>
+        <p>
+          { 'Error code: ' }
+          { this.props.errorInfo.errorCode }
+        </p>
+        <p>
+          { this.props.errorInfo.errorDescription }
+        </p>
+        <p>Please check below. Then, reload this window. (Ctrl+R or Command+R)</p>
+        <ListGroup>
+          <ListGroupItem>Is your computer online?</ListGroupItem>
+          <ListGroupItem>Is the server alive?</ListGroupItem>
+          <ListGroupItem>Is the URL correct?</ListGroupItem>
+        </ListGroup>
+      </Grid>
+      );
   }
 });
 

test/browser_test.js

@@ -166,6 +166,21 @@ describe('electron-mattermost', function() {
         })
         .end();
     });
+
+    it('should show error when using incorrect URL', function() {
+      this.timeout(30000)
+      fs.writeFileSync(config_file_path, JSON.stringify({
+        version: 1,
+        teams: [{
+          name: 'error_1',
+          url: 'http://false'
+        }]
+      }));
+      return client
+        .init()
+        .waitForVisible('#mattermostView0-fail', 20000)
+        .end();
+    });
   });
 
   describe('settings.html', function() {