feat: enhance WebSocket management with connection status logging, error handling, and improved data parsing

src/components/home/enhanced-traffic-stats.tsx

@@ -174,9 +174,12 @@ export const EnhancedTrafficStats = () => {
   const trafficGraph = verge?.traffic_graph ?? true;
 
   // WebSocket引用
-  const socketRefs = useRef({
-    traffic: null as ReturnType<typeof createAuthSockette> | null,
-    memory: null as ReturnType<typeof createAuthSockette> | null,
+  const socketRefs = useRef<{
+    traffic: ReturnType<typeof createAuthSockette> | null;
+    memory: ReturnType<typeof createAuthSockette> | null;
+  }>({
+    traffic: null,
+    memory: null,
   });
 
   // 检查是否支持调试
@@ -230,7 +233,7 @@ export const EnhancedTrafficStats = () => {
         }
       }
     } catch (err) {
-      console.error("[Traffic] 解析数据错误:", err);
+      console.error("[Traffic] 解析数据错误:", err, event.data);
     }
   }, []);
 
@@ -248,7 +251,7 @@ export const EnhancedTrafficStats = () => {
         }));
       }
     } catch (err) {
-      console.error("[Memory] 解析数据错误:", err);
+      console.error("[Memory] 解析数据错误:", err, event.data);
     }
   }, []);
 
@@ -273,12 +276,42 @@ export const EnhancedTrafficStats = () => {
     cleanupSockets();
 
     // 创建新连接
+    console.log(`[Traffic][${EnhancedTrafficStats.name}] 正在连接: ${server}/traffic`);
     socketRefs.current.traffic = createAuthSockette(`${server}/traffic`, secret, {
       onmessage: handleTrafficUpdate,
+      onopen: (event) => {
+        console.log(`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接已建立`, event);
+      },
+      onerror: (event) => {
+        console.error(`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接错误或达到最大重试次数`, event);
+        setStats(prev => ({ ...prev, traffic: { up: 0, down: 0 } }));
+      },
+      onclose: (event) => {
+        console.log(`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接关闭`, event.code, event.reason);
+        if (event.code !== 1000 && event.code !== 1001) {
+          console.warn(`[Traffic][${EnhancedTrafficStats.name}] 连接非正常关闭，重置状态`);
+          setStats(prev => ({ ...prev, traffic: { up: 0, down: 0 } }));
+        }
+      },
     });
     
+    console.log(`[Memory][${EnhancedTrafficStats.name}] 正在连接: ${server}/memory`);
     socketRefs.current.memory = createAuthSockette(`${server}/memory`, secret, {
       onmessage: handleMemoryUpdate,
+      onopen: (event) => {
+        console.log(`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接已建立`, event);
+      },
+      onerror: (event) => {
+        console.error(`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接错误或达到最大重试次数`, event);
+        setStats(prev => ({ ...prev, memory: { inuse: 0, oslimit: undefined } }));
+      },
+      onclose: (event) => {
+        console.log(`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接关闭`, event.code, event.reason);
+        if (event.code !== 1000 && event.code !== 1001) {
+          console.warn(`[Memory][${EnhancedTrafficStats.name}] 连接非正常关闭，重置状态`);
+          setStats(prev => ({ ...prev, memory: { inuse: 0, oslimit: undefined } }));
+        }
+      },
     });
 
     return cleanupSockets;
@@ -306,9 +339,10 @@ export const EnhancedTrafficStats = () => {
     
     return {
       up, upUnit, down, downUnit, inuse, inuseUnit,
-      uploadTotal, uploadTotalUnit, downloadTotal, downloadTotalUnit
+      uploadTotal, uploadTotalUnit, downloadTotal, downloadTotalUnit,
+      connectionsCount: connections.count
     };
-  }, [stats, connections.uploadTotal, connections.downloadTotal]);
+  }, [stats, connections]);
 
   // 渲染流量图表 - 使用useMemo缓存渲染结果
   const trafficGraphComponent = useMemo(() => {
@@ -371,7 +405,7 @@ export const EnhancedTrafficStats = () => {
     {
       icon: <LinkRounded fontSize="small" />,
       title: t("Active Connections"),
-      value: connections.count,
+      value: parsedData.connectionsCount,
       unit: "",
       color: "success" as const,
     },
@@ -397,7 +431,7 @@ export const EnhancedTrafficStats = () => {
       color: "error" as const,
       onClick: isDebug ? handleGarbageCollection : undefined,
     },
-  ], [t, parsedData, connections.count, isDebug, handleGarbageCollection]);
+  ], [t, parsedData, isDebug, handleGarbageCollection]);
 
   return (
     <Grid container spacing={1} columns={{ xs: 8, sm: 8, md: 12 }}>

src/providers/app-data-provider.tsx

@@ -138,6 +138,7 @@ export const AppDataProvider = ({ children }: { children: React.ReactNode }) =>
         const { server = "", secret = "" } = clashInfo;
         if (!server) return () => {};
         
+        console.log(`[Connections][${AppDataProvider.name}] 正在连接: ${server}/connections`);
         const socket = createAuthSockette(`${server}/connections`, secret, {
           timeout: 5000,
           onmessage(event) {
@@ -167,15 +168,29 @@ export const AppDataProvider = ({ children }: { children: React.ReactNode }) =>
                 };
               });
             } catch (err) {
-              console.error("[Connections] 解析数据错误:", err);
+              console.error(`[Connections][${AppDataProvider.name}] 解析数据错误:`, err, event.data);
             }
           },
