Merge pull request #2276 from mattermost/PLT-2030

PLT-2030 fixing error handling

7 files changed, 58 insertions, 42 deletions

diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index f3000ee05..e47f2aa50 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -6,6 +6,7 @@
     AsyncClient with requests. */
 
 import * as AsyncClient from '../utils/async_client.jsx';
+import * as Client from '../utils/client.jsx';
 import SocketStore from '../stores/socket_store.jsx';
 import ChannelStore from '../stores/channel_store.jsx';
 import PostStore from '../stores/post_store.jsx';
@@ -45,6 +46,14 @@ const holders = defineMessages({
     wrote: {
         id: 'channel_loader.wrote',
         defaultMessage: ' wrote: '
+    },
+    connectionError: {
+        id: 'channel_loader.connection_error',
+        defaultMessage: 'There appears to be a problem with your internet connection.'
+    },
+    unknownError: {
+        id: 'channel_loader.unknown_error',
+        defaultMessage: 'We received an unexpected status code from the server.'
     }
 });
 
@@ -67,6 +76,11 @@ class ChannelLoader extends React.Component {
             wrote: formatMessage(holders.wrote)
         });
 
+        Client.setTranslations({
+            connectionError: formatMessage(holders.connectionError),
+            unknownError: formatMessage(holders.unknownError)
+        });
+
         this.state = {};
     }
     componentDidMount() {
diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx
index f04185b46..9a114c544 100644
--- a/web/react/components/error_bar.jsx
+++ b/web/react/components/error_bar.jsx
@@ -38,25 +38,9 @@ export default class ErrorBar extends React.Component {
             return false;
         }
 
-        if (s.connErrorCount && s.connErrorCount >= 1 && s.connErrorCount < 7) {
-            return false;
-        }
-
         return true;
     }
 
