feat(observability): utilise new logger in stats-web

closes #436

apps/stats-web/src/app/blocks/[height]/errors.tsx

@@ -2,10 +2,13 @@
 
 import { useEffect } from "react";
 
+import { useLogger } from "@/hooks/useLogger";
+
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const blockErrorLogger = useLogger("apps/stats-web/src/app/blocks/[height]/errors.tsx");
   useEffect(() => {
     // Log the error to an error reporting service
-    console.error(error);
+    blockErrorLogger.debug(error);
   }, [error]);
 
   return (

apps/stats-web/src/app/error.tsx

@@ -5,11 +5,13 @@ import { Button } from "@akashnetwork/ui/components";
 
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
+import { useLogger } from "@/hooks/useLogger";
 
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const errorLogger = useLogger("apps/stats-web/src/app/error.tsx");
   useEffect(() => {
     // Log the error to an error reporting service
-    console.error(error);
+    errorLogger.debug(error);
   }, [error]);
 
   return (

apps/stats-web/src/app/transactions/[hash]/error.tsx

@@ -5,11 +5,13 @@ import { Button } from "@akashnetwork/ui/components";
 
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
+import { useLogger } from "@/hooks/useLogger";
 
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const transactionLogger = useLogger("apps/stats-web/src/app/transactions/[hash]/errors.tsx");
   useEffect(() => {
     // Log the error to an error reporting service
-    console.error(error);
+    transactionLogger.debug(error);
   }, [error]);
 
   return (

apps/stats-web/src/app/transactions/[hash]/page.tsx

@@ -33,16 +33,14 @@ export async function generateMetadata({ params: { hash } }: TransactionDetailPa
 
 async function fetchTransactionData(hash: string, network: Network["id"]): Promise<TransactionDetail | null> {
   const apiUrl = serverApiUrlService.getBaseApiUrlFor(network);
-  console.log("DEBUG apiUrl", apiUrl);
   const response = await fetch(`${apiUrl}/v1/transactions/${hash}`);
-
+  
   if (!response.ok && response.status !== 404) {
     // This will activate the closest `error.js` Error Boundary
     throw new Error("Error fetching transaction data");
   } else if (response.status === 404) {
     return null;
   }
-
   return response.json();
 }
 
@@ -52,7 +50,6 @@ export default async function TransactionDetailPage(props: TransactionDetailPage
     searchParams: { network }
   } = TransactionDetailPageSchema.parse(props);
   const transaction = await fetchTransactionData(hash, network);
-
   return (
     <PageContainer>
       <Title className="mb-4">Transaction Details</Title>

apps/stats-web/src/config/env-config.schema.ts

@@ -1,7 +1,9 @@
+import { LoggerService } from "@akashnetwork/logging";
 import { z } from "zod";
 
 export const networkId = z.enum(["mainnet", "sandbox", "testnet"]);
 const coercedBoolean = () => z.enum(["true", "false"]).transform(val => val === "true");
+const envLogger = LoggerService.forContext("apps/stats-web/src/config/env-config.schema.ts");
 
 export const browserEnvSchema = z.object({
   NEXT_PUBLIC_DEFAULT_NETWORK_ID: networkId.optional().default("mainnet"),
@@ -26,7 +28,7 @@ export type ServerEnvConfig = z.infer<typeof serverEnvSchema>;
 export const validateStaticEnvVars = (config: Record<string, unknown>) => browserEnvSchema.parse(config);
 export const validateRuntimeEnvVars = (config: Record<string, unknown>) => {
   if (process.env.NEXT_PHASE === "phase-production-build") {
-    console.log("Skipping validation of serverEnvConfig during build");
+    envLogger.debug("Skipping validation of serverEnvConfig during build");
     return config as ServerEnvConfig;
   } else {
     return serverEnvSchema.parse(config);

apps/stats-web/src/lib/copyClipboard.ts

@@ -1,3 +1,7 @@
+import { LoggerService } from "@akashnetwork/logging";
+
+const clipboardLogger = LoggerService.forContext("apps/stats-web/src/lib/copyClipboard.ts");
+
 function fallbackCopyTextToClipboard(text: string) {
   const textArea = document.createElement("textarea");
   textArea.value = text;
@@ -14,9 +18,9 @@ function fallbackCopyTextToClipboard(text: string) {
   try {
     const successful = document.execCommand("copy");
     const msg = successful ? "successful" : "unsuccessful";
-    console.log("Fallback: Copying text command was " + msg);
+    clipboardLogger.debug("Fallback: Copying text command was " + msg);
   } catch (err) {
-    console.error("Fallback: Oops, unable to copy", err);
+    clipboardLogger.debug(`Fallback: Oops, unable to copy: ${err}`);
   }
 
   document.body.removeChild(textArea);
@@ -28,10 +32,10 @@ export const copyTextToClipboard = (text: string) => {
   }
   navigator.clipboard.writeText(text).then(
     () => {
-      console.log("Async: Copying to clipboard was successful!");
+      clipboardLogger.debug("Async: Copying to clipboard was successful!");
     },
     err => {
-      console.error("Async: Could not copy text: ", err);
+      clipboardLogger.debug(`Async: Could not copy text: ${err}`);
     }
   );
 };