-          onerror() {
+          onopen: (event) => {
+             console.log(`[Connections][${AppDataProvider.name}] WebSocket 连接已建立`, event);
+          },
+          onerror(event) {
+            console.error(`[Connections][${AppDataProvider.name}] WebSocket 连接错误或达到最大重试次数`, event);
             next(null, { connections: [], uploadTotal: 0, downloadTotal: 0 });
+          },
+          onclose: (event) => {
+             console.log(`[Connections][${AppDataProvider.name}] WebSocket 连接关闭`, event.code, event.reason);
+             if (event.code !== 1000 && event.code !== 1001) {
+               console.warn(`[Connections][${AppDataProvider.name}] 连接非正常关闭，重置数据`);
+               next(null, { connections: [], uploadTotal: 0, downloadTotal: 0 });
+             }
           }
         });
         
-        return () => socket.close();
+        return () => {
+          console.log(`[Connections][${AppDataProvider.name}] 清理WebSocket连接`);
+          socket.close();
+        };
       }
     );
   
@@ -188,18 +203,40 @@ export const AppDataProvider = ({ children }: { children: React.ReactNode }) =>
       const { server = "", secret = "" } = clashInfo;
       if (!server) return () => {};
       
+      console.log(`[Traffic][${AppDataProvider.name}] 正在连接: ${server}/traffic`);
       const socket = createAuthSockette(`${server}/traffic`, secret, {
         onmessage(event) {
           try {
             const data = JSON.parse(event.data);
-            next(null, data);
+            if (data && typeof data.up === 'number' && typeof data.down === 'number') {
+              next(null, data);
+            } else {
+               console.warn(`[Traffic][${AppDataProvider.name}] 收到无效数据:`, data);
+            }
           } catch (err) {
-            console.error("[Traffic] 解析数据错误:", err);
+            console.error(`[Traffic][${AppDataProvider.name}] 解析数据错误:`, err, event.data);
           }
+        },
+        onopen: (event) => {
+           console.log(`[Traffic][${AppDataProvider.name}] WebSocket 连接已建立`, event);
+        },
+        onerror(event) {
+          console.error(`[Traffic][${AppDataProvider.name}] WebSocket 连接错误或达到最大重试次数`, event);
+          next(null, { up: 0, down: 0 });
+        },
+        onclose: (event) => {
+           console.log(`[Traffic][${AppDataProvider.name}] WebSocket 连接关闭`, event.code, event.reason);
+           if (event.code !== 1000 && event.code !== 1001) {
+             console.warn(`[Traffic][${AppDataProvider.name}] 连接非正常关闭，重置数据`);
+             next(null, { up: 0, down: 0 });
+           }
         }
       });
       
-      return () => socket.close();
+      return () => {
+        console.log(`[Traffic][${AppDataProvider.name}] 清理WebSocket连接`);
+        socket.close();
+      };
     }
   );
   
@@ -211,18 +248,40 @@ export const AppDataProvider = ({ children }: { children: React.ReactNode }) =>
       const { server = "", secret = "" } = clashInfo;
       if (!server) return () => {};
       
+      console.log(`[Memory][${AppDataProvider.name}] 正在连接: ${server}/memory`);
       const socket = createAuthSockette(`${server}/memory`, secret, {
         onmessage(event) {
           try {
             const data = JSON.parse(event.data);
-            next(null, data);
+            if (data && typeof data.inuse === 'number') {
+              next(null, data);
+            } else {
+               console.warn(`[Memory][${AppDataProvider.name}] 收到无效数据:`, data);
+            }
           } catch (err) {
-            console.error("[Memory] 解析数据错误:", err);
+            console.error(`[Memory][${AppDataProvider.name}] 解析数据错误:`, err, event.data);
+          }
+        },
+        onopen: (event) => {
+           console.log(`[Memory][${AppDataProvider.name}] WebSocket 连接已建立`, event);
+        },
+        onerror(event) {
+          console.error(`[Memory][${AppDataProvider.name}] WebSocket 连接错误或达到最大重试次数`, event);
+          next(null, { inuse: 0 });
+        },
+        onclose: (event) => {
+          console.log(`[Memory][${AppDataProvider.name}] WebSocket 连接关闭`, event.code, event.reason);
+          if (event.code !== 1000 && event.code !== 1001) {
+            console.warn(`[Memory][${AppDataProvider.name}] 连接非正常关闭，重置数据`);
+            next(null, { inuse: 0 });
           }
         }
       });
       
-      return () => socket.close();
+      return () => {
+        console.log(`[Memory][${AppDataProvider.name}] 清理WebSocket连接`);
+        socket.close();
+      };
     }
   );