From 30da625fdd0df49071291354e0a87d071b5981a1 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 25 Jul 2025 14:52:48 +0000
Subject: [PATCH] feat(frontend): replace console with custom logger

I replaced all instances of console.log, console.warn, and console.error with the custom logger @hatchgrid/logger throughout the frontend applications and packages.

- I added @hatchgrid/logger as a dependency to client/packages/utilities, client/apps/web, and client/apps/landing-page.
- I replaced all console.* calls with the appropriate logger method (e.g., logger.info, logger.warn, logger.error).
- I updated tests in useLocalStorage.spec.ts to mock the logger instead of console.warn.
---
 client/apps/landing-page/package.json         |  1 +
 .../src/components/cta-email/CTAEmail.vue     |  6 ++--
 .../src/components/ui/cta-email/CTAEmail.vue  |  5 ++-
 client/apps/landing-page/src/i18n/ui.ts       |  6 ++--
 .../src/models/category/category.service.ts   |  5 ++-
 .../src/models/tag/tag.service.ts             |  6 ++--
 .../src/utils/test/mockEmailApi.ts            |  5 ++-
 client/apps/web/package.json                  |  1 +
 client/apps/web/src/App.vue                   | 19 +++++-------
 .../web/src/account/register/register.vue     |  6 ++--
 .../apps/web/src/components/UserProfile.vue   |  6 ++--
 .../__tests__/useLocalStorage.spec.ts         | 22 +++++++------
 .../web/src/composables/useLocalStorage.ts    | 10 ++++--
 .../apps/web/src/config/axios-interceptor.ts  |  5 ++-
 client/apps/web/src/i18n/index.ts             | 11 ++++---
 client/apps/web/src/i18n/load.locales.ts      |  8 +++--
 .../web/src/layouts/components/AppHeader.vue  |  4 ++-
 .../router/middleware/loadLayoutMiddleware.ts |  6 ++--
 .../apps/web/src/services/account.service.ts  | 31 ++++++++-----------
 client/apps/web/src/stores/auth.ts            |  7 +++--
 client/packages/utilities/package.json        |  1 +
 .../utilities/src/theme/color-theme.ts        |  5 ++-
 pnpm-lock.yaml                                | 11 ++++++-
 23 files changed, 115 insertions(+), 72 deletions(-)

diff --git a/client/apps/landing-page/package.json b/client/apps/landing-page/package.json
index c4b7f127..97cb625b 100644
--- a/client/apps/landing-page/package.json
+++ b/client/apps/landing-page/package.json
@@ -43,6 +43,7 @@
 	"dependencies": {
 		"@astrojs/check": "^0.9.4",
 		"@astrojs/mdx": "^4.3.1",
+		"@hatchgrid/logger": "workspace:*",
 		"@astrojs/rss": "^4.0.12",
 		"@astrojs/sitemap": "^3.4.1",
 		"@astrojs/vue": "^5.1.0",
diff --git a/client/apps/landing-page/src/components/cta-email/CTAEmail.vue b/client/apps/landing-page/src/components/cta-email/CTAEmail.vue
index bda1e06b..966bfe03 100644
--- a/client/apps/landing-page/src/components/cta-email/CTAEmail.vue
+++ b/client/apps/landing-page/src/components/cta-email/CTAEmail.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { LogManager } from "@hatchgrid/logger";
 import { toTypedSchema } from "@vee-validate/zod";
 import { useForm } from "vee-validate";
 import type { HTMLAttributes } from "vue";
@@ -57,6 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
 	lang: "en",
 });
 
+const logger = LogManager.getLogger("landing-page:cta-email");
 const t = useTranslations(props.lang);
 // Initialize composables
 const { validationSchema } = useEmailValidation({ lang: props.lang });