-    isConnectionError(s) {
-        if (!s.connErrorCount || s.connErrorCount === 0) {
-            return false;
-        }
-
-        if (s.connErrorCount > 7) {
-            return true;
-        }
-
-        return false;
-    }
-
     componentWillMount() {
         if (global.window.mm_config.SendEmailNotifications === 'false') {
             ErrorStore.storeLastError({message: this.props.intl.formatMessage(messages.preview)});
diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx
index ec299087d..23ecfb57b 100644
--- a/web/react/components/textbox.jsx
+++ b/web/react/components/textbox.jsx
@@ -59,9 +59,9 @@ export default class Textbox extends React.Component {
     }
 
     onRecievedError() {
-        const errorState = ErrorStore.getLastError();
+        const errorCount = ErrorStore.getConnectionErrorCount();
 
-        if (errorState && errorState.connErrorCount > 0) {
+        if (errorCount > 0) {
             this.setState({connection: 'bad-connection'});
         } else {
             this.setState({connection: ''});
diff --git a/web/react/stores/error_store.jsx b/web/react/stores/error_store.jsx
index 5afcefd12..6928b1e59 100644
--- a/web/react/stores/error_store.jsx
+++ b/web/react/stores/error_store.jsx
@@ -18,7 +18,6 @@ class ErrorStoreClass extends EventEmitter {
         this.emitChange = this.emitChange.bind(this);
         this.addChangeListener = this.addChangeListener.bind(this);
         this.removeChangeListener = this.removeChangeListener.bind(this);
-        this.handledError = this.handledError.bind(this);
         this.getLastError = this.getLastError.bind(this);
         this.storeLastError = this.storeLastError.bind(this);
     }
@@ -35,10 +34,6 @@ class ErrorStoreClass extends EventEmitter {
         this.removeListener(CHANGE_EVENT, callback);
     }
 
-    handledError() {
-        BrowserStore.removeItem('last_error');
-    }
-
     getLastError() {
         return BrowserStore.getItem('last_error');
     }
@@ -47,8 +42,23 @@ class ErrorStoreClass extends EventEmitter {
         BrowserStore.setItem('last_error', error);
     }
 
+    getConnectionErrorCount() {
+        var count = BrowserStore.getItem('last_error_conn');
+
+        if (count == null) {
+            return 0;
+        }
+
+        return count;
+    }
+
+    setConnectionErrorCount(count) {
+        BrowserStore.setItem('last_error_conn', count);
+    }
+
     clearLastError() {
         BrowserStore.removeItem('last_error');
+        BrowserStore.removeItem('last_error_conn');
     }
 }
 
diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx
index efb57e226..9b2b049b7 100644
--- a/web/react/stores/socket_store.jsx
+++ b/web/react/stores/socket_store.jsx
@@ -58,6 +58,10 @@ class SocketStoreClass extends EventEmitter {
 
             if (this.failCount === 0) {
                 console.log('websocket connecting to ' + connUrl); //eslint-disable-line no-console
+                if (ErrorStore.getConnectionErrorCount() > 0) {
+                    ErrorStore.setConnectionErrorCount(0);
+                    ErrorStore.emitChange();
+                }
             }
             conn = new WebSocket(connUrl);
 
@@ -65,10 +69,8 @@ class SocketStoreClass extends EventEmitter {
                 if (this.failCount > 0) {
                     console.log('websocket re-established connection'); //eslint-disable-line no-console
 
-                    if (ErrorStore.getLastError()) {
-                        ErrorStore.storeLastError(null);
-                        ErrorStore.emitChange();
-                    }
+                    ErrorStore.clearLastError();
+                    ErrorStore.emitChange();
 
                     AsyncClient.getChannels();
                     AsyncClient.getPosts(ChannelStore.getCurrentId());
@@ -86,7 +88,11 @@ class SocketStoreClass extends EventEmitter {
 
                 this.failCount = this.failCount + 1;
 
-                ErrorStore.storeLastError({connErrorCount: this.failCount, message: this.translations.socketError});
+                if (this.failCount > 7) {
+                    ErrorStore.storeLastError({message: this.translations.socketError});
+                }
+
+                ErrorStore.setConnectionErrorCount(this.failCount);
                 ErrorStore.emitChange();
 
                 setTimeout(
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index 81bdb7293..f647e2296 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -4,6 +4,15 @@ import BrowserStore from '../stores/browser_store.jsx';
 import TeamStore from '../stores/team_store.jsx';
 import ErrorStore from '../stores/error_store.jsx';
 
+let translations = {
+    connectionError: 'There appears to be a problem with your internet connection.',
+    unknownError: 'We received an unexpected status code from the server.'
+};
+
+export function setTranslations(messages) {
+    translations = messages;
+}
+
 export function track(category, action, label, property, value) {
     global.window.analytics.track(action, {category, label, property, value});
 }
@@ -23,23 +32,14 @@ function handleError(methodName, xhr, status, err) {
     var msg = '';
 
     if (e) {
-        msg = 'error in ' + methodName + ' msg=' + e.message + ' detail=' + e.detailed_error + ' rid=' + e.request_id;
+        msg = 'method=' + methodName + ' msg=' + e.message + ' detail=' + e.detailed_error + ' rid=' + e.request_id;
     } else {
-        msg = 'error in ' + methodName + ' status=' + status + ' statusCode=' + xhr.status + ' err=' + err;
+        msg = 'method=' + methodName + ' status=' + status + ' statusCode=' + xhr.status + ' err=' + err;
 
         if (xhr.status === 0) {
-            let errorCount = 1;
-            const oldError = ErrorStore.getLastError();
-            let connectError = 'There appears to be a problem with your internet connection';
-
-            if (oldError && oldError.connErrorCount) {
-                errorCount += oldError.connErrorCount;
-                connectError = 'Please check connection, Mattermost unreachable. If issue persists, ask administrator to check WebSocket port.';
-            }
-
-            e = {message: connectError, connErrorCount: errorCount};
+            e = {message: translations.connectionError};
         } else {
-            e = {message: 'We received an unexpected status code from the server (' + xhr.status + ')'};
+            e = {message: translations.unknownError + ' (' + xhr.status + ')'};
         }
     }
 
@@ -279,7 +279,7 @@ export function logout() {
     var currentTeamUrl = TeamStore.getCurrentTeamUrl();
     BrowserStore.signalLogout();
     BrowserStore.clear();
-    ErrorStore.storeLastError(null);
+    ErrorStore.clearLastError();
     window.location.href = currentTeamUrl + '/logout';
 }
 
diff --git a/web/static/i18n/en.json b/web/static/i18n/en.json
index b4c801f5d..b274ecbc6 100644
--- a/web/static/i18n/en.json
+++ b/web/static/i18n/en.json
@@ -543,6 +543,8 @@
   "channel_loader.uploadedFile": " uploaded a file",
   "channel_loader.uploadedImage": " uploaded an image",
   "channel_loader.wrote": " wrote: ",
+  "channel_loader.connection_error": "There appears to be a problem with your internet connection.",
+  "channel_loader.unknown_error": "We received an unexpected status code from the server.",
   "channel_members_modal.addNew": " Add New Members",
   "channel_members_modal.close": "Close",
   "channel_memebers_modal.members": " Members",