improve sockets with reconnecting

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx

@@ -1,10 +1,11 @@
 'use client'
 
 import type React from 'react'
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
+import { useSocket } from '@/app/workspace/providers/socket-provider'
 import {
   useWorkspacePermissionsQuery,
   type WorkspacePermissions,
@@ -57,14 +58,35 @@ export function WorkspacePermissionsProvider({ children }: WorkspacePermissionsP
   const [hasShownOfflineNotification, setHasShownOfflineNotification] = useState(false)
   const hasOperationError = useOperationQueueStore((state) => state.hasOperationError)
   const addNotification = useNotificationStore((state) => state.addNotification)
+  const removeNotification = useNotificationStore((state) => state.removeNotification)
+  const { isReconnecting } = useSocket()
+  const reconnectingNotificationIdRef = useRef<string | null>(null)
 
   const isOfflineMode = hasOperationError
 
+  useEffect(() => {
+    if (isReconnecting && !reconnectingNotificationIdRef.current && !isOfflineMode) {
+      const id = addNotification({
+        level: 'error',
+        message: 'Reconnecting...',
+      })
+      reconnectingNotificationIdRef.current = id
+    } else if (!isReconnecting && reconnectingNotificationIdRef.current) {
+      removeNotification(reconnectingNotificationIdRef.current)
+      reconnectingNotificationIdRef.current = null
+    }
+  }, [isReconnecting, isOfflineMode, addNotification, removeNotification])
+
   useEffect(() => {
     if (!isOfflineMode || hasShownOfflineNotification) {
       return
     }
 
+    if (reconnectingNotificationIdRef.current) {
+      removeNotification(reconnectingNotificationIdRef.current)
+      reconnectingNotificationIdRef.current = null
+    }
+
     try {
       addNotification({
         level: 'error',
@@ -78,7 +100,7 @@ export function WorkspacePermissionsProvider({ children }: WorkspacePermissionsP
     } catch (error) {
       logger.error('Failed to add offline notification', { error })
     }
-  }, [addNotification, hasShownOfflineNotification, isOfflineMode])
+  }, [addNotification, removeNotification, hasShownOfflineNotification, isOfflineMode])
 
   const {
     data: workspacePermissions,

apps/sim/app/workspace/providers/socket-provider.tsx

@@ -49,6 +49,7 @@ interface SocketContextType {
   socket: Socket | null
   isConnected: boolean
   isConnecting: boolean
+  isReconnecting: boolean
   authFailed: boolean
   currentWorkflowId: string | null
   currentSocketId: string | null
@@ -88,6 +89,7 @@ const SocketContext = createContext<SocketContextType>({
   socket: null,
   isConnected: false,
   isConnecting: false,
+  isReconnecting: false,
   authFailed: false,
   currentWorkflowId: null,
   currentSocketId: null,
@@ -122,6 +124,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
   const [socket, setSocket] = useState<Socket | null>(null)
   const [isConnected, setIsConnected] = useState(false)
   const [isConnecting, setIsConnecting] = useState(false)
+  const [isReconnecting, setIsReconnecting] = useState(false)
   const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(null)
   const [currentSocketId, setCurrentSocketId] = useState<string | null>(null)
   const [presenceUsers, setPresenceUsers] = useState<PresenceUser[]>([])
@@ -236,20 +239,19 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
           setCurrentWorkflowId(null)
           setPresenceUsers([])
 
-          logger.info('Socket disconnected', {
-            reason,
-          })
+          // socket.active indicates if auto-reconnect will happen
+          if (socketInstance.active) {
+            setIsReconnecting(true)
+            logger.info('Socket disconnected, will auto-reconnect', { reason })
+          } else {
+            setIsReconnecting(false)
+            logger.info('Socket disconnected, no auto-reconnect', { reason })
+          }
         })
 
-        socketInstance.on('connect_error', (error: any) => {
+        socketInstance.on('connect_error', (error: Error) => {
           setIsConnecting(false)
-          logger.error('Socket connection error:', {
-            message: error.message,
-            stack: error.stack,
-            description: error.description,
-            type: error.type,
-            transport: error.transport,
-          })
+          logger.error('Socket connection error:', { message: error.message })
 
           // Check if this is an authentication failure
           const isAuthError =
@@ -261,43 +263,41 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
             logger.warn(
               'Authentication failed - stopping reconnection attempts. User may need to refresh/re-login.'
             )
-            // Stop reconnection attempts to prevent infinite loop
             socketInstance.disconnect()
-            // Reset state to allow re-initialization when session is restored
             setSocket(null)
             setAuthFailed(true)
+            setIsReconnecting(false)
             initializedRef.current = false
+          } else if (socketInstance.active) {
+            // Temporary failure, will auto-reconnect
+            setIsReconnecting(true)
           }
         })
 
-        socketInstance.on('reconnect', (attemptNumber) => {
+        // Reconnection events are on the Manager (socket.io), not the socket itself
+        socketInstance.io.on('reconnect', (attemptNumber) => {
           setIsConnected(true)
+          setIsReconnecting(false)
           setCurrentSocketId(socketInstance.id ?? null)
           logger.info('Socket reconnected successfully', {
             attemptNumber,
             socketId: socketInstance.id,
             transport: socketInstance.io.engine?.transport?.name,
           })
-          // Note: join-workflow is handled by the useEffect watching isConnected
         })
 
-        socketInstance.on('reconnect_attempt', (attemptNumber) => {
-          logger.info('Socket reconnection attempt (fresh token will be generated)', {
-            attemptNumber,
-            timestamp: new Date().toISOString(),
-          })
+        socketInstance.io.on('reconnect_attempt', (attemptNumber) => {
+          setIsReconnecting(true)
+          logger.info('Socket reconnection attempt', { attemptNumber })
         })
 
-        socketInstance.on('reconnect_error', (error: any) => {
-          logger.error('Socket reconnection error:', {
-            message: error.message,
-            attemptNumber: error.attemptNumber,
-            type: error.type,
-          })
+        socketInstance.io.on('reconnect_error', (error: Error) => {
+          logger.error('Socket reconnection error:', { message: error.message })
         })
 
-        socketInstance.on('reconnect_failed', () => {
+        socketInstance.io.on('reconnect_failed', () => {
           logger.error('Socket reconnection failed - all attempts exhausted')
+          setIsReconnecting(false)
           setIsConnecting(false)
         })
 
@@ -629,6 +629,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
 
         if (commit) {
           socket.emit('workflow-operation', {
+            workflowId: currentWorkflowId,
             operation,
             target,
             payload,
@@ -645,6 +646,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
         }
 
         pendingPositionUpdates.current.set(blockId, {
+          workflowId: currentWorkflowId,
           operation,
           target,
           payload,
@@ -666,6 +668,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
         }
       } else {
         socket.emit('workflow-operation', {
+          workflowId: currentWorkflowId,
           operation,
           target,
           payload,
@@ -678,47 +681,53 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
   )
 
   const emitSubblockUpdate = useCallback(
-    (blockId: string, subblockId: string, value: any, operationId?: string) => {
-      if (socket && currentWorkflowId) {
-        socket.emit('subblock-update', {
-          blockId,
-          subblockId,
-          value,
-          timestamp: Date.now(),
-          operationId,
-        })
-      } else {
-        logger.warn('Cannot emit subblock update: no socket connection or workflow room', {
-          hasSocket: !!socket,
-          currentWorkflowId,
-          blockId,
-          subblockId,
-        })
+    (
+      blockId: string,
+      subblockId: string,
+      value: any,
+      operationId?: string,
+      workflowId?: string
+    ) => {
+      if (!workflowId) {
+        logger.error('emitSubblockUpdate called without workflowId', { blockId, subblockId })
+        return
+      }
+      if (!socket) {
+        logger.warn('Cannot emit subblock update: no socket connection', { workflowId, blockId })
+        return
       }
+      socket.emit('subblock-update', {
+        workflowId,
+        blockId,
+        subblockId,
+        value,
+        timestamp: Date.now(),
+        operationId,
+      })
     },
-    [socket, currentWorkflowId]
+    [socket]
   )
 
   const emitVariableUpdate = useCallback(
-    (variableId: string, field: string, value: any, operationId?: string) => {
-      if (socket && currentWorkflowId) {
-        socket.emit('variable-update', {
-          variableId,
-          field,
-          value,
-          timestamp: Date.now(),
-          operationId,
-        })
-      } else {
-        logger.warn('Cannot emit variable update: no socket connection or workflow room', {
-          hasSocket: !!socket,
-          currentWorkflowId,
-          variableId,
-          field,
-        })
+    (variableId: string, field: string, value: any, operationId?: string, workflowId?: string) => {
+      if (!workflowId) {
+        logger.error('emitVariableUpdate called without workflowId', { variableId, field })
+        return
+      }
+      if (!socket) {
+        logger.warn('Cannot emit variable update: no socket connection', { workflowId, variableId })
+        return
       }
+      socket.emit('variable-update', {
+        workflowId,
+        variableId,
+        field,
+        value,
+        timestamp: Date.now(),
+        operationId,
+      })
     },
-    [socket, currentWorkflowId]
+    [socket]
   )
 
   const lastCursorEmit = useRef(0)
@@ -794,6 +803,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
       socket,
       isConnected,
       isConnecting,
+      isReconnecting,
       authFailed,
       currentWorkflowId,
       currentSocketId,
@@ -820,6 +830,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
       socket,
       isConnected,
       isConnecting,
+      isReconnecting,
       authFailed,
       currentWorkflowId,
       currentSocketId,