Merge branch '361-show-error-if-the-websocket-reconnecting-loop-stops' into 'develop'

Resolve "Show error if the websocket reconnecting loop stops"

Closes #361

See merge request bramw/baserow!194

backend/src/baserow/ws/consumers.py

@@ -79,7 +79,7 @@ class CoreConsumer(AsyncJsonWebsocketConsumer):
             'parameters': parameters
         })
 
-    async def discard_current_page(self):
+    async def discard_current_page(self, send_confirmation=True):
         """
         If the user has subscribed to another page then he will be unsubscribed from
         the last page.
@@ -97,11 +97,12 @@ class CoreConsumer(AsyncJsonWebsocketConsumer):
         del self.scope['page']
         del self.scope['page_parameters']
 
-        await self.send_json({
-            'type': 'page_discard',
-            'page': page_type,
-            'parameters': page_parameters
-        })
+        if send_confirmation:
+            await self.send_json({
+                'type': 'page_discard',
+                'page': page_type,
+                'parameters': page_parameters
+            })
 
     async def broadcast_to_users(self, event):
         """
@@ -142,5 +143,5 @@ class CoreConsumer(AsyncJsonWebsocketConsumer):
             await self.send_json(payload)
 
     async def disconnect(self, message):
-        await self.discard_current_page()
+        await self.discard_current_page(send_confirmation=False)
         await self.channel_layer.group_discard('users', self.channel_name)

changelog.md

@@ -9,7 +9,10 @@
 * Made it possible to re-order fields in a grid view.
 * Show the number of filters and sorts active in the header of a grid view.
 * The first user to sign-up after installation now gets given staff status.
-* Prevented the date field value to be negative.
+* Show an error to the user when the web socket connection could not be made and the
+  reconnect loop stops.
+* Fixed 100X backend web socket errors when refreshing the page.
+* Prevented the date field value being negative.
 
 ## Released (2021-03-01)
 

web-frontend/modules/core/components/notifications/FailedConnectingNotification.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="alert alert--simple alert--with-shadow alert--has-icon alert--error"
+  >
+    <div class="alert__icon">
+      <i class="fas fa-exclamation"></i>
+    </div>
+    <div class="alert__title">Failed</div>
+    <p class="alert__content">
+      Connection to the server has failed. Please refresh the page.
+    </p>
+    <a
+      class="button margin-top-1"
+      :class="{ 'button--loading': loading }"
+      @click="reload()"
+      >Refresh page</a
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FailedConnectingNotification',
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  methods: {
+    reload() {
+      this.loading = true
+      location.reload()
+    },
+  },
+}
+</script>

web-frontend/modules/core/components/notifications/Notifications.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="notifications">
     <ConnectingNotification v-if="connecting"></ConnectingNotification>
+    <FailedConnectingNotification
+      v-if="failedConnecting"
+    ></FailedConnectingNotification>
     <Notification
       v-for="notification in notifications"
       :key="notification.id"
@@ -14,13 +17,19 @@ import { mapState } from 'vuex'
 
 import Notification from '@baserow/modules/core/components/notifications/Notification'
 import ConnectingNotification from '@baserow/modules/core/components/notifications/ConnectingNotification'
+import FailedConnectingNotification from '@baserow/modules/core/components/notifications/FailedConnectingNotification'
 
 export default {
   name: 'Notifications',
-  components: { Notification, ConnectingNotification },
+  components: {
+    Notification,
+    ConnectingNotification,
+    FailedConnectingNotification,
+  },
   computed: {
     ...mapState({
       connecting: (state) => state.notification.connecting,
+      failedConnecting: (state) => state.notification.failedConnecting,
       notifications: (state) => state.notification.items,
     }),
   },

web-frontend/modules/core/plugins/realTimeHandler.js

@@ -7,8 +7,8 @@ export class RealTimeHandler {
     this.connected = false
     this.reconnect = false
     this.reconnectTimeout = null
-    this.events = {}
     this.attempts = 0
+    this.events = {}
     this.page = null
     this.pageParameters = {}
     this.subscribedToPage = true
@@ -32,11 +32,15 @@ export class RealTimeHandler {
       return
     }
 
-    // Check if we already had a failed authentication response from the server before.
-    // If so, and if the authentication token has not changed, we don't need to connect
-    // because we already know it will fail.
-    if (!this.authenticationSuccess && token === this.lastToken) {
-      this.delayedReconnect()
+    // Stop connecting if we have already tried more than 10 times, if we do not have
+    // an authentication token or if the server has already responded with a failed
+    // authentication error and the token has not changed.
+    if (
+      this.attempts > 10 ||
+      token === null ||
+      (!this.authenticationSuccess && token === this.lastToken)
+    ) {
+      this.context.store.dispatch('notification/setFailedConnecting', true)
       return
     }
 
@@ -88,20 +92,12 @@ export class RealTimeHandler {
      * want to miss any important real time updates. After the first attempt we want to
      * delay retry with 5 seconds.
      */
-    this.socket.onclose = (event) => {
+    this.socket.onclose = () => {
       this.connected = false
       // By default the user not subscribed to a page a.k.a `null`, so if the current
       // page is already null we can mark it as subscribed.
       this.subscribedToPage = this.page === null
-
-      // Automatically reconnect after the given timeout if the socket closes not
-      // normally.
-      // 1000=CLOSE_NORMAL
-      // 1001=CLOSE_GOING_AWAY
-      // 1002+=an error.
-      if (event.code > 1001) {
-        this.delayedReconnect()
-      }
+      this.delayedReconnect()
     }
   }
 
@@ -166,6 +162,7 @@ export class RealTimeHandler {
     }
 
     this.context.store.dispatch('notification/setConnecting', false)
+    this.context.store.dispatch('notification/setFailedConnecting', false)
     clearTimeout(this.reconnectTimeout)
     this.reconnect = false
     this.attempts = 0

web-frontend/modules/core/store/notification.js

@@ -2,6 +2,7 @@ import { uuid } from '@baserow/modules/core/utils/string'
 
 export const state = () => ({
   connecting: false,
+  failedConnecting: false,
   items: [],
 })
 
@@ -16,6 +17,9 @@ export const mutations = {
   SET_CONNECTING(state, value) {
     state.connecting = value
   },
+  SET_FAILED_CONNECTING(state, value) {
+    state.failedConnecting = value
+  },
 }
 
 export const actions = {
@@ -46,8 +50,17 @@ export const actions = {
     commit('REMOVE', notification)
   },
   setConnecting({ commit }, value) {
+    if (value) {
+      commit('SET_FAILED_CONNECTING', false)
+    }
     commit('SET_CONNECTING', value)
   },
+  setFailedConnecting({ commit }, value) {
+    if (value) {
+      commit('SET_CONNECTING', false)
+    }
+    commit('SET_FAILED_CONNECTING', value)
+  },
 }
 
 export const getters = {}