apply logger

client/src/Hooks/UseApi.ts

@@ -4,6 +4,7 @@ import type { AxiosRequestConfig } from "axios";
 import { get, patch, post, put, deleteOp } from "@/Utils/ApiClient";
 import { useState } from "react";
 import { useToast } from "@/Hooks/UseToast";
+import { logger } from "@/Utils/logger";
 
 interface ApiResponse<T> {
 	success: boolean;
@@ -61,7 +62,7 @@ export const usePost = <B = any, R = any>() => {
 			return res.data;
 		} catch (err: any) {
 			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
-			console.error(err);
+			logger.error("POST request failed", err, { endpoint, body });
 			toastError(errMsg);
 			setError(errMsg);
 			return null;
@@ -96,7 +97,7 @@ export const usePatch = <B = any, R = any>() => {
 			toastSuccess(res.data?.msg || "Operation successful");
 			return res.data;
 		} catch (err: any) {
-			console.error(err);
+			logger.error("PATCH request failed", err, { endpoint, body });
 			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
 			toastError(errMsg);
 			setError(errMsg);
@@ -132,7 +133,7 @@ export const usePut = <B = any, R = any>() => {
 			toastSuccess(res.data?.msg || "Operation successful");
 			return res.data;
 		} catch (err: any) {
-			console.error(err);
+			logger.error("PUT request failed", err, { endpoint, body });
 			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
 			toastError(errMsg);
 			setError(errMsg);
@@ -167,7 +168,7 @@ export const useDelete = <R = any>() => {
 			toastSuccess(res.data?.msg || "Operation successful");
 			return res.data;
 		} catch (err: any) {
-			console.error(err);
+			logger.error("DELETE request failed", err, { endpoint });
 			const errMsg = err?.response?.data?.message || err.message || "An error occurred";
 			toastError(errMsg);
 			setError(errMsg);
@@ -201,7 +202,7 @@ export const useLazyGet = <R = any>() => {
 			});
 			return res.data;
 		} catch (err: any) {
-			console.error(err);
+			logger.error("GET request failed", err, { endpoint });
 			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
 			toastError(errMsg);
 			setError(errMsg);

client/src/Pages/CreateMonitor/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { useEffect } from "react";
+import { logger } from "@/Utils/logger";
 import { useParams, useLocation, useNavigate } from "react-router";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -253,7 +254,7 @@ const CreateMonitorPage = () => {
 	};
 
 	const onError = (errors: unknown) => {
-		console.log(errors);
+		logger.debug("Monitor creation validation errors", errors);
 	};
 
 	return (

client/src/Pages/Maintenance/create/index.tsx

@@ -1,5 +1,6 @@
 import Stack from "@mui/material/Stack";
 import MenuItem from "@mui/material/MenuItem";
+import { logger } from "@/Utils/logger";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import { BasePage, ConfigBox } from "@/Components/design-elements";
@@ -108,7 +109,7 @@ const CreateMaintenanceWindowPage = () => {
 	const isLoading = isPosting || isPatching;
 
 	const onError = (errors: any) => {
-		console.error("Form submission errors:", errors);
+		logger.error("Maintenance form submission failed", undefined, { errors });
 	};
 
 	return (

client/src/Pages/Settings/index.tsx

@@ -1,5 +1,6 @@
 import { BasePage, ConfigBox, TextLink } from "@/Components/design-elements";
 import { Autocomplete, Select, Dialog, SwitchComponent } from "@/Components/inputs";
+import { logger } from "@/Utils/logger";
 import {
 	Stack,
 	useTheme,
@@ -288,7 +289,7 @@ export const SettingsPage = () => {
 	};
 
 	const onError = (errors: unknown) => {
-		console.log("Form validation errors:", errors);
+		logger.debug("Form validation errors", errors);
 	};
 
 	const languages = Object.keys(i18n.options.resources || {});

client/src/Pages/StatusPage/Create/index.tsx

@@ -1,5 +1,6 @@
 import { BasePage, ConfigBox } from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
+import { logger } from "@/Utils/logger";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -80,7 +81,7 @@ const CreateStatusPage = () => {
 	}, [defaults, reset]);
 
 	const onError = (errors: any) => {
-		console.log(errors);
+		logger.debug("Status page validation errors", errors);
 	};
 
 	const handleDeleteClick = () => {
@@ -128,7 +129,7 @@ const CreateStatusPage = () => {
 					fd.append("logo", imageResult.data);
 					URL.revokeObjectURL(data.logo.data);
 				} catch (e) {
-					console.error("Error fetching logo blob:", e);
+					logger.error("Failed to fetch logo blob", e instanceof Error ? e : undefined);
 				}
 			}
 		}

client/src/Types/env.d.ts

@@ -4,6 +4,7 @@ declare const __APP_VERSION__: string;
 
 interface ImportMetaEnv {
 	readonly VITE_APP_API_V2_BASE_URL?: string;
+	readonly VITE_APP_LOG_LEVEL?: "debug" | "info" | "warn" | "error";
 }
 
 interface ImportMeta {

client/src/Utils/logger.ts

@@ -1,4 +1,4 @@
-import { LOG_LEVELS, type LogLevel } from "@/Types/Log";
+import type { LogLevel } from "@/Types/Log";
 
 interface LogContext {
 	[key: string]: any;
@@ -25,10 +25,7 @@ interface ErrorLogData {
 	userAgent: string;
 }
 
-const envLevel = import.meta.env.VITE_APP_LOG_LEVEL?.toLowerCase() || "error";
-const configuredLevel: LogLevel = LOG_LEVELS.includes(envLevel as LogLevel)
-	? (envLevel as LogLevel)
-	: "error";
+const configuredLevel: LogLevel = import.meta.env.VITE_APP_LOG_LEVEL || "error";
 const configuredPriority = LOG_LEVEL_PRIORITY[configuredLevel];
 
 const shouldLog = (level: LogLevel): boolean => {