From e2ad2d23f8257f2b1510df8d60b0b5f1b8f7697a Mon Sep 17 00:00:00 2001 From: wonfen Date: Sun, 4 May 2025 20:47:50 +0800 Subject: [PATCH] feat: enhance WebSocket management with connection status logging, error handling, and improved data parsing --- .../home/enhanced-traffic-stats.tsx | 52 ++++++++++--- src/providers/app-data-provider.tsx | 77 ++++++++++++++++--- 2 files changed, 111 insertions(+), 18 deletions(-) diff --git a/src/components/home/enhanced-traffic-stats.tsx b/src/components/home/enhanced-traffic-stats.tsx index 946233fb..16cbf4e1 100644 --- a/src/components/home/enhanced-traffic-stats.tsx +++ b/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 | null, - memory: null as ReturnType | null, + const socketRefs = useRef<{ + traffic: ReturnType | null; + memory: ReturnType | 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: , 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 ( diff --git a/src/providers/app-data-provider.tsx b/src/providers/app-data-provider.tsx index 9069d766..1b88671f 100644 --- a/src/providers/app-data-provider.tsx +++ b/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(); + }; } );