From fff9325bcc370100aff4f68a1030e55f5c7c0479 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 6 Mar 2026 06:45:57 +0000
Subject: [PATCH] refactor: centralize logging with a new logger utility

Introduced a centralized logger in src/lib/logger.ts and replaced all
instances of console.error and console.warn with logger methods to
improve maintainability.

Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
---
 src/app/[username]/error.tsx        |  4 +++-
 src/app/api/og/[username]/route.tsx |  4 +++-
 src/components/CardGenerator.tsx    |  7 ++++---
 src/components/ThemeController.tsx  |  3 ++-
 src/lib/logger.ts                   | 25 +++++++++++++++++++++++++
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/logger.ts

diff --git a/src/app/[username]/error.tsx b/src/app/[username]/error.tsx
index ec7882f..adb3daf 100644
--- a/src/app/[username]/error.tsx
+++ b/src/app/[username]/error.tsx
@@ -3,6 +3,8 @@
 import { useEffect } from "react";
 import Link from "next/link";
 
+import { logger } from "@/lib/logger";
+
 export default function ErrorPage({
   error,
   reset,
@@ -11,7 +13,7 @@ export default function ErrorPage({
   reset: () => void;
 }) {
   useEffect(() => {
-    console.error("User page error:", error);
+    logger.error("User page error:", error);
   }, [error]);
 
   const isRateLimit = error.message.includes("rate limit");
diff --git a/src/app/api/og/[username]/route.tsx b/src/app/api/og/[username]/route.tsx
index 8783168..94628a8 100644
--- a/src/app/api/og/[username]/route.tsx
+++ b/src/app/api/og/[username]/route.tsx
@@ -1,6 +1,8 @@
 import { ImageResponse } from "next/og";
 import { NextRequest } from "next/server";
 
+import { logger } from "@/lib/logger";
+
 export const runtime = "edge";
 
 export async function GET(
@@ -30,7 +32,7 @@ export async function GET(
       publicRepos = data.public_repos ?? 0;
     }
   } catch (error) {
-    console.error(`Failed to fetch GitHub profile for OG image: ${username}`, error);
+    logger.error(`Failed to fetch GitHub profile for OG image: ${username}`, error);
     // fallback to defaults
   }
 
diff --git a/src/components/CardGenerator.tsx b/src/components/CardGenerator.tsx
index c663121..5509ca4 100644
--- a/src/components/CardGenerator.tsx
+++ b/src/components/CardGenerator.tsx
@@ -4,6 +4,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { toPng, toBlob } from "html-to-image";
 
+import { logger } from "@/lib/logger";
 import type {
   CardBlockId,
   CardDisplayOptions,
@@ -130,7 +131,7 @@ export default function CardGenerator({ summary }: Props) {
       });
       return dataUrl;
     } catch (err) {
-      console.error("Failed to generate image", err);
+      logger.error("Failed to generate image", err);
       return null;
     }
   }, []);
@@ -173,7 +174,7 @@ export default function CardGenerator({ summary }: Props) {
             setPreviewUrl(url);
           }
         } catch (err) {
-          console.error("Failed to generate image", err);
+          logger.error("Failed to generate image", err);
           if (!isCancelled) {
             setPreviewUrl(null);
           }
@@ -229,7 +230,7 @@ export default function CardGenerator({ summary }: Props) {
       setCopyStatus("copied");
       setTimeout(() => setCopyStatus("idle"), 2000);
     } catch (err) {
-      console.error("Failed to copy", err);
+      logger.error("Failed to copy", err);
       setCopyStatus("error");
     }
   }, []);
diff --git a/src/components/ThemeController.tsx b/src/components/ThemeController.tsx
index 12986f5..ca824e5 100644
--- a/src/components/ThemeController.tsx
+++ b/src/components/ThemeController.tsx
@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import { FastAverageColor } from "fast-average-color";
 import { adjustAccentColor } from "@/lib/color";
+import { logger } from "@/lib/logger";
 
 type Props = {
   avatarUrl?: string;
@@ -36,7 +37,7 @@ export default function ThemeController({ avatarUrl, topLanguageColor }: Props)
         }
       })
       .catch((e) => {
-        console.warn("Failed to extract color from avatar, keeping fallback color.", e);
+        logger.warn("Failed to extract color from avatar, keeping fallback color.", e);
       });
     }
 
diff --git a/src/lib/logger.ts b/src/lib/logger.ts
new file mode 100644
index 0000000..a38f039
--- /dev/null
+++ b/src/lib/logger.ts
@@ -0,0 +1,25 @@
+/**
+ * Centralized logger for the application.
+ * Currently wraps console methods, but can be easily extended to use
+ * external logging services (e.g., Sentry, Axiom, Datadog) in the future.
+ */
+
+type LogFn = (message: string, ...args: unknown[]) => void;
+
+interface Logger {
+  info: LogFn;
+  warn: LogFn;
+  error: LogFn;
+}
+
+export const logger: Logger = {
+  info: (message, ...args) => {
+    console.info(message, ...args);
+  },
+  warn: (message, ...args) => {
+    console.warn(message, ...args);
+  },
+  error: (message, ...args) => {
+    console.error(message, ...args);
+  },
+};