refactor: webSocketWrapper implementation

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

src/components/common/AddInstanceDialog.vue

@@ -130,26 +130,19 @@ export default class AddInstanceDialog extends Mixins(StateMixin) {
       this.abortController = new AbortController()
       const { signal } = this.abortController
 
-      try {
-        await webSocketWrapper(socketUrl, signal)
+      const result = await webSocketWrapper(socketUrl, {
+        timeout: 3000,
+        signal
+      })
 
+      if (result.ok) {
         this.verified = true
-      } catch (e) {
-        if (signal.aborted) return
-
-        if (
-          e != null &&
-          typeof e === 'object' &&
-          'code' in e &&
-          e.code != null
-        ) {
-          this.error = e.code.toString()
-        }
-
+      } else if (result.reason !== 'cancelled') {
+        this.error = result.message
         this.note = this.$t('app.endpoint.error.cant_connect').toString()
-      } finally {
-        this.verifying = false
       }
+
+      this.verifying = false
     }
   }
 

src/components/widgets/camera/services/WebrtcMediamtxCamera.vue

@@ -42,7 +42,7 @@ export default class WebrtcMediamtxCamera extends Mixins(CameraMixin) {
   whepUrl: string = ''
   sessionUrl: string = ''
   pc: RTCPeerConnection | null = null
-  restartTimeout: number | null = null
+  restartTimeout: ReturnType<typeof setTimeout> | null = null
   offerData: MediamtxOffer | null = null
   queuedCandidates: RTCIceCandidate[] = []
 
@@ -192,7 +192,7 @@ export default class WebrtcMediamtxCamera extends Mixins(CameraMixin) {
       this.pc = null
     }
 
-    this.restartTimeout = window.setTimeout(() => {
+    this.restartTimeout = setTimeout(() => {
       this.restartTimeout = null
       this.loadStream()
     }, 2000)

src/components/widgets/mmu/MmuUnit.vue

@@ -205,7 +205,7 @@ export default class MmuUnit extends Mixins(BrowserMixin, StateMixin, MmuMixin)
 
   gateMenuVisible: Record<number, boolean> = {}
 
-  closeTimeout: number | null = null
+  closeTimeout: ReturnType<typeof setTimeout> | null = null
   menuX = 0
   menuY = 0
 
@@ -402,7 +402,7 @@ export default class MmuUnit extends Mixins(BrowserMixin, StateMixin, MmuMixin)
     this.closeContextMenu()
 
     this.$set(this.gateMenuVisible, gate, true)
-    this.closeTimeout = window.setTimeout(() => {
+    this.closeTimeout = setTimeout(() => {
       this.closeContextMenu()
     }, 6000)
   }

src/init.ts

@@ -6,7 +6,6 @@ import type { ApiConfig, HostConfig, InstanceConfig } from './store/config/types
 import sanitizeEndpoint from './util/sanitize-endpoint'
 import webSocketWrapper from './util/web-socket-wrapper'
 import promiseAny from './util/promise-any'
-import sleep from './util/sleep'
 import md5 from 'md5'
 
 // Load API configuration
@@ -93,25 +92,28 @@ const getApiConfig = async (hostConfig: HostConfig, apiUrlHash?: string | null):
   try {
     const { signal } = abortController
 
-    const defaultOnTimeout = async () => {
-      await sleep(5000, signal)
+    return await promiseAny(
+      endpoints
+        .map(async (endpoint) => {
+          const apiEndpoints = Vue.$filters.getApiUrls(endpoint)
 
-      return {
-        apiUrl: '',
-        socketUrl: ''
-      } satisfies ApiConfig
-    }
-
-    return await promiseAny([
-      ...endpoints.map(async (endpoint) => {
-        const apiEndpoints = Vue.$filters.getApiUrls(endpoint)
+          const result = await webSocketWrapper(apiEndpoints.socketUrl, {
+            timeout: 1200,
+            signal
+          })
 
-        await webSocketWrapper(apiEndpoints.socketUrl, signal)
+          if (!result.ok) {
+            throw new Error(result.message)
+          }
 
-        return apiEndpoints
-      }),
-      defaultOnTimeout()
-    ])
+          return apiEndpoints
+        })
+    )
+  } catch {
+    return {
+      apiUrl: '',
+      socketUrl: ''
+    } satisfies ApiConfig
   } finally {
     abortController.abort()
   }

src/plugins/sandboxedEval.ts

@@ -1,4 +1,3 @@
-import abortControllerWithTimeout from '@/util/abort-controller-with-timeout'
 import type { SandboxedEvalWorkerResponseMessage, SandboxedEvalWorkerRequestMessage } from '@/workers/sandboxedEval.worker'
 
 import SandboxedEvalWorker from '@/workers/sandboxedEval.worker?ts?worker'
@@ -9,8 +8,7 @@ const sandboxedEval = async<T>(code: string, feature?: string, timeout = 800): P
   const id = Date.now()
   const worker = getWorker(feature)
 
-  const abortController = abortControllerWithTimeout(timeout)
-  const { signal } = abortController
+  const signal = AbortSignal.timeout(timeout)
 
   const workerPromise = new Promise<unknown>((resolve, reject) => {
     const cleanup = () => {
@@ -63,8 +61,6 @@ const sandboxedEval = async<T>(code: string, feature?: string, timeout = 800): P
 
     return result as T
   } finally {
-    abortController.clear()
-
     if (feature && signal.aborted) {
       worker.terminate()
       delete workers[feature]

src/plugins/socketClient.ts

@@ -19,7 +19,7 @@ export class WebSocketClient {
   private store: TypedStore
   private cache: CachedParams | null = null
   private retryCount = 0
-  private reconnectTimeout: number | null = null
+  private reconnectTimeout: ReturnType<typeof setTimeout> | null = null
 
   constructor (options: SocketPluginOptions) {
     this.store = options.store
@@ -190,7 +190,7 @@ export class WebSocketClient {
     }
 
     this.store.typedDispatch('socket/onSetStatus', 'connecting')
-    this.reconnectTimeout = window.setTimeout(() => {
+    this.reconnectTimeout = setTimeout(() => {
       this.reconnectTimeout = null
       this.openSocket()
     }, EXPONENTIAL_BACKOFF ** this.retryCount * 1000)

src/store/server/actions.ts

@@ -10,7 +10,7 @@ import i18n from '@/plugins/i18n'
 import { gte, valid } from 'semver'
 import type { ObjectWithRequest } from '@/plugins/socketClient'
 
-let retryTimeout: number
+let retryTimeout: ReturnType<typeof setTimeout>
 
 export const actions = {
   /**
@@ -94,7 +94,7 @@ export const actions = {
     dispatch('checkMoonrakerMinVersion')
 
     if (payload.klippy_state !== 'ready') {
-      retryTimeout = window.setTimeout(() => {
+      retryTimeout = setTimeout(() => {
         SocketActions.serverInfo()
       }, Globals.KLIPPY_RETRY_DELAY)
     }

src/store/socket/actions.ts

@@ -18,7 +18,7 @@ const MODULES_TO_RESET_ON_DROP = [
   'gcodePreview'
 ] as const
 
-let retryTimeout: number
+let retryTimeout: ReturnType<typeof setTimeout>
 
 // State machine edges. Self-transitions (same → same) are accepted as no-ops.
 const VALID_TRANSITIONS: Record<SocketStatus, readonly SocketStatus[]> = {
@@ -276,7 +276,7 @@ export const actions = {
       // Klippy non-responsive or config error. Retry serverInfo after a delay.
       commit('printer/setPrinterInfo', { state: 'error', state_message: payload.message }, { root: true })
       clearTimeout(retryTimeout)
-      retryTimeout = window.setTimeout(() => {
+      retryTimeout = setTimeout(() => {
         SocketActions.serverInfo()
       }, Globals.KLIPPY_RETRY_DELAY)
     }

src/util/abort-controller-with-timeout.ts

@@ -1,48 +1,127 @@
-import { consola } from 'consola'
+import consola from 'consola'
 
-const webSocketWrapper = (url: string, signal?: AbortSignal) => {
+export type WebSocketCheckResult =
+  | { ok: true }
+  | { ok: false; reason: 'timeout' | 'cancelled' | 'error'; message: string }
+
+export interface CheckWebSocketOptions {
+  timeout?: number;
+  signal?: AbortSignal;
+  protocols?: string | string[];
+}
+
+const webSocketWrapper = (url: string, options: CheckWebSocketOptions = {}): Promise<WebSocketCheckResult> => {
   const debug = (message: string, ...args: unknown[]) => consola.debug(`[webSocketWrapper] ${url} ${message}`, ...args)
 
-  return new Promise((resolve, reject) => {
-    debug('opening...')
+  const { timeout, signal, protocols } = options
+
+  const combinedSignal = AbortSignal.any([
+    ...(timeout !== undefined ? [AbortSignal.timeout(timeout)] : []),
+    ...(signal !== undefined ? [signal] : []),
+  ])
+
+  const getAbortResult = (): WebSocketCheckResult => {
+    if (
+      timeout !== undefined &&
+      combinedSignal.reason instanceof DOMException &&
+      combinedSignal.reason.name === 'TimeoutError'
+    ) {
+      debug('timed out')
+
+      return {
+        ok: false,
+        reason: 'timeout',
+        message: combinedSignal.reason.message
+      }
+    }
 
-    const dispose = () => {
-      signal?.removeEventListener('abort', abortHandler)
+    debug('aborted')
 
-      connection.close()
+    return {
+      ok: false,
+      reason: 'cancelled',
+      message: combinedSignal.reason instanceof Error
+        ? combinedSignal.reason.message
+        : 'Check was cancelled via AbortSignal.',
     }
+  }
+
+  if (combinedSignal?.aborted) {
+    return Promise.resolve(getAbortResult())
+  }
 
-    const abortHandler = () => {
-      debug('aborted')
+  return new Promise<WebSocketCheckResult>((resolve) => {
+    let settled = false
 
-      dispose()
+    const settle = (result: WebSocketCheckResult) => {
+      if (settled) return
 
-      reject(new Error('AbortError'))
+      settled = true
+
+      combinedSignal?.removeEventListener('abort', onAbort)
+
+      if (
+        ws.readyState === WebSocket.CONNECTING ||
+        ws.readyState === WebSocket.OPEN
+      ) {
+        // Use code 1000 (Normal Closure) so servers don't log warnings.
+        try {
+          ws.close(1000, 'probe complete')
+        } catch {
+          /* ignore */
+        }
+      }
+
+      resolve(result)
     }
 
-    signal?.addEventListener('abort', abortHandler)
+    let ws: WebSocket
 
-    const connection = new WebSocket(url)
+    try {
+      debug('opening...')
 
-    connection.onopen = (event) => {
-      debug('opened', event)
+      ws = new WebSocket(url, protocols)
+    } catch (err) {
+      // `new WebSocket()` throws synchronously for an invalid URL scheme.
+      resolve({
+        ok: false,
+        reason: 'error',
+        message: err instanceof Error ? err.message : String(err),
+      })
 
-      dispose()
+      return
+    }
+
+    ws.onopen = (event) => {
+      debug('opened', event)
 
-      resolve(null)
+      settle({ ok: true })
     }
 
-    connection.onerror = (event) => {
+    ws.onerror = (event) => {
       debug('error', event)
 
-      dispose()
-
-      reject(event)
+      // The browser hides error details for security reasons; the close event
+      // that always follows carries a (limited) code and reason.
     }
 
-    connection.onclose = (event) => {
+    ws.onclose = (event) => {
       debug('closed', event)
+
+      settle({
+        ok: false,
+        reason: 'error',
+        message: event.reason
+          ? `Connection closed before opening: ${event.reason} (code ${event.code})`
+          : `Connection closed before opening (code ${event.code}).`,
+      })
+    }
+
+    const onAbort = (): void => {
+      settle(getAbortResult())
     }
+
+    combinedSignal?.addEventListener('abort', onAbort, { once: true })
   })
 }