fix(socket-errors): fixed

src/app/_components/BlockList/Sockets/use-stacks-api-socket-client.ts

@@ -4,53 +4,63 @@ import { StacksApiSocketClient } from '@stacks/blockchain-api-client';
 
 export interface StacksApiSocketClientInfo {
   client: StacksApiSocketClient | null;
-  connect: (handleOnConnect?: (client: StacksApiSocketClient) => void) => void;
+  connect: (
+    handleOnConnect?: (client: StacksApiSocketClient) => void,
+    handleError?: (client: StacksApiSocketClient | null) => void
+  ) => void;
   disconnect: () => void;
 }
 
 export function useStacksApiSocketClient(apiUrl: string): StacksApiSocketClientInfo {
   const [socketClient, setSocketClient] = useState<StacksApiSocketClient | null>(null);
-  const socketUrlTracker = useRef<string | null>(null);
   const isSocketClientConnecting = useRef(false);
 
+  const disconnect = useCallback(() => {
+    if (socketClient?.socket.connected) {
+      socketClient?.socket.removeAllListeners();
+      socketClient?.socket.close();
+      setSocketClient(null);
+    }
+  }, [socketClient]);
+
   const connect = useCallback(
-    async (handleOnConnect?: (client: StacksApiSocketClient) => void) => {
+    async (
+      handleOnConnect?: (client: StacksApiSocketClient) => void,
+      handleError?: (client: StacksApiSocketClient | null) => void
+    ) => {
       if (!apiUrl) return;
       if (socketClient?.socket.connected || isSocketClientConnecting.current) {
         return;
       }
       try {
         isSocketClientConnecting.current = true;
-        const socketUrl = apiUrl;
-        socketUrlTracker.current = socketUrl;
-        const client = await StacksApiSocketClient.connect({ url: socketUrl });
+        const client = await StacksApiSocketClient.connect({ url: apiUrl });
         client.socket.on('connect', () => {
           setSocketClient(client);
           handleOnConnect?.(client);
           isSocketClientConnecting.current = false;
         });
         client.socket.on('disconnect', () => {
-          setSocketClient(null);
+          client.socket.removeAllListeners();
+          client.socket.close();
+          disconnect();
           isSocketClientConnecting.current = false;
         });
         client.socket.on('connect_error', error => {
-          setSocketClient(null);
+          client.socket.removeAllListeners();
+          client.socket.close();
+          disconnect();
           isSocketClientConnecting.current = false;
+          handleError?.(client);
         });
       } catch (error) {
-        setSocketClient(null);
+        disconnect();
         isSocketClientConnecting.current = false;
       }
     },
-    [apiUrl, socketClient]
+    [apiUrl, socketClient, disconnect]
   );
 
-  const disconnect = useCallback(() => {
-    if (socketClient?.socket.connected) {
-      socketClient?.socket.close();
-    }
-  }, [socketClient]);
-
   return {
     client: socketClient,
     connect,

src/app/_components/BlockList/Sockets/useSubscribeBlocks.ts

@@ -11,11 +11,12 @@ interface Subscription {
 
 export function useSubscribeBlocks(
   liveUpdates: boolean,
-  handleBlock: (block: NakamotoBlock | Block) => void
+  handleBlock: (block: NakamotoBlock | Block) => void,
+  handleError?: (client: StacksApiSocketClient | null) => void
 ) {
   const subscription = useRef<Subscription | undefined>(undefined);
   const { stacksApiSocketClientInfo } = useGlobalContext();
-  const { client, connect, disconnect } = stacksApiSocketClientInfo || {};
+  const { connect, disconnect } = stacksApiSocketClientInfo || {};
 
   useEffect(() => {
     const subscribe = async (client: StacksApiSocketClient) => {
@@ -28,15 +29,15 @@ export function useSubscribeBlocks(
       });
     };
 
-    if (liveUpdates && !client?.socket.connected) {
-      connect?.(client => subscribe(client));
+    if (liveUpdates) {
+      connect?.(client => subscribe(client), handleError);
     }
-    if (!liveUpdates && client?.socket.connected) {
+    if (!liveUpdates) {
       disconnect?.();
     }
     return () => {
       disconnect?.();
     };
-  }, [client, handleBlock, connect, liveUpdates, disconnect]);
+  }, [handleBlock, connect, liveUpdates, disconnect, handleError]);
   return subscription;
 }