feat: enhance Socket.IO transport failure handling in cron logs

- Added `onSocketIoTransportFailure` function to manage transport errors and cleanup listeners in the cron logs component.
- Integrated transport failure handling into the cron logs snapshot process, ensuring robust error management during socket communication.
- Updated the cron.vue component to utilize the new transport failure handling, improving overall stability and user experience.

Author: tacxou

apps/web/src/composables/useSocketIoClient.ts

@@ -1,6 +1,48 @@
-import type { ManagerOptions, SocketOptions } from 'socket.io-client'
+import type { ManagerOptions, Socket, SocketOptions } from 'socket.io-client'
 import { tryUseNuxtApp, useRuntimeConfig } from '#app'
 
+const STALE_SOCKET_IO_DISCONNECT_REASONS = new Set([
+  'transport error',
+  'transport close',
+  'ping timeout',
+  'io server disconnect',
+])
+
+/** Session Engine.IO invalide (ex. redémarrage API) alors que le namespace semble encore connecté. */
+export function isStaleSocketIoDisconnectReason(reason: string): boolean {
+  return STALE_SOCKET_IO_DISCONNECT_REASONS.has(reason)
+}
+
+/** Appelle `handler` sur erreur transport (ex. POST polling 400) puis retire les écouteurs. */
+export function onSocketIoTransportFailure(socket: Socket, handler: () => void): () => void {
+  let handled = false
+  const runOnce = () => {
+    if (handled) {
+      return
+    }
+    handled = true
+    cleanup()
+    handler()
+  }
+
+  const onDisconnect = (reason: string) => {
+    if (isStaleSocketIoDisconnectReason(reason)) {
+      runOnce()
+    }
+  }
+  const onError = () => runOnce()
+
+  socket.on('disconnect', onDisconnect)
+  socket.io.on('error', onError)
+
+  const cleanup = () => {
+    socket.off('disconnect', onDisconnect)
+    socket.io.off('error', onError)
+  }
+
+  return cleanup
+}
+
 /** Même préfixe que le proxy `/api/**` → API (cf. `nuxt.config.ts`). */
 export const SOCKET_IO_PATH = '/api/socket.io'
 

apps/web/src/pages/settings/cron.vue

@@ -264,7 +264,7 @@
 import type { LocationQueryValue } from 'vue-router'
 import { reactive, ref } from 'vue'
 import { attachSocketIoDebug } from '~/composables/useSocketIoDebug'
-import { buildSocketIoClientOptions } from '~/composables/useSocketIoClient'
+import { buildSocketIoClientOptions, onSocketIoTransportFailure } from '~/composables/useSocketIoClient'
 import { io, type Socket } from 'socket.io-client'
 import { NewTargetId } from '~/constants/variables'
 
@@ -350,6 +350,7 @@ export default defineNuxtComponent({
       logsLastScrollTop: 0,
       logsSnapshotTimeout: null as ReturnType<typeof setTimeout> | null,
       logsSnapshotResolver: null as (() => void) | null,
+      logsSnapshotTransportCleanup: null as (() => void) | null,
       logsHasScrolledDown: false,
       logsFollowTail: true,
     }
@@ -609,8 +610,13 @@ export default defineNuxtComponent({
         this.logsSnapshotTimeout = null
       }
     },
+    clearLogsSnapshotTransportWatch(): void {
+      this.logsSnapshotTransportCleanup?.()
+      this.logsSnapshotTransportCleanup = null
+    },
     finishCronLogsSnapshotRequest(): void {
       this.clearLogsSnapshotTimeout()
+      this.clearLogsSnapshotTransportWatch()
       this.logsLoading = false
       this.logsLoadingMore = false
       this.logsLoadInFlight = false
@@ -662,6 +668,12 @@ export default defineNuxtComponent({
 
       this.logsSocket.on('connect_error', () => {
         this.logsSocketConnected = false
+        if (this.logsLoadInFlight) {
+          void this.loadCronLogsViaHttp(true).finally(() => {
+            this.finishCronLogsSnapshotRequest()
+          })
+          return
+        }
         this.logsLoading = false
       })
 
@@ -670,8 +682,11 @@ export default defineNuxtComponent({
       })
     },
     disconnectCronLogsSocket(): void {
+      this.clearLogsSnapshotTransportWatch()
       if (this.logsSocket) {
-        this.logsSocket.emit('unsubscribe')
+        if (this.logsSocket.connected) {
+          this.logsSocket.emit('unsubscribe')
+        }
         this.logsSocket.removeAllListeners()
         this.logsSocket.disconnect()
         this.logsSocket = null
@@ -723,6 +738,7 @@ export default defineNuxtComponent({
       this.logsHasScrolledDown = false
       this.logsFollowTail = true
       this.clearLogsSnapshotTimeout()
+      this.clearLogsSnapshotTransportWatch()
       const resolver = this.logsSnapshotResolver
       this.logsSnapshotResolver = null
       resolver?.()
@@ -1127,6 +1143,12 @@ export default defineNuxtComponent({
           this.logsLoadInFlight = true
           this.logsSnapshotResolver = resolve
           this.logsLoading = true
+          this.clearLogsSnapshotTransportWatch()
+          this.logsSnapshotTransportCleanup = onSocketIoTransportFailure(socket, () => {
+            void this.loadCronLogsViaHttp(true).finally(() => {
+              this.finishCronLogsSnapshotRequest()
+            })
+          })
 
           socket.emit('resync', {
             taskName: this.selectedCronName,