refactor: debugLog for frontend (#5587)

src/components/common/traffic-error-boundary.tsx

@@ -71,8 +71,7 @@ export class TrafficErrorBoundary extends Component<Props, State> {
       url: window.location.href,
     };
 
-    console.log("[TrafficErrorBoundary] 错误报告:", errorReport);
-
+    console.error("[TrafficErrorBoundary] 错误报告:", errorReport);
     // TODO: 发送到错误监控服务
     // sendErrorReport(errorReport);
   };

src/components/home/current-proxy-card.tsx

@@ -39,6 +39,7 @@ import { useProfiles } from "@/hooks/use-profiles";
 import { useProxySelection } from "@/hooks/use-proxy-selection";
 import { useVerge } from "@/hooks/use-verge";
 import delayManager from "@/services/delay";
+import { debugLog } from "@/utils/debug";
 
 // 本地存储的键名
 const STORAGE_KEY_GROUP = "clash-verge-selected-proxy-group";
@@ -539,7 +540,7 @@ export const CurrentProxyCard = () => {
 
     const proxyRecord = latestProxyRecordRef.current;
     if (!proxyRecord) {
-      console.log(
+      debugLog(
         `[CurrentProxyCard] 自动延迟检测跳过，组: ${groupName}, 节点: ${proxyName} 未找到`,
       );
       return;
@@ -550,7 +551,7 @@ export const CurrentProxyCard = () => {
     const timeout = latestTimeoutRef.current || 10000;
 
     try {
-      console.log(
+      debugLog(
         `[CurrentProxyCard] 自动检测当前节点延迟，组: ${groupName}, 节点: ${proxyName}`,
       );
       if (proxyRecord.provider) {
@@ -647,7 +648,7 @@ export const CurrentProxyCard = () => {
     const groupName = state.selection.group;
     if (!groupName || isDirectMode) return;
 
-    console.log(`[CurrentProxyCard] 开始测试所有延迟，组: ${groupName}`);
+    debugLog(`[CurrentProxyCard] 开始测试所有延迟，组: ${groupName}`);
 
     const timeout = verge?.default_latency_timeout || 10000;
 
@@ -687,13 +688,13 @@ export const CurrentProxyCard = () => {
       }
     }
 
-    console.log(
+    debugLog(
       `[CurrentProxyCard] 找到代理数量: ${proxyNames.length}, 提供者数量: ${providers.size}`,
     );
 
     // 测试提供者的节点
     if (providers.size > 0) {
-      console.log(`[CurrentProxyCard] 开始测试提供者节点`);
+      debugLog(`[CurrentProxyCard] 开始测试提供者节点`);
       await Promise.allSettled(
         [...providers].map((p) => healthcheckProxyProvider(p)),
       );
@@ -702,14 +703,14 @@ export const CurrentProxyCard = () => {
     // 测试非提供者的节点
     if (proxyNames.length > 0) {
       const url = delayManager.getUrl(groupName);
-      console.log(`[CurrentProxyCard] 测试URL: ${url}, 超时: ${timeout}ms`);
+      debugLog(`[CurrentProxyCard] 测试URL: ${url}, 超时: ${timeout}ms`);
 
       try {
         await Promise.race([
           delayManager.checkListDelay(proxyNames, groupName, timeout),
           delayGroup(groupName, url, timeout),
         ]);
-        console.log(`[CurrentProxyCard] 延迟测试完成，组: ${groupName}`);
+        debugLog(`[CurrentProxyCard] 延迟测试完成，组: ${groupName}`);
       } catch (error) {
         console.error(
           `[CurrentProxyCard] 延迟测试出错，组: ${groupName}`,

src/components/home/enhanced-canvas-traffic-graph.tsx

@@ -16,6 +16,7 @@ import {
   useTrafficGraphDataEnhanced,
   type ITrafficDataPoint,
 } from "@/hooks/use-traffic-monitor";
+import { debugLog } from "@/utils/debug";
 import parseTraffic from "@/utils/parse-traffic";
 
 // 流量数据项接口
@@ -1044,7 +1045,7 @@ export const EnhancedCanvasTrafficGraph = memo(
 
     // 兼容性方法
     const appendData = useCallback((data: ITrafficItem) => {
-      console.log(
+      debugLog(
         "[EnhancedCanvasTrafficGraphV2] appendData called (using global data):",
         data,
       );

src/components/profile/profile-item.tsx

@@ -37,6 +37,7 @@ import {
 import { showNotice } from "@/services/noticeService";
 import { useLoadingCache, useSetLoadingCache } from "@/services/states";
 import type { TranslationKey } from "@/types/generated/i18n-keys";
+import { debugLog } from "@/utils/debug";
 import parseTraffic from "@/utils/parse-traffic";
 
 import { ProfileBox } from "./profile-box";
@@ -104,16 +105,16 @@ export const ProfileItem = (props: Props) => {
       itemData.option.update_interval > 0
     ) {
       try {
-        console.log(`尝试获取配置 ${itemData.uid} 的下次更新时间`);
+        debugLog(`尝试获取配置 ${itemData.uid} 的下次更新时间`);
 
         // 如果需要强制刷新，先触发Timer.refresh()
         if (forceRefresh) {
           // 这里可以通过一个新的API来触发刷新，但目前我们依赖patch_profile中的刷新
-          console.log(`强制刷新定时器任务`);
+          debugLog(`强制刷新定时器任务`);
         }
 
         const nextUpdate = await getNextUpdateTime(itemData.uid);
-        console.log(`获取到下次更新时间结果:`, nextUpdate);
+        debugLog(`获取到下次更新时间结果:`, nextUpdate);
 
         if (nextUpdate) {
           const nextUpdateDate = dayjs(nextUpdate * 1000);
@@ -147,7 +148,7 @@ export const ProfileItem = (props: Props) => {
             }
           }
         } else {
-          console.log(`返回的下次更新时间为空`);
+          debugLog(`返回的下次更新时间为空`);
           setNextUpdateTime(
             t("profiles.components.profileItem.status.noSchedule"),
           );
@@ -157,7 +158,7 @@ export const ProfileItem = (props: Props) => {
         setNextUpdateTime(t("profiles.components.profileItem.status.unknown"));
       }
     } else {
-      console.log(`该配置未设置更新间隔或间隔为0`);
+      debugLog(`该配置未设置更新间隔或间隔为0`);
       setNextUpdateTime(
         t("profiles.components.profileItem.status.autoUpdateDisabled"),
       );
@@ -197,7 +198,7 @@ export const ProfileItem = (props: Props) => {
 
       // 只有当更新的是当前配置时才刷新显示
       if (updatedUid === itemData.uid && showNextUpdate) {
-        console.log(`收到定时器更新事件: uid=${updatedUid}`);
+        debugLog(`收到定时器更新事件: uid=${updatedUid}`);
         if (refreshTimeout !== undefined) {
           clearTimeout(refreshTimeout);
         }

src/components/proxy/proxy-chain.tsx

@@ -41,6 +41,7 @@ import {
 
 import { useProxiesData } from "@/hooks/app-data";
 import { calcuProxies, updateProxyChainConfigInRuntime } from "@/services/cmds";
+import { debugLog } from "@/utils/debug";
 
 interface ProxyChainItem {
   id: string;
@@ -319,13 +320,13 @@ export const ProxyChain = ({
     try {
       // 第一步：保存链式代理配置
       const chainProxies = proxyChain.map((node) => node.name);
-      console.log("Saving chain config:", chainProxies);
+      debugLog("Saving chain config:", chainProxies);
       await updateProxyChainConfigInRuntime(chainProxies);
-      console.log("Chain configuration saved successfully");
+      debugLog("Chain configuration saved successfully");
 
       // 第二步：连接到代理链的最后一个节点
       const lastNode = proxyChain[proxyChain.length - 1];
-      console.log(`Connecting to proxy chain, last node: ${lastNode.name}`);
+      debugLog(`Connecting to proxy chain, last node: ${lastNode.name}`);
 
       // 根据模式确定使用的代理组名称
       if (mode !== "global" && !selectedGroup) {
@@ -340,7 +341,7 @@ export const ProxyChain = ({
 
       // 刷新代理信息以更新连接状态
       mutateProxies();
-      console.log("Successfully connected to proxy chain");
+      debugLog("Successfully connected to proxy chain");
     } catch (error) {
       console.error("Failed to connect to proxy chain:", error);
       alert(t("proxies.page.chain.connectFailed") || "连接链式代理失败");

src/components/proxy/proxy-groups.tsx

@@ -20,6 +20,7 @@ import { useProxySelection } from "@/hooks/use-proxy-selection";
 import { useVerge } from "@/hooks/use-verge";
 import { updateProxyChainConfigInRuntime } from "@/services/cmds";
 import delayManager from "@/services/delay";
+import { debugLog } from "@/utils/debug";
 
 import { BaseEmpty } from "../base";
 import { ScrollTopButton } from "../layout/scroll-top-button";
@@ -274,7 +275,7 @@ export const ProxyGroups = (props: Props) => {
 
   // 测全部延迟
   const handleCheckAll = useLockFn(async (groupName: string) => {
-    console.log(`[ProxyGroups] 开始测试所有延迟，组: ${groupName}`);
+    debugLog(`[ProxyGroups] 开始测试所有延迟，组: ${groupName}`);
 
     const proxies = renderList
       .filter(
@@ -283,37 +284,37 @@ export const ProxyGroups = (props: Props) => {
       .flatMap((e) => e.proxyCol || e.proxy!)
       .filter(Boolean);
 
-    console.log(`[ProxyGroups] 找到代理数量: ${proxies.length}`);
+    debugLog(`[ProxyGroups] 找到代理数量: ${proxies.length}`);
 
     const providers = new Set(proxies.map((p) => p!.provider!).filter(Boolean));
 
     if (providers.size) {
-      console.log(`[ProxyGroups] 发现提供者，数量: ${providers.size}`);
+      debugLog(`[ProxyGroups] 发现提供者，数量: ${providers.size}`);
       Promise.allSettled(
         [...providers].map((p) => healthcheckProxyProvider(p)),
       ).then(() => {
-        console.log(`[ProxyGroups] 提供者健康检查完成`);
+        debugLog(`[ProxyGroups] 提供者健康检查完成`);
         onProxies();
       });
     }
 
     const names = proxies.filter((p) => !p!.provider).map((p) => p!.name);
-    console.log(`[ProxyGroups] 过滤后需要测试的代理数量: ${names.length}`);
+    debugLog(`[ProxyGroups] 过滤后需要测试的代理数量: ${names.length}`);
 
     const url = delayManager.getUrl(groupName);
-    console.log(`[ProxyGroups] 测试URL: ${url}, 超时: ${timeout}ms`);
+    debugLog(`[ProxyGroups] 测试URL: ${url}, 超时: ${timeout}ms`);
 
     try {
       await Promise.race([
         delayManager.checkListDelay(names, groupName, timeout),
         delayGroup(groupName, url, timeout).then((result) => {
-          console.log(
+          debugLog(
             `[ProxyGroups] getGroupProxyDelays返回结果数量:`,
             Object.keys(result || {}).length,
           );
         }), // 查询group delays 将清除fixed(不关注调用结果)
       ]);
-      console.log(`[ProxyGroups] 延迟测试完成，组: ${groupName}`);
+      debugLog(`[ProxyGroups] 延迟测试完成，组: ${groupName}`);
     } catch (error) {
       console.error(`[ProxyGroups] 延迟测试出错，组: ${groupName}`, error);
     } finally {

src/components/proxy/proxy-head.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
 
 import { useVerge } from "@/hooks/use-verge";
 import delayManager from "@/services/delay";
+import { debugLog } from "@/utils/debug";
 
 import type { ProxySortType } from "./use-filter-sort";
 import type { HeadState } from "./use-head-state";
@@ -78,10 +79,10 @@ export const ProxyHead = ({
         color="inherit"
         title={t("proxies.page.tooltips.delayCheck")}
         onClick={() => {
-          console.log(`[ProxyHead] 点击延迟测试按钮，组: ${groupName}`);
+          debugLog(`[ProxyHead] 点击延迟测试按钮，组: ${groupName}`);
           // Remind the user that it is custom test url
           if (testUrl?.trim() && textState !== "filter") {
-            console.log(`[ProxyHead] 使用自定义测试URL: ${testUrl}`);
+            debugLog(`[ProxyHead] 使用自定义测试URL: ${testUrl}`);
             onHeadState({ textState: "url" });
           }
           onCheckDelay();

src/components/proxy/use-render-list.ts

@@ -5,6 +5,7 @@ import { useProxiesData } from "@/hooks/app-data";
 import { useVerge } from "@/hooks/use-verge";
 import { getRuntimeConfig } from "@/services/cmds";
 import delayManager from "@/services/delay";
+import { debugLog } from "@/utils/debug";
 
 import { filterSort } from "./use-filter-sort";
 import {
@@ -130,7 +131,7 @@ export const useRenderList = (
 
     // 设置组监听器，当有延迟更新时自动刷新
     const groupListener = () => {
-      console.log("[ChainMode] 延迟更新，刷新UI");
+      debugLog("[ChainMode] 延迟更新，刷新UI");
       refreshProxy();
     };
 
@@ -141,7 +142,7 @@ export const useRenderList = (
         const timeout = verge?.default_latency_timeout || 10000;
         const proxyNames = allProxies.map((proxy) => proxy.name);
 
-        console.log(`[ChainMode] 开始计算 ${proxyNames.length} 个节点的延迟`);
+        debugLog(`[ChainMode] 开始计算 ${proxyNames.length} 个节点的延迟`);
 
         // 使用 delayManager 计算延迟，每个节点计算完成后会自动触发监听器刷新界面
         delayManager.checkListDelay(proxyNames, "chain-mode", timeout);

src/components/setting/mods/dns-viewer.tsx

@@ -31,6 +31,7 @@ import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
 import { showNotice } from "@/services/noticeService";
 import { useThemeMode } from "@/services/states";
+import { debugLog } from "@/utils/debug";
 import getSystem from "@/utils/get-system";
 
 const Item = styled(ListItem)(() => ({
@@ -580,7 +581,7 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
         }, 300);
       }
     } catch (err) {
-      console.log("YAML解析错误，忽略自动更新", err);
+      debugLog("YAML解析错误，忽略自动更新", err);
     }
   };
 

src/components/setting/mods/sysproxy-viewer.tsx

@@ -40,6 +40,7 @@ import {
   patchVergeConfig,
 } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
+import { debugLog } from "@/utils/debug";
 import getSystem from "@/utils/get-system";
 
 const sleep = (ms: number) =>
@@ -238,7 +239,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
       let hostname = "";
       try {
         hostname = await getSystemHostname();
-        console.log("获取到主机名:", hostname);
+        debugLog("获取到主机名:", hostname);
       } catch (err) {
         console.error("获取主机名失败:", err);
       }
@@ -252,12 +253,12 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
         if (hostname !== "localhost" && hostname !== "127.0.0.1") {
           hostname = hostname + ".local";
           options.push(hostname);
-          console.log("主机名已添加到选项中:", hostname);
+          debugLog("主机名已添加到选项中:", hostname);
         } else {
-          console.log("主机名与已有选项重复:", hostname);
+          debugLog("主机名与已有选项重复:", hostname);
         }
       } else {
-        console.log("主机名为空");
+        debugLog("主机名为空");
       }
 
       // 添加IP地址
@@ -265,7 +266,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
 
       // 去重
       const uniqueOptions = Array.from(new Set(options));
-      console.log("最终选项列表:", uniqueOptions);
+      debugLog("最终选项列表:", uniqueOptions);
       setHostOptions(uniqueOptions);
     } catch (error) {
       console.error("获取网络接口失败:", error);

src/components/setting/mods/update-viewer.tsx

@@ -15,6 +15,7 @@ import { portableFlag } from "@/pages/_layout";
 import { showNotice } from "@/services/noticeService";
 import { useSetUpdateState, useUpdateState } from "@/services/states";
 import { checkUpdateSafe as checkUpdate } from "@/services/update";
+import { debugLog } from "@/utils/debug";
 
 export function UpdateViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation();
@@ -102,7 +103,7 @@ export function UpdateViewer({ ref }: { ref?: Ref<DialogRef> }) {
   useEffect(() => {
     return () => {
       if (currentProgressListener) {
-        console.log("UpdateViewer unmounting, cleaning up progress listener.");
+        debugLog("UpdateViewer unmounting, cleaning up progress listener.");
         currentProgressListener();
       }
     };

src/components/test/test-item.tsx

@@ -13,6 +13,7 @@ import { useListen } from "@/hooks/use-listen";
 import { cmdTestDelay, downloadIconCache } from "@/services/cmds";
 import delayManager from "@/services/delay";
 import { showNotice } from "@/services/noticeService";
+import { debugLog } from "@/utils/debug";
 
 import { TestBox } from "./test-box";
 
@@ -107,7 +108,7 @@ export const TestItem = ({
 
     return () => {
       if (unlistenFn) {
-        console.log(
+        debugLog(
           `TestItem for ${id} unmounting or url changed, cleaning up test-all listener.`,
         );
         unlistenFn();