refactor: replace console.log with tslog

ui/eslint.config.cjs

@@ -62,6 +62,7 @@ module.exports = defineConfig([{
             allowConstantExport: true,
         }],
 
+        "no-console": ["warn", {}],
         "import/order": ["error", {
             groups: ["builtin", "external", "internal", "parent", "sibling"],
             "newlines-between": "always",

ui/package.json

@@ -47,6 +47,7 @@
     "react-xtermjs": "^1.0.10",
     "recharts": "^2.15.3",
     "tailwind-merge": "^3.3.0",
+    "tslog": "^4.9.3",
     "usehooks-ts": "^3.1.1",
     "validator": "^13.15.0",
     "zustand": "^4.5.2"

ui/src/components/ActionBar.tsx

@@ -19,7 +19,7 @@ import WakeOnLanModal from "@/components/popovers/WakeOnLan/Index";
 import MountPopopover from "@/components/popovers/MountPopover";
 import ExtensionPopover from "@/components/popovers/ExtensionPopover";
 import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
-
+import { logger } from "@/log";
 export default function Actionbar({
   requestFullscreen,
 }: {
@@ -48,7 +48,7 @@ export default function Actionbar({
         if (!open) {
           setTimeout(() => {
             setDisableFocusTrap(false);
-            console.log("Popover is closing. Returning focus trap to video");
+            logger.info("Popover is closing. Returning focus trap to video");
           }, 0);
         }
       }

ui/src/components/FeatureFlag.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 
-import { useFeatureFlag } from "../hooks/useFeatureFlag";
+import { logger } from "@/log";
 
+import { useFeatureFlag } from "../hooks/useFeatureFlag";
 export function FeatureFlag({
   minAppVersion,
   name = "unnamed",
@@ -17,7 +18,7 @@ export function FeatureFlag({
 
   useEffect(() => {
     if (!appVersion) return;
-    console.log(
+    logger.info(
       `Feature '${name}' ${isEnabled ? "ENABLED" : "DISABLED"}: ` +
         `Current version: ${appVersion}, ` +
         `Required min version: ${minAppVersion || "N/A"}`,

ui/src/components/InfoBar.tsx

@@ -9,6 +9,7 @@ import {
   useVideoStore,
 } from "@/hooks/stores";
 import { keys, modifiers } from "@/keyboardMappings";
+import { logger } from "@/log";
 
 export default function InfoBar() {
   const activeKeys = useHidStore(state => state.activeKeys);
@@ -31,9 +32,9 @@ export default function InfoBar() {
 
   useEffect(() => {
     if (!rpcDataChannel) return;
-    rpcDataChannel.onclose = () => console.log("rpcDataChannel has closed");
+    rpcDataChannel.onclose = () => logger.info("rpcDataChannel has closed");
     rpcDataChannel.onerror = e =>
-      console.log(`Error on DataChannel '${rpcDataChannel.label}': ${e}`);
+      logger.error(`Error on DataChannel '${rpcDataChannel.label}': ${e}`);
   }, [rpcDataChannel]);
 
   const keyboardLedState = useHidStore(state => state.keyboardLedState);

ui/src/components/USBStateStatus.tsx

@@ -5,6 +5,7 @@ import KeyboardAndMouseConnectedIcon from "@/assets/keyboard-and-mouse-connected
 import LoadingSpinner from "@components/LoadingSpinner";
 import StatusCard from "@components/StatusCards";
 import { HidState } from "@/hooks/stores";
+import { logger } from "@/log";
 
 type USBStates = HidState["usbState"];
 
@@ -67,7 +68,7 @@ export default function USBStateStatus({
   };
   const props = StatusCardProps[state];
   if (!props) {
-    console.log("Unsupported USB state: ", state);
+    logger.error("Unsupported USB state: ", { state });
     return;
   }
 

ui/src/components/UsbDeviceSetting.tsx

@@ -1,5 +1,7 @@
 import { useCallback , useEffect, useState } from "react";
 
+import { logger } from "@/log";
+
 import { useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
 import { SettingsItem } from "../routes/devices.$id.settings";
@@ -9,6 +11,7 @@ import { Button } from "./Button";
 import { SelectMenuBasic } from "./SelectMenuBasic";
 import { SettingsSectionHeader } from "./SettingsSectionHeader";
 import Fieldset from "./Fieldset";
+
 export interface USBConfig {
   vendor_id: string;
   product_id: string;
@@ -69,7 +72,7 @@ export function UsbDeviceSetting() {
   const syncUsbDeviceConfig = useCallback(() => {
     send("getUsbDevices", {}, resp => {
       if ("error" in resp) {
-        console.error("Failed to load USB devices:", resp.error);
+        logger.error("Failed to load USB devices:", resp.error);
         notifications.error(
           `Failed to load USB devices: ${resp.error.data || "Unknown error"}`,
         );

ui/src/components/UsbInfoSetting.tsx

@@ -1,7 +1,7 @@
 import { useMemo , useCallback , useEffect, useState } from "react";
 
 import { Button } from "@components/Button";
-
+import { jsonRpcLogger, logger } from "@/log";
 
 import { UsbConfigState } from "../hooks/stores";
 import { useJsonRpc } from "../hooks/useJsonRpc";
@@ -96,12 +96,12 @@ export function UsbInfoSetting() {
   const syncUsbConfigProduct = useCallback(() => {
     send("getUsbConfig", {}, resp => {
       if ("error" in resp) {
-        console.error("Failed to load USB Config:", resp.error);
+        jsonRpcLogger.error("Failed to load USB Config:", resp.error);
         notifications.error(
           `Failed to load USB Config: ${resp.error.data || "Unknown error"}`,
         );
       } else {
-        console.log("syncUsbConfigProduct#getUsbConfig result:", resp.result);
+        jsonRpcLogger.info("syncUsbConfigProduct#getUsbConfig result:", resp.result);
         const usbConfigState = resp.result as UsbConfigState;
         const product = usbConfigs.map(u => u.value).includes(usbConfigState.product)
           ? usbConfigState.product
@@ -210,7 +210,7 @@ function USBConfigDialog({
   const syncUsbConfig = useCallback(() => {
     send("getUsbConfig", {}, resp => {
       if ("error" in resp) {
-        console.error("Failed to load USB Config:", resp.error);
+        logger.error("Failed to load USB Config:", resp.error);
       } else {
         setUsbConfigState(resp.result as UsbConfigState);
       }

ui/src/components/WebRTCVideo.tsx

@@ -18,6 +18,7 @@ import InfoBar from "@components/InfoBar";
 import useKeyboard from "@/hooks/useKeyboard";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "@/notifications";
+import { logger } from "@/log";
 
 import {
   HDMIErrorOverlay,
@@ -445,7 +446,7 @@ export default function WebRTCVideo() {
     // Fix only works in chrome based browsers.
     if (e.code === "Space") {
       if (videoElm.current?.paused == true) {
-        console.log("Force playing video");
+        logger.info("Force playing video");
         videoElm.current?.play();
       }
     }
@@ -487,7 +488,7 @@ export default function WebRTCVideo() {
   useEffect(
     function updateVideoStream() {
       if (!mediaStream) return;
-      console.log("Updating video stream from mediaStream");
+      logger.info("Updating video stream from mediaStream");
       // We set the as early as possible
       addStreamToVideoElm(mediaStream);
     },

ui/src/components/extensions/ATXPowerControl.tsx

@@ -6,6 +6,7 @@ import Card from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import notifications from "@/notifications";
 import LoadingSpinner from "@/components/LoadingSpinner";
+import { logger } from "@/log";
 
 import { useJsonRpc } from "../../hooks/useJsonRpc";
 
@@ -53,7 +54,7 @@ export function ATXPowerControl() {
       // Start long press timer
       const timer = setTimeout(() => {
         // Send long press action
-        console.log("Sending long press ATX power action");
+        logger.info("Sending long press ATX power action");
         send("setATXPowerAction", { action: "power-long" }, resp => {
           if ("error" in resp) {
             notifications.error(
@@ -74,7 +75,7 @@ export function ATXPowerControl() {
         setPowerPressTimer(null);
 
         // Send short press action
-        console.log("Sending short press ATX power action");
+        logger.info("Sending short press ATX power action");
         send("setATXPowerAction", { action: "power-short" }, resp => {
           if ("error" in resp) {
             notifications.error(

ui/src/components/extensions/SerialConsole.tsx

@@ -69,7 +69,7 @@ export function SerialConsole() {
               text="Open Console"
               onClick={() => {
                 setTerminalType("serial");
-                console.log("Opening serial console with settings: ", settings);
+                logger.info("Opening serial console with settings: ", settings);
               }}
             />
           </div>

ui/src/components/popovers/PasteModal.tsx

@@ -12,7 +12,7 @@ import { useHidStore, useRTCStore, useUiStore, useSettingsStore } from "@/hooks/
 import { keys, modifiers } from "@/keyboardMappings";
 import { layouts, chars } from "@/keyboardLayouts";
 import notifications from "@/notifications";
-
+import { logger } from "@/log";
 const hidKeyboardPayload = (keys: number[], modifier: number) => {
   return { keys, modifier };
 };
@@ -95,7 +95,7 @@ export default function PasteModal() {
 	}
       }
     } catch (error) {
-      console.error(error);
+      logger.error("Failed to paste text", error);
       notifications.error("Failed to paste text");
     }
   }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode, keyboardLayout]);

ui/src/components/popovers/WakeOnLan/Index.tsx

@@ -6,6 +6,7 @@ import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useRTCStore, useUiStore } from "@/hooks/stores";
 import notifications from "@/notifications";
+import { logger } from "@/log";
 
 import EmptyStateCard from "./EmptyStateCard";
 import DeviceList, { StoredDevice } from "./DeviceList";
@@ -56,7 +57,7 @@ export default function WakeOnLanModal() {
       if ("result" in resp) {
         setStoredDevices(resp.result as StoredDevice[]);
       } else {
-        console.error("Failed to load Wake-on-LAN devices:", resp.error);
+        logger.error("Failed to load Wake-on-LAN devices:", resp.error);
       }
     });
   }, [send, setStoredDevices]);
@@ -72,7 +73,7 @@ export default function WakeOnLanModal() {
 
       send("setWakeOnLanDevices", { params: { devices: updatedDevices } }, resp => {
         if ("error" in resp) {
-          console.error("Failed to update Wake-on-LAN devices:", resp.error);
+          logger.error("Failed to update Wake-on-LAN devices:", resp.error);
         } else {
           syncStoredDevices();
         }
@@ -85,10 +86,10 @@ export default function WakeOnLanModal() {
     (name: string, macAddress: string) => {
       if (!name || !macAddress) return;
       const updatedDevices = [...storedDevices, { name, macAddress }];
-      console.log("updatedDevices", updatedDevices);
+      logger.info("updatedDevices", updatedDevices);
       send("setWakeOnLanDevices", { params: { devices: updatedDevices } }, resp => {
         if ("error" in resp) {
-          console.error("Failed to add Wake-on-LAN device:", resp.error);
+          logger.error("Failed to add Wake-on-LAN device:", { error: resp.error });
           setAddDeviceErrorMessage("Failed to add device");
         } else {
           setShowAddForm(false);

ui/src/hooks/stores.ts

@@ -6,6 +6,7 @@ import {
   MAX_TOTAL_MACROS,
   MAX_KEYS_PER_STEP,
 } from "@/constants/macros";
+import { logger } from "@/log";
 
 // Define the JsonRpc types for better type checking
 interface JsonRpcResponse {
@@ -744,7 +745,7 @@ export const useNetworkStateStore = create<NetworkState>((set, get) => ({
   setDhcpLeaseExpiry: (expiry: Date) => {
     const lease = get().dhcp_lease;
     if (!lease) {
-      console.warn("No lease found");
+      logger.warn("No lease found");
       return;
     }
 
@@ -807,7 +808,7 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
 
     const { sendFn } = get();
     if (!sendFn) {
-      console.warn("JSON-RPC send function not available.");
+      logger.warn("JSON-RPC send function not available.");
       return;
     }
 
@@ -817,7 +818,7 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
       await new Promise<void>((resolve, reject) => {
         sendFn("getKeyboardMacros", {}, response => {
           if (response.error) {
-            console.error("Error loading macros:", response.error);
+            logger.error("Error loading macros:", response.error);
             reject(new Error(response.error.message));
             return;
           }
@@ -842,7 +843,7 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
         });
       });
     } catch (error) {
-      console.error("Failed to load macros:", error);
+      logger.error("Failed to load macros:", error);
     } finally {
       set({ loading: false });
     }
@@ -851,18 +852,18 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
   saveMacros: async (macros: KeySequence[]) => {
     const { sendFn } = get();
     if (!sendFn) {
-      console.warn("JSON-RPC send function not available.");
+      logger.warn("JSON-RPC send function not available.");
       throw new Error("JSON-RPC send function not available");
     }
 
     if (macros.length > MAX_TOTAL_MACROS) {
-      console.error(`Cannot save: exceeded maximum of ${MAX_TOTAL_MACROS} macros`);
+      logger.error(`Cannot save: exceeded maximum of ${MAX_TOTAL_MACROS} macros`);
       throw new Error(`Cannot save: exceeded maximum of ${MAX_TOTAL_MACROS} macros`);
     }
 
     for (const macro of macros) {
       if (macro.steps.length > MAX_STEPS_PER_MACRO) {
-        console.error(
+        logger.error(
           `Cannot save: macro "${macro.name}" exceeds maximum of ${MAX_STEPS_PER_MACRO} steps`,
         );
         throw new Error(
@@ -873,7 +874,7 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
       for (let i = 0; i < macro.steps.length; i++) {
         const step = macro.steps[i];
         if (step.keys && step.keys.length > MAX_KEYS_PER_STEP) {
-          console.error(
+          logger.error(
             `Cannot save: macro "${macro.name}" step ${i + 1} exceeds maximum of ${MAX_KEYS_PER_STEP} keys`,
           );
           throw new Error(
@@ -902,7 +903,7 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
       });
 
       if (response.error) {
-        console.error("Error saving macros:", response.error);
+        logger.error("Error saving macros:", response.error);
         const errorMessage =
           typeof response.error.data === "string"
             ? response.error.data
@@ -913,7 +914,7 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
       // Only update the store if the request was successful
       set({ macros: macrosWithSortOrder });
     } catch (error) {
-      console.error("Failed to save macros:", error);
+      logger.error("Failed to save macros:", error);
       throw error;
     } finally {
       set({ loading: false });