@@ -110,7 +112,7 @@ const onSubmit = handleSubmit(async (values) => {
 			resetForm();
 
 			// Emit success event for parent components
-			console.log("✅ Email successfully submitted:", {
+			logger.info("Email successfully submitted", {
 				email: values.email,
 				response: result.data,
 			});
@@ -120,7 +122,7 @@ const onSubmit = handleSubmit(async (values) => {
 	} catch (err) {
 		const errorMessage = err instanceof Error ? err.message : "Unknown error";
 		showErrorToast(errorMessage);
-		console.error("❌ Email submission failed:", err);
+		logger.error("Email submission failed", { error: err });
 	}
 });
 
diff --git a/client/apps/landing-page/src/components/ui/cta-email/CTAEmail.vue b/client/apps/landing-page/src/components/ui/cta-email/CTAEmail.vue
index 30b0873d..af49ea1e 100644
--- a/client/apps/landing-page/src/components/ui/cta-email/CTAEmail.vue
+++ b/client/apps/landing-page/src/components/ui/cta-email/CTAEmail.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { LogManager } from "@hatchgrid/logger";
 import { toTypedSchema } from "@vee-validate/zod";
 import { useForm } from "vee-validate";
 import type { HTMLAttributes } from "vue";
@@ -47,6 +48,8 @@ const props = withDefaults(defineProps<Props>(), {
 	buttonSize: "default",
 });
 
+const logger = LogManager.getLogger("landing-page:ui-cta-email");
+
 const formSchema = toTypedSchema(
 	z.object({
 		email: z
@@ -69,7 +72,7 @@ const onSubmit = handleSubmit((values) => {
 		),
 	});
 	// Here you would typically send the email to your backend
-	console.log("Email submitted:", values.email);
+	logger.info("Email submitted", { email: values.email });
 });
 </script>
 
diff --git a/client/apps/landing-page/src/i18n/ui.ts b/client/apps/landing-page/src/i18n/ui.ts
index 98f9a47e..c8fc4848 100644
--- a/client/apps/landing-page/src/i18n/ui.ts
+++ b/client/apps/landing-page/src/i18n/ui.ts
@@ -1,6 +1,8 @@
+import { LogManager } from "@hatchgrid/logger";
 import type { Lang, UIDict, UIMultilingual } from "./types";
 
 // Use import.meta.glob to get all translation files
+const logger = LogManager.getLogger("landing-page:i18n-ui");
 const translationModules = import.meta.glob<
 	Record<string, Record<Lang, UIDict>>
 >("./translations/*.ts", { eager: true });
@@ -38,8 +40,8 @@ export const ui: UIMultilingual = Object.values(translationModules).reduce(
 
 // Enhanced debug log to check what was loaded
 if (process.env.NODE_ENV === "development") {
-	console.log(
-		"㊙︎ Loaded translations:",
+	logger.debug(
+		"Loaded translations",
 		Object.keys(ui)
 			.map((lang) => `${lang}: ${Object.keys(ui[lang as Lang]).length} keys`)
 			.join(", "),
diff --git a/client/apps/landing-page/src/models/category/category.service.ts b/client/apps/landing-page/src/models/category/category.service.ts
index 301142ed..9599b802 100644
--- a/client/apps/landing-page/src/models/category/category.service.ts
+++ b/client/apps/landing-page/src/models/category/category.service.ts
@@ -4,11 +4,14 @@
  */
 
 import { getCollection, getEntry } from "astro:content";
+import { LogManager } from "@hatchgrid/logger";
 import { parseEntityId } from "@/utils/collection.entity";
 import type { CategoryCriteria } from "./category.criteria";
 import { toCategories, toCategory } from "./category.mapper";
 import type Category from "./category.model";
 
+const logger = LogManager.getLogger("landing-page:category-service");
+
 /**
  * Retrieves categories from the content collection with filtering options
  * @async
@@ -70,7 +73,7 @@ export const getCategoryById = async (
 		const entry = await getEntry("categories", categoryId);
 		return entry ? toCategory(entry) : undefined;
 	} catch (error) {
-		console.error(`Failed to fetch category ${categoryId}:`, error);
+		logger.error(`Failed to fetch category ${categoryId}`, { error });
 		throw new Error(`Failed to fetch category ${categoryId}`);
 	}
 };
diff --git a/client/apps/landing-page/src/models/tag/tag.service.ts b/client/apps/landing-page/src/models/tag/tag.service.ts
index e064263d..a6895a7b 100644
--- a/client/apps/landing-page/src/models/tag/tag.service.ts
+++ b/client/apps/landing-page/src/models/tag/tag.service.ts
@@ -4,11 +4,13 @@
  */
 
 import { getCollection, getEntry } from "astro:content";
+import { LogManager } from "@hatchgrid/logger";
 import { parseEntityId } from "@/utils/collection.entity";
 import type { TagCriteria } from "./tag.criteria";
 import { toTag, toTags } from "./tag.mapper";
 import type Tag from "./tag.model";
 
+const logger = LogManager.getLogger("landing-page:tag-service");
 const tagsCache: Record<string, Tag[]> = {};
 
 /**
@@ -58,7 +60,7 @@ export async function getTags(criteria?: TagCriteria): Promise<Tag[]> {
 		tagsCache[cacheKey] = mappedTags;
 		return mappedTags;
 	} catch (error) {
-		console.error("Failed to fetch tags:", error);
+		logger.error("Failed to fetch tags", { error });
 		throw new Error("Failed to fetch tags");
 	}
 }
@@ -74,7 +76,7 @@ export async function getTagById(id: string): Promise<Tag | undefined> {
 		const entry = await getEntry("tags", id);
 		return entry ? toTag(entry) : undefined;
 	} catch (error) {
-		console.error(`Failed to fetch tag with id ${id}:`, error);
+		logger.error(`Failed to fetch tag with id ${id}`, { error });
 		throw new Error(`Failed to fetch tag with id ${id}`);
 	}
 }
diff --git a/client/apps/landing-page/src/utils/test/mockEmailApi.ts b/client/apps/landing-page/src/utils/test/mockEmailApi.ts
index ba1347f7..3da3da87 100644
--- a/client/apps/landing-page/src/utils/test/mockEmailApi.ts
+++ b/client/apps/landing-page/src/utils/test/mockEmailApi.ts
@@ -3,6 +3,8 @@
  * This simulates the backend API responses for email submissions
  */
 
+import { LogManager } from "@hatchgrid/logger";
+
 export interface MockApiConfig {
 	delay?: number;
 	successRate?: number;
@@ -94,6 +96,7 @@ export class MockEmailApi {
 }
 
 // Global mock setup for fetch in development
+const logger = LogManager.getLogger("landing-page:mock-email-api");
 export function setupMockApi(config?: MockApiConfig) {
 	if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
 		const mockApi = new MockEmailApi(config);
@@ -132,7 +135,7 @@ export function setupMockApi(config?: MockApiConfig) {
 			return originalFetch(url, options);
 		};
 
-		console.log("🚀 Mock Email API enabled for development");
+		logger.info("Mock Email API enabled for development");
 		// return mockApi // This return is not strictly necessary if not used elsewhere after setup
 	}
 }
diff --git a/client/apps/web/package.json b/client/apps/web/package.json
index 1287412a..ba8331d0 100644
--- a/client/apps/web/package.json
+++ b/client/apps/web/package.json
@@ -15,6 +15,7 @@
 		"test:coverage": "vitest run --coverage"
 	},
 	"dependencies": {
+		"@hatchgrid/logger": "workspace:*",
 		"@hatchgrid/utilities": "workspace:*",
 		"@internationalized/date": "^3.8.2",
 		"@tailwindcss/vite": "^4.1.11",
diff --git a/client/apps/web/src/App.vue b/client/apps/web/src/App.vue
index 798d673d..1bf7fbf3 100644
--- a/client/apps/web/src/App.vue
+++ b/client/apps/web/src/App.vue
@@ -6,12 +6,14 @@
 </template>
 
 <script setup>
+import { LogManager } from "@hatchgrid/logger";
 import { onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { RouterView } from "vue-router";
 import Toaster from "./components/ui/sonner/Sonner.vue";
 import AppLayout from "./layouts/AppLayout.vue";
 
+const logger = LogManager.getLogger("web:app");
 // Initialize CSRF token on app mount
 onMounted(async () => {
 	const MAX_RETRIES = 3;
@@ -30,16 +32,11 @@ onMounted(async () => {
 				signal: controller.signal,
 			});
 			success = true;
-			if (import.meta.env.DEV) {
-				console.log(`CSRF token initialized successfully (attempt ${attempt})`);
-			}
+			logger.info(`CSRF token initialized successfully (attempt ${attempt})`);
 		} catch (error) {
-			if (import.meta.env.DEV) {
-				console.error(
-					`Failed to initialize CSRF token (attempt ${attempt}):`,
-					error,
-				);
-			}
+			logger.error(`Failed to initialize CSRF token (attempt ${attempt})`, {
+				error,
+			});
 			// Wait briefly before retrying (exponential backoff)
 			await new Promise((resolve) => setTimeout(resolve, 300 * attempt));
 		} finally {
@@ -48,9 +45,7 @@ onMounted(async () => {
 	}
 	if (!success) {
 		// Consider fallback handling in production
-		if (import.meta.env.DEV) {
-			console.error("CSRF token initialization failed after maximum retries.");
-		}
+		logger.error("CSRF token initialization failed after maximum retries.");
 	}
 });
 </script>
diff --git a/client/apps/web/src/account/register/register.vue b/client/apps/web/src/account/register/register.vue
index 7ad72906..ea7b1269 100644
--- a/client/apps/web/src/account/register/register.vue
+++ b/client/apps/web/src/account/register/register.vue
@@ -102,6 +102,7 @@
 </template>
 
 <script setup lang="ts">
+import { LogManager } from "@hatchgrid/logger";
 import { toTypedSchema } from "@vee-validate/zod";
 import { useForm } from "vee-validate";
 import { ref } from "vue";
@@ -120,6 +121,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { useAuthStore } from "@/stores/auth";
 
+const logger = LogManager.getLogger("web:register");
 const router = useRouter();
 const authStore = useAuthStore();
 const isLoading = ref(false);
@@ -179,9 +181,7 @@ const handleRegister = handleSubmit(async (values) => {
 
 		await router.push("/login");
 	} catch (error: unknown) {
-		if (import.meta.env.DEV) {
-			console.error("Registration error:", error);
-		}
+		logger.error("Registration error", { error });
 		const description = "Unable to create your account. Please try again.";
 		toast.error("Registration failed", { description });
 	} finally {
diff --git a/client/apps/web/src/components/UserProfile.vue b/client/apps/web/src/components/UserProfile.vue
index 06db2f52..974b5adb 100644
--- a/client/apps/web/src/components/UserProfile.vue
+++ b/client/apps/web/src/components/UserProfile.vue
@@ -28,12 +28,14 @@
 </template>
 
 <script setup lang="ts">
+import { LogManager } from "@hatchgrid/logger";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 // Removed unused AccountService type import
 import { useAuthStore } from "@/stores/auth";
 
+const logger = LogManager.getLogger("web:user-profile");
 // Use i18n for reactive translations
 const { t } = useI18n();
 
@@ -57,11 +59,11 @@ const handleLogout = async () => {
 	try {
 		await authStore.logoutAsync();
 		router.push("/");
-	} catch {
+	} catch (error) {
 		// Avoid logging sensitive details
 		// Show a generic error message to the user (replace with your notification system)
 		// Example: toast.error("Logout failed. Please try again.");
-		console.warn("Logout failed");
+		logger.warn("Logout failed", { error });
 	} finally {
 		isLoggingOut.value = false;
 	}
diff --git a/client/apps/web/src/composables/__tests__/useLocalStorage.spec.ts b/client/apps/web/src/composables/__tests__/useLocalStorage.spec.ts
index 05f9012a..29a2d66c 100644
--- a/client/apps/web/src/composables/__tests__/useLocalStorage.spec.ts
+++ b/client/apps/web/src/composables/__tests__/useLocalStorage.spec.ts
@@ -1,3 +1,4 @@
+import { LogManager } from "@hatchgrid/logger";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { nextTick } from "vue";
 import { useLocalStorage } from "../useLocalStorage";
@@ -90,7 +91,8 @@ describe("useLocalStorage", () => {
 
 	it("handles invalid JSON gracefully and returns default value", () => {
 		const key = "test-key-invalid-json";
-		const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+		const logger = LogManager.getLogger("web:use-local-storage");
+		const loggerSpy = vi.spyOn(logger, "warn").mockImplementation(() => {});
 
 		// Setup the mock to return invalid JSON
 		localStorageMock.getItem.mockReturnValueOnce("{invalid-json");
@@ -98,13 +100,14 @@ describe("useLocalStorage", () => {
 		const [state] = useLocalStorage(key, defaultValue);
 
 		expect(state.value).toEqual(defaultValue);
-		expect(consoleSpy).toHaveBeenCalled();
-		consoleSpy.mockRestore();
+		expect(loggerSpy).toHaveBeenCalled();
+		loggerSpy.mockRestore();
 	});
 
 	it("handles localStorage errors gracefully", () => {
 		const key = "test-key-error-get";
-		const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+		const logger = LogManager.getLogger("web:use-local-storage");
+		const loggerSpy = vi.spyOn(logger, "warn").mockImplementation(() => {});
 
 		// Setup the mock to throw an error
 		localStorageMock.getItem.mockImplementationOnce(() => {
@@ -114,13 +117,14 @@ describe("useLocalStorage", () => {
 		const [state] = useLocalStorage(key, defaultValue);
 
 		expect(state.value).toEqual(defaultValue);
-		expect(consoleSpy).toHaveBeenCalled();
-		consoleSpy.mockRestore();
+		expect(loggerSpy).toHaveBeenCalled();
+		loggerSpy.mockRestore();
 	});
 
 	it("handles setItem errors gracefully", async () => {
 		const key = "test-key-error-set";
-		const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+		const logger = LogManager.getLogger("web:use-local-storage");
+		const loggerSpy = vi.spyOn(logger, "warn").mockImplementation(() => {});
 
 		// Setup the mock to throw an error
 		localStorageMock.setItem.mockImplementationOnce(() => {
@@ -132,7 +136,7 @@ describe("useLocalStorage", () => {
 		setState({ foo: "error" });
 		await nextTick();
 
-		expect(consoleSpy).toHaveBeenCalled();
-		consoleSpy.mockRestore();
+		expect(loggerSpy).toHaveBeenCalled();
+		loggerSpy.mockRestore();
 	});
 });
diff --git a/client/apps/web/src/composables/useLocalStorage.ts b/client/apps/web/src/composables/useLocalStorage.ts
index da1b77e2..2cb8f265 100644
--- a/client/apps/web/src/composables/useLocalStorage.ts
+++ b/client/apps/web/src/composables/useLocalStorage.ts
@@ -1,3 +1,4 @@
+import { LogManager } from "@hatchgrid/logger";
 import { type Ref, ref } from "vue";
 
 /**
@@ -8,6 +9,7 @@ import { type Ref, ref } from "vue";
  * @param options - Optional configuration options
  * @returns A tuple containing the reactive state and a setter function
  */
+const logger = LogManager.getLogger("web:use-local-storage");
 export function useLocalStorage<T>(
 	key: string,
 	defaultValue: T,
@@ -24,7 +26,9 @@ export function useLocalStorage<T>(
 				try {
 					return JSON.parse(v) as T;
 				} catch (e) {
-					console.warn(`Error parsing JSON from localStorage key "${key}":`, e);
+					logger.warn(`Error parsing JSON from localStorage key "${key}"`, {
+						error: e,
+					});
 					return defaultValue;
 				}
 			},
@@ -40,7 +44,7 @@ export function useLocalStorage<T>(
 			}
 			return serializer.read(item);
 		} catch (error) {
-			console.warn(`Error reading localStorage key "${key}":`, error);
+			logger.warn(`Error reading localStorage key "${key}"`, { error });
 			return defaultValue;
 		}
 	}
@@ -49,7 +53,7 @@ export function useLocalStorage<T>(
 		try {
 			localStorage.setItem(key, serializer.write(value));
 		} catch (error) {
-			console.warn(`Error setting localStorage key "${key}":`, error);
+			logger.warn(`Error setting localStorage key "${key}"`, { error });
 		}
 	}
 
diff --git a/client/apps/web/src/config/axios-interceptor.ts b/client/apps/web/src/config/axios-interceptor.ts
index f927e8a5..1d5b3cd4 100644
--- a/client/apps/web/src/config/axios-interceptor.ts
+++ b/client/apps/web/src/config/axios-interceptor.ts
@@ -1,3 +1,4 @@
+import { LogManager } from "@hatchgrid/logger";
 import axios, { type AxiosError, type AxiosResponse } from "axios";
 import type { Router } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
@@ -9,6 +10,8 @@ function getCookie(name: string): string | undefined {
 	return match ? decodeURIComponent(match[2]) : undefined;
 }
 
+const logger = LogManager.getLogger("web:axios-interceptor");
+
 export function setupAxiosInterceptors(router: Router) {
 	axios.interceptors.request.use(
 		(config) => {
@@ -21,7 +24,7 @@ export function setupAxiosInterceptors(router: Router) {
 			return config;
 		},
 		(error) => {
-			console.error("Request interceptor error:", error);
+			logger.error("Request interceptor error", { error });
 			return Promise.reject(
 				error instanceof Error ? error : new Error(String(error)),
 			);
diff --git a/client/apps/web/src/i18n/index.ts b/client/apps/web/src/i18n/index.ts
index 55c56794..90d0f5a2 100644
--- a/client/apps/web/src/i18n/index.ts
+++ b/client/apps/web/src/i18n/index.ts
@@ -1,3 +1,4 @@
+import { LogManager } from "@hatchgrid/logger";
 import { createI18n } from "vue-i18n";
 import { getLocaleModules, getLocaleModulesSync } from "./load.locales.ts";
 
@@ -20,6 +21,8 @@ export const DEFAULT_LOCALE: SupportedLocale = LANGUAGES[0].code;
 
 export const LANGUAGE_STORAGE_KEY = "currentLanguage";
 
+const logger = LogManager.getLogger("web:i18n");
+
 function getLocale(): SupportedLocale {
 	// Try localStorage first
 	try {
@@ -28,7 +31,7 @@ function getLocale(): SupportedLocale {
 			return stored as SupportedLocale;
 		}
 	} catch (error) {
-		console.debug("localStorage not available:", error);
+		logger.debug("localStorage not available", { error });
 	}
 
 	// Try browser language detection
@@ -40,7 +43,7 @@ function getLocale(): SupportedLocale {
 			}
 		}
 	} catch (error) {
-		console.debug("Browser language detection failed:", error);
+		logger.debug("Browser language detection failed", { error });
 	}
 
 	return DEFAULT_LOCALE;
@@ -70,7 +73,7 @@ export async function setLocale(locale: SupportedLocale) {
 	const targetLocale = SUPPORTED_LOCALES.includes(locale)
 		? locale
 		: (() => {
-				console.warn(
+				logger.warn(
 					`Unsupported locale: ${locale}. Falling back to ${DEFAULT_LOCALE}`,
 				);
 				return DEFAULT_LOCALE;
@@ -89,7 +92,7 @@ export async function setLocale(locale: SupportedLocale) {
 	try {
 		localStorage.setItem(LANGUAGE_STORAGE_KEY, targetLocale);
 	} catch (error) {
-		console.warn("Failed to save locale to localStorage:", error);
+		logger.warn("Failed to save locale to localStorage", { error });
 	}
 
 	document.documentElement.lang = targetLocale;
diff --git a/client/apps/web/src/i18n/load.locales.ts b/client/apps/web/src/i18n/load.locales.ts
index e511cc0e..6d423c58 100644
--- a/client/apps/web/src/i18n/load.locales.ts
+++ b/client/apps/web/src/i18n/load.locales.ts
@@ -1,3 +1,4 @@
+import { LogManager } from "@hatchgrid/logger";
 import { deepmerge } from "@hatchgrid/utilities";
 import type { LocaleMessage } from "./types";
 
@@ -5,6 +6,7 @@ import type { LocaleMessage } from "./types";
  * In-memory cache for merged locale message objects.
  * Prevents redundant file system reads and merges for previously loaded locales.
  */
+const logger = LogManager.getLogger("web:load-locales");
 const localeCache = new Map<string, LocaleMessage>();
 
 /**
@@ -48,7 +50,7 @@ export async function getLocaleModules(locale: string): Promise<LocaleMessage> {
 			.map((module) => module.default);
 
 		if (messages.length === 0) {
-			console.warn(`No locale files found for locale: ${locale}`);
+			logger.warn(`No locale files found for locale: ${locale}`);
 			const emptyResult: LocaleMessage = {};
 			localeCache.set(locale, emptyResult);
 			return emptyResult;
@@ -58,7 +60,7 @@ export async function getLocaleModules(locale: string): Promise<LocaleMessage> {
 		localeCache.set(locale, result);
 		return result;
 	} catch (error) {
-		console.error(`Failed to load locale files for ${locale}:`, error);
+		logger.error(`Failed to load locale files for ${locale}`, { error });
 		const emptyResult: LocaleMessage = {};
 		localeCache.set(locale, emptyResult);
 		return emptyResult;
@@ -86,7 +88,7 @@ export function getLocaleModulesSync(locale: string): LocaleMessage {
 	}
 
 	if (messages.length === 0) {
-		console.warn(`No locale files found for locale: ${locale}`);
+		logger.warn(`No locale files found for locale: ${locale}`);
 		const emptyResult: LocaleMessage = {};
 		localeCache.set(locale, emptyResult);
 		return emptyResult;
diff --git a/client/apps/web/src/layouts/components/AppHeader.vue b/client/apps/web/src/layouts/components/AppHeader.vue
index 758ab14a..290efca4 100644
--- a/client/apps/web/src/layouts/components/AppHeader.vue
+++ b/client/apps/web/src/layouts/components/AppHeader.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { LogManager } from "@hatchgrid/logger";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { RouterLink, useRoute, useRouter } from "vue-router";
@@ -21,6 +22,7 @@ import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/stores/auth";
 import LanguageSwitcher from "./LanguageSwitcher.vue";
 
+const logger = LogManager.getLogger("web:app-header");
 const authStore = useAuthStore();
 const { isAuthenticated } = storeToRefs(authStore);
 const router = useRouter();
@@ -36,7 +38,7 @@ const handleLogout = async () => {
 		toast.success("Successfully logged out");
 		await router.push("/login");
 	} catch (error) {
-		console.error("Error during logout:", error);
+		logger.error("Error during logout", { error });
 		toast.error("Logout failed");
 	} finally {
 		isLoggingOut.value = false;
diff --git a/client/apps/web/src/router/middleware/loadLayoutMiddleware.ts b/client/apps/web/src/router/middleware/loadLayoutMiddleware.ts
index 8d2b9871..f6163995 100644
--- a/client/apps/web/src/router/middleware/loadLayoutMiddleware.ts
+++ b/client/apps/web/src/router/middleware/loadLayoutMiddleware.ts
@@ -1,3 +1,4 @@
+import { LogManager } from "@hatchgrid/logger";
 import type { RouteLocationNormalized } from "vue-router";
 
 /**
@@ -9,6 +10,7 @@ import type { RouteLocationNormalized } from "vue-router";
  *
  * If the layout we want to display is not found, loads the default layout DashboardLayout.
  */
+const logger = LogManager.getLogger("web:load-layout-middleware");
 export async function loadLayoutMiddleware(route: RouteLocationNormalized) {
 	try {
 		// Get layout name from route meta, default to 'SimpleLayout' if not specified
@@ -27,14 +29,14 @@ export async function loadLayoutMiddleware(route: RouteLocationNormalized) {
 		// Store the loaded component in route meta for use in the main layout
 		route.meta.layoutComponent = layoutComponent.default;
 	} catch (error) {
-		console.error("Failed to load layout component:", error);
+		logger.error("Failed to load layout component", { error });
 
 		// Load default layout on error
 		try {
 			const defaultLayoutComponent = await import("@/layouts/AppLayout.vue");
 			route.meta.layoutComponent = defaultLayoutComponent.default;
 		} catch (defaultError) {
-			console.error("Failed to load default layout:", defaultError);
+			logger.error("Failed to load default layout", { error: defaultError });
 		}
 	}
 }
diff --git a/client/apps/web/src/services/account.service.ts b/client/apps/web/src/services/account.service.ts
index 0ac15a2a..b4888f07 100644
--- a/client/apps/web/src/services/account.service.ts
+++ b/client/apps/web/src/services/account.service.ts
@@ -1,3 +1,4 @@
+import { LogManager } from "@hatchgrid/logger";
 import { avatar } from "@hatchgrid/utilities";
 import axios, { type AxiosResponse, isAxiosError } from "axios";
 import type { Router } from "vue-router";
@@ -21,6 +22,8 @@ export interface ProfileInfo {
 	};
 }
 
+const logger = LogManager.getLogger("web:account-service");
+
 export default class AccountService {
 	private readonly authStore: ReturnType<typeof useAuthStore>;
 	private readonly router?: Router;
@@ -70,15 +73,13 @@ export default class AccountService {
 
 			return true;
 		} catch (error) {
-			if (import.meta.env.DEV) {
-				if (isAxiosError(error)) {
-					console.error(
-						"Failed to retrieve application profiles:",
-						error.response?.status,
-					);
-				} else {
-					console.error("Unknown error retrieving profiles:", error);
-				}
+			if (isAxiosError(error)) {
+				logger.error("Failed to retrieve application profiles", {
+					status: error.response?.status,
+					error,
+				});
+			} else {
+				logger.error("Unknown error retrieving profiles", { error });
 			}
 			return false;
 		}
@@ -119,13 +120,9 @@ export default class AccountService {
 					this.redirectToLogin();
 					return false;
 				}
-				if (import.meta.env.DEV) {
-					console.error("Failed to retrieve account:", status);
-				}
+				logger.error("Failed to retrieve account", { status });
 			} else {
-				if (import.meta.env.DEV) {
-					console.error("Unknown error retrieving account:", error);
-				}
+				logger.error("Unknown error retrieving account", { error });
 			}
 		}
 
@@ -226,9 +223,7 @@ export default class AccountService {
 
 			return true;
 		} catch (error) {
-			if (import.meta.env.DEV) {
-				console.error("Failed to update user language:", error);
-			}
+			logger.error("Failed to update user language", { error });
 			return false;
 		}
 	}
diff --git a/client/apps/web/src/stores/auth.ts b/client/apps/web/src/stores/auth.ts
index 8a6fa397..464845d1 100644
--- a/client/apps/web/src/stores/auth.ts
+++ b/client/apps/web/src/stores/auth.ts
@@ -1,3 +1,4 @@
+import { LogManager } from "@hatchgrid/logger";
 import { avatar } from "@hatchgrid/utilities";
 import axios, { type AxiosError } from "axios";
 import { defineStore } from "pinia";
@@ -30,6 +31,8 @@ export interface RegistrationData {
 	password: string;
 }
 
+const logger = LogManager.getLogger("web:stores-auth");
+
 export const useAuthStore = defineStore("auth", {
 	state: (): AuthStateStorable => ({ ...defaultAuthState }),
 	getters: {
@@ -124,9 +127,7 @@ export const useAuthStore = defineStore("auth", {
 			try {
 				await axios.post("/api/logout");
 			} catch (error) {
-				if (import.meta.env.DEV) {
-					console.warn("Logout failed, but continuing:", error);
-				}
+				logger.warn("Logout failed, but continuing", { error });
 			} finally {
 				this.logout();
 			}
diff --git a/client/packages/utilities/package.json b/client/packages/utilities/package.json
index 06f5fb8c..6a65f0c7 100644
--- a/client/packages/utilities/package.json
+++ b/client/packages/utilities/package.json
@@ -59,6 +59,7 @@
 		"test:coverage": "vitest run --coverage"
 	},
 	"dependencies": {
+		"@hatchgrid/logger": "workspace:*",
 		"gravatar-url": "^4.0.1"
 	},
 	"devDependencies": {
diff --git a/client/packages/utilities/src/theme/color-theme.ts b/client/packages/utilities/src/theme/color-theme.ts
index 9f9c25dc..93c47440 100644
--- a/client/packages/utilities/src/theme/color-theme.ts
+++ b/client/packages/utilities/src/theme/color-theme.ts
@@ -1,7 +1,10 @@
+import { LogManager } from "@hatchgrid/logger";
+
 const DEFAULT_KEY = "theme";
 const DARK_THEME = "dark";
 const LIGHT_THEME = "light";
 
+const logger = LogManager.getLogger("utilities:color-theme");
 export interface ThemeChangedEventDetail {
 	isDark: boolean;
 }
@@ -71,7 +74,7 @@ export const loadTheme = (
 
 	// Create new event handler and store reference
 	themeChangeHandler = ((event: CustomEvent<ThemeChangedEventDetail>) => {
-		console.log("🚨 Theme changed", event.detail.isDark);
+		logger.info("Theme changed", { isDark: event.detail.isDark });
 		const isDark = event.detail.isDark;
 		document.documentElement.classList.toggle(darkThemeClass, isDark);
 		localStorage.setItem(key, isDark ? darkThemeClass : lightThemeClass);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4f920dc..18f3a7f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       '@astrojs/vue':
         specifier: ^5.1.0
         version: 5.1.0(@types/node@24.1.0)(astro@5.12.3(@types/node@24.1.0)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.44.1)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1))(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.44.1)(terser@5.39.0)(vue@3.5.18(typescript@5.8.3))(yaml@2.7.1)
+      '@hatchgrid/logger':
+        specifier: workspace:*
+        version: link:../../packages/logger
       '@hatchgrid/utilities':
         specifier: workspace:*
         version: link:../../packages/utilities
@@ -138,6 +141,9 @@ importers:
 
   client/apps/web:
     dependencies:
+      '@hatchgrid/logger':
+        specifier: workspace:*
+        version: link:../../packages/logger
       '@hatchgrid/utilities':
         specifier: workspace:*
         version: link:../../packages/utilities
@@ -336,6 +342,9 @@ importers:
 
   client/packages/utilities:
     dependencies:
+      '@hatchgrid/logger':
+        specifier: workspace:*
+        version: link:../logger
       gravatar-url:
         specifier: ^4.0.1
         version: 4.0.1
@@ -7763,7 +7772,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.16.5)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.4.2)(jsdom@25.0.1)(lightningcss@1.30.1)(terser@5.39.0)(yaml@2.7.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(terser@5.39.0)(yaml@2.7.1)
     transitivePeerDependencies:
       - supports-color