fix: improve socket connection handling and add ping mechanism

src/components/Overlay/index.tsx

@@ -71,25 +71,6 @@ const OverlayPage = () => {
 
   const [isInIframe, setIsInIframe] = useState(false)
 
-  // Refresh the page every 5 minutes if the socket is disconnected
-  useEffect(() => {
-    let reloadTimeout: NodeJS.Timeout | null = null
-
-    if (!connected) {
-      reloadTimeout = setTimeout(() => {
-        window.location.reload()
-      }, 300000)
-    } else if (reloadTimeout) {
-      clearTimeout(reloadTimeout)
-    }
-
-    return () => {
-      if (reloadTimeout) {
-        clearTimeout(reloadTimeout)
-      }
-    }
-  }, [connected])
-
   useEffect(() => {
     if (!original) return
 
@@ -115,8 +96,6 @@ const OverlayPage = () => {
   }, [original])
 
   useEffect(() => {
-    let reloadTimeout: NodeJS.Timeout | null = null
-
     if (!original?.stream_online) {
       notification.open({
         key: 'stream-offline',
@@ -127,22 +106,8 @@ const OverlayPage = () => {
         description:
           'Dotabod is disabled until you go live on Twitch. Not streaming on Twitch? Type !online in your Twitch chat to enable Dotabod.',
       })
-
-      // Refresh page every 5 minutes to check if stream is online
-      reloadTimeout = setTimeout(() => {
-        window.location.reload()
-      }, 300000)
     } else {
       notification.destroy('stream-offline')
-      if (reloadTimeout) {
-        clearTimeout(reloadTimeout)
-      }
-    }
-
-    return () => {
-      if (reloadTimeout) {
-        clearTimeout(reloadTimeout)
-      }
     }
   }, [notification, original?.stream_online])
 

src/lib/hooks/useSocket.tsx

@@ -35,6 +35,9 @@ export type WinChance = {
   visible: boolean
 }
 
+// Add heartbeat/ping mechanism
+const PING_INTERVAL = 30000 // 30 seconds
+
 type wlType = {
   win: number
   lose: number
@@ -59,6 +62,24 @@ export const useSocket = ({
 
   // can pass any key here, we just want mutate() function on `api/settings`
   const { mutate } = useUpdateSetting(Settings.commandWL)
+
+  useEffect(() => {
+    if (!socket) return
+
+    const pingInterval = setInterval(() => {
+      socket.emit('ping')
+    }, PING_INTERVAL)
+
+    socket.on('pong', () => {
+      // Connection is still alive
+      setConnected(true)
+    })
+
+    return () => {
+      clearInterval(pingInterval)
+    }
+  }, [setConnected])
+
   // on react unmount. mainly used for hot reloads so it doesnt register 900 .on()'s
   useEffect(() => {
     return () => {
@@ -178,20 +199,18 @@ export const useSocket = ({
       socket.close()
     })
     socket.on('connect', () => setConnected(true))
-    socket.on('connect_error', (err) => {
-      setTimeout(() => {
-        console.log('Reconnecting due to connect error...', { err })
-        socket.connect()
-      }, 4000)
-    })
     socket.on('disconnect', (reason) => {
       setConnected(false)
       console.log('Disconnected from socket', { reason })
 
-      if (reason === 'io server disconnect') {
-        console.log('Reconnecting...')
-        // the disconnection was initiated by the server, need to reconnect manually
-        socket.connect()
+      // Add more comprehensive reconnection logic
+      if (
+        reason === 'io server disconnect' ||
+        reason === 'transport close' ||
+        reason === 'ping timeout'
+      ) {
+        console.log('Attempting to reconnect...')
+        setTimeout(() => socket.connect(), 1000)
       }
     })
 
@@ -229,6 +248,30 @@ export const useSocket = ({
     socket.on('refresh', () => {
       router.reload()
     })
+
+    socket.on('error', (error) => {
+      console.error('Socket error:', error)
+      captureException(error)
+
+      // Attempt to reconnect on error
+      setTimeout(() => {
+        if (!socket.connected) {
+          console.log('Attempting to reconnect after error...')
+          socket.connect()
+        }
+      }, 2000)
+    })
+
+    socket.on('connect_error', (error) => {
+      console.error('Connection error:', error)
+      setConnected(false)
+
+      // More aggressive reconnection on connection errors
+      setTimeout(() => {
+        console.log('Attempting to reconnect after connection error...')
+        socket.connect()
+      }, 1000)
+    })
   }, [userId])
 }