feat: reconnect ws when logs level changed (#1003)

src/signals/logs.ts

@@ -3,12 +3,17 @@ import { logLevel, logMaxRows } from '~/signals/config'
 import { Log, LogWithSeq } from '~/types'
 
 let seq = 1
-const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 
-const logsData = useWsRequest<Log>('logs', { level: logLevel() })
+const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 const [paused, setPaused] = createSignal(false)
 
-createEffect(() => {
+createEffect(
+  on(logLevel, (value, oldValue) => {
+    if (value === oldValue) return
+
+    const logsData = useWsRequest<Log>('logs', { level: logLevel() })
+
+    createEffect(() => {
       const data = logsData()
 
       if (!data || paused()) {
@@ -17,7 +22,9 @@ createEffect(() => {
 
       setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, logMaxRows()))
       seq++
-})
+    })
+  }),
+)
 
 export const useLogs = () => {
   return {

src/signals/request.ts

@@ -1,6 +1,9 @@
 import { createEventSignal } from '@solid-primitives/event-listener'
 import { makePersisted } from '@solid-primitives/storage'
-import { createReconnectingWS } from '@solid-primitives/websocket'
+import {
+  createReconnectingWS,
+  ReconnectingWebSocket,
+} from '@solid-primitives/websocket'
 import ky from 'ky'
 import _ from 'lodash'
 
@@ -50,10 +53,19 @@ export const secret = () => endpoint()?.secret
 export const wsEndpointURL = () =>
   _.trimEnd(new URL(endpoint()?.url ?? '').href.replace('http', 'ws'), '/')
 
+const webSocketInstanceMap = new Map<string, ReconnectingWebSocket>()
+
 export const useWsRequest = <T>(
   path: string,
   queries: Record<string, string> = {},
 ) => {
+  const oldInstance = webSocketInstanceMap.get(path)
+
+  if (oldInstance) {
+    oldInstance.close()
+    webSocketInstanceMap.delete(path)
+  }
+
   const queryParams = new URLSearchParams(queries)
   queryParams.set('token', secret() ?? '')
 
@@ -65,6 +77,8 @@ export const useWsRequest = <T>(
     message: MessageEvent
   }>(ws, 'message')
 
+  webSocketInstanceMap.set(path, ws)
+
   return createMemo<T | null>(() => {
     const e = event()