streamlined WS flow, reduced spam amount related to WS reconnections

src/modules/api.js

@@ -3,9 +3,10 @@ import { WSConnectionStatus } from '../services/api/api.service.js'
 import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
 import { Socket } from 'phoenix'
 
+const retryTimeout = (multiplier) => 1000 * multiplier
+
 const api = {
   state: {
-    connectionBroken: false,
     retryMultiplier: 1,
     backendInteractor: backendInteractorService(),
     fetchers: {},
@@ -37,16 +38,20 @@ const api = {
     setMastoUserSocketStatus (state, value) {
       state.mastoUserSocketStatus = value
     },
-    recoverConnection (state) {
+    incrementRetryMultiplier (state) {
-      state.connectionBroken = false
+      state.retryMultiplier = Math.max(++state.retryMultiplier, 3)
     },
-    breakConnection (state) {
+    resetRetryMultiplier (state) {
-      state.connectionBroken = true
+      state.retryMultiplier = 1
     }
   },
   actions: {
-    // Global MastoAPI socket control, in future should disable ALL sockets/(re)start relevant sockets
+    /**
-    enableMastoSockets (store) {
+     * Global MastoAPI socket control, in future should disable ALL sockets/(re)start relevant sockets
+     *
+     * @param {Boolean} [initial] - whether this enabling happened at boot time or not
+     */
+    enableMastoSockets (store, initial) {
       const { state, dispatch, commit } = store
       // Do not initialize unless nonexistent or closed
       if (
@@ -58,13 +63,17 @@ const api = {
       ) {
         return
       }
-      commit('recoverConnection')
+      if (initial) {
+        commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING_INITIAL)
+      } else {
+        commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING)
+      }
       return dispatch('startMastoUserSocket')
     },
     disableMastoSockets (store) {
       const { state, dispatch, commit } = store
       if (!state.mastoUserSocket) return
-      commit('recoverConnection')
+      commit('setMastoUserSocketStatus', WSConnectionStatus.DISABLED)
       return dispatch('stopMastoUserSocket')
     },
 
@@ -111,19 +120,28 @@ const api = {
           )
           state.mastoUserSocket.addEventListener('open', () => {
             // Do not show notification when we just opened up the page
-            if (state.mastoUserSocketStatus !== null) {
+            if (state.mastoUserSocketStatus !== WSConnectionStatus.STARTING_INITIAL) {
-              commit('recoverConnection')
               dispatch('pushGlobalNotice', {
                 level: 'success',
                 messageKey: 'timeline.socket_reconnected',
                 timeout: 5000
               })
             }
+            // Stop polling if we were errored or disabled
+            if (new Set([
+              WSConnectionStatus.ERROR,
+              WSConnectionStatus.DISABLED
+            ]).has(state.mastoUserSocketStatus)) {
+              dispatch('stopFetchingTimeline', { timeline: 'friends' })
+              dispatch('stopFetchingNotifications')
+              dispatch('stopFetchingChats')
+            }
+            commit('resetRetryMultiplier')
             commit('setMastoUserSocketStatus', WSConnectionStatus.JOINED)
           })
           state.mastoUserSocket.addEventListener('error', ({ detail: error }) => {
             console.error('Error in MastoAPI websocket:', error)
-            commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
+            // TODO is this needed?
             dispatch('clearOpenedChats')
           })
           state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => {
@@ -134,16 +152,17 @@ const api = {
             const { code } = closeEvent
             if (ignoreCodes.has(code)) {
               console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`)
+              commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
             } else {
               console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`)
-              dispatch('startFetchingTimeline', { timeline: 'friends' })
-              dispatch('startFetchingNotifications')
-              dispatch('startFetchingChats')
               setTimeout(() => {
-                console.log('TEST')
+                dispatch('startMastoUserSocket')
-                dispatch('restartMastoUserSocket')
+              }, retryTimeout(state.retryMultiplier))
-              }, 1000)
+              commit('incrementRetryMultiplier')
-              if (!state.connectionBroken) {
+              if (state.mastoUserSocketStatus !== WSConnectionStatus.ERROR) {
+                dispatch('startFetchingTimeline', { timeline: 'friends' })
+                dispatch('startFetchingNotifications')
+                dispatch('startFetchingChats')
                 dispatch('pushGlobalNotice', {
                   level: 'error',
                   messageKey: 'timeline.socket_broke',
@@ -151,9 +170,8 @@ const api = {
                   timeout: 5000
                 })
               }
-              commit('breakConnection')
+              commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
             }
-            commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
             dispatch('clearOpenedChats')
           })
           resolve()
@@ -162,15 +180,6 @@ const api = {
         }
       })
     },
-    restartMastoUserSocket ({ dispatch }) {
-      // This basically starts MastoAPI user socket and stops conventional
-      // fetchers when connection reestablished
-      return dispatch('startMastoUserSocket').then(() => {
-        dispatch('stopFetchingTimeline', { timeline: 'friends' })
-        dispatch('stopFetchingNotifications')
-        dispatch('stopFetchingChats')
-      })
-    },
     stopMastoUserSocket ({ state, dispatch }) {
       dispatch('startFetchingTimeline', { timeline: 'friends' })
       dispatch('startFetchingNotifications')

src/modules/users.js

@@ -549,9 +549,8 @@ const users = {
               if (store.getters.mergedConfig.useStreamingApi) {
                 store.dispatch('fetchTimeline', 'friends', { since: null })
                 store.dispatch('fetchNotifications', { since: null })
-                store.dispatch('enableMastoSockets').catch((error) => {
+                store.dispatch('enableMastoSockets', true).catch((error) => {
                   console.error('Failed initializing MastoAPI Streaming socket', error)
-                  startPolling()
                 }).then(() => {
                   store.dispatch('fetchChats', { latest: true })
                   setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)

src/services/api/api.service.js

@@ -1184,7 +1184,10 @@ export const handleMastoWS = (wsEvent) => {
 export const WSConnectionStatus = Object.freeze({
   'JOINED': 1,
   'CLOSED': 2,
-  'ERROR': 3
+  'ERROR': 3,
+  'DISABLED': 4,
+  'STARTING': 5,
+  'STARTING_INITIAL': 6
 })
 
 const chats = ({ credentials }) => {

src/services/notifications_fetcher/notifications_fetcher.service.js

@@ -57,14 +57,12 @@ const fetchNotifications = ({ store, args, older }) => {
       return notifications
     })
     .catch((error) => {
-      if (!store.rootState.api.connectionBroken) {
+      store.dispatch('pushGlobalNotice', {
-        store.dispatch('pushGlobalNotice', {
+        level: 'error',
-          level: 'error',
+        messageKey: 'notifications.error',
-          messageKey: 'notifications.error',
+        messageArgs: [error.message],
-          messageArgs: [error.message],
+        timeout: 5000
-          timeout: 5000
+      })
-        })
-      }
     })
 }
 

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -66,14 +66,12 @@ const fetchAndUpdate = ({
       return { statuses, pagination }
     })
     .catch((error) => {
-      if (!store.rootState.api.connectionBroken) {
+      store.dispatch('pushGlobalNotice', {
-        store.dispatch('pushGlobalNotice', {
+        level: 'error',
-          level: 'error',
+        messageKey: 'timeline.error',
-          messageKey: 'timeline.error',
+        messageArgs: [error.message],
-          messageArgs: [error.message],
+        timeout: 5000
-          timeout: 5000
+      })
-        })
-      }
     })
 }