diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx
index 7d8787dc068d1ad5ed52af809d9ef4122ccfc755..e579bc1a8e99713db9b47434d149ef94bddd7ca0 100644
--- a/src/components/layout/layout-traffic.tsx
+++ b/src/components/layout/layout-traffic.tsx
@@ -21,6 +21,8 @@ const LayoutTraffic = () => {
   // setup log ws during layout
   useLogSetup();
 
+  const [refresh, setRefresh] = useState({});
+
   useEffect(() => {
     if (!clashInfo) return;
 
@@ -33,8 +35,12 @@ const LayoutTraffic = () => {
       setTraffic(data);
     });
 
+    ws.addEventListener("error", () => {
+      setTimeout(() => setRefresh({}), 1000);
+    });
+
     return () => ws?.close();
-  }, [clashInfo]);
+  }, [clashInfo, refresh]);
 
   const [up, upUnit] = parseTraffic(traffic.up);
   const [down, downUnit] = parseTraffic(traffic.down);
diff --git a/src/components/layout/use-log-setup.ts b/src/components/layout/use-log-setup.ts
index d7f06a1b8b6659a4584e8a34a4a9f02a2cbeae77..ebe0d38d162fe7305e35b77e63ac6bc3dfddb520 100644
--- a/src/components/layout/use-log-setup.ts
+++ b/src/components/layout/use-log-setup.ts
@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { getClashLogs } from "@/services/cmds";
 import { useClashInfo } from "@/hooks/use-clash";
@@ -14,6 +14,8 @@ export const useLogSetup = () => {
   const enableLog = useRecoilValue(atomEnableLog);
   const setLogData = useSetRecoilState(atomLogData);
 
+  const [refresh, setRefresh] = useState({});
+
   useEffect(() => {
     if (!enableLog || !clashInfo) return;
 
@@ -31,6 +33,10 @@ export const useLogSetup = () => {
       });
     });
 
+    ws.addEventListener("error", () => {
+      setTimeout(() => setRefresh({}), 1000);
+    });
+
     return () => ws?.close();
-  }, [clashInfo, enableLog]);
+  }, [clashInfo, enableLog, refresh]);
 };