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

ref #436

apps/stats-web/mvm.lock

@@ -4,6 +4,7 @@
     "@akashnetwork/ui": "1.0.0"
   },
   "devDependencies": {
-    "@akashnetwork/dev-config": "1.0.0"
+    "@akashnetwork/dev-config": "1.0.0",
+    "@akashnetwork/logging": "2.0.0"
   }
 }

apps/stats-web/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@akashnetwork/network-store": "*",
     "@akashnetwork/ui": "*",
-    "@akashnetwork/network-store": "*",
+    "@akashnetwork/logging": "2.0.0",
     "@cosmjs/encoding": "^0.32.4",
     "@json2csv/plainjs": "^7.0.4",
     "@nivo/line": "^0.87.0",

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

@@ -1,11 +1,14 @@
 "use client"; // Error components must be Client Components
 
 import { useEffect } from "react";
+import { LoggerService } from "@akashnetwork/logging";
+
+const blockErrorLogger = LoggerService.forContext("apps/stats-web/src/app/blocks/[height]/errors.tsx");
 
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
-    console.error(error);
+    blockErrorLogger.debug(error);
   }, [error]);
 
   return (

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

@@ -1,15 +1,18 @@
 "use client"; // Error components must be Client Components
 
 import { useEffect } from "react";
+import { LoggerService } from "@akashnetwork/logging";
 import { Button } from "@akashnetwork/ui/components";
 
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
 
+const errorLogger = LoggerService.forContext("apps/stats-web/src/app/error.tsx");
+
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   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

@@ -1,15 +1,18 @@
 "use client"; // Error components must be Client Components
 
 import { useEffect } from "react";
+import { LoggerService } from "@akashnetwork/logging";
 import { Button } from "@akashnetwork/ui/components";
 
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
 
+const transactionLogger = LoggerService.forContext("apps/stats-web/src/app/transactions/[hash]/errors.tsx");
+
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   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

@@ -1,4 +1,5 @@
 import React from "react";
+import { LoggerService } from "@akashnetwork/logging";
 import type { Network } from "@akashnetwork/network-store";
 import { Alert, Card, CardContent } from "@akashnetwork/ui/components";
 import type { Metadata } from "next";
@@ -14,6 +15,8 @@ import { getSplitText } from "@/hooks/useShortText";
 import { serverApiUrlService } from "@/services/api-url/server-api-url.service";
 import { TransactionDetail } from "@/types";
 
+const transactionLogger = LoggerService.forContext("apps/stats-web/src/app/transactions/[hash]/page.tsx");
+
 const TransactionDetailPageSchema = z.object({
   params: z.object({
     hash: z.string()
@@ -33,7 +36,7 @@ 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);
+  transactionLogger.debug(`DEBUG apiUrl: ${apiUrl}`);
   const response = await fetch(`${apiUrl}/v1/transactions/${hash}`);
 
   if (!response.ok && response.status !== 404) {

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

@@ -6,5 +6,6 @@ export const browserEnvConfig = validateStaticEnvVars({
   NEXT_PUBLIC_NODE_ENV: process.env.NEXT_PUBLIC_NODE_ENV,
   NEXT_PUBLIC_BASE_API_TESTNET_URL: process.env.NEXT_PUBLIC_BASE_API_TESTNET_URL,
   NEXT_PUBLIC_BASE_API_SANDBOX_URL: process.env.NEXT_PUBLIC_BASE_API_SANDBOX_URL,
-  NEXT_PUBLIC_BASE_API_MAINNET_URL: process.env.NEXT_PUBLIC_BASE_API_MAINNET_URL
+  NEXT_PUBLIC_BASE_API_MAINNET_URL: process.env.NEXT_PUBLIC_BASE_API_MAINNET_URL,
+  NEXT_PUBLIC_BASE_API_LOG_LEVEL: process.env.NEXT_PUBLIC_LOG_LEVEL
 });

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

@@ -1,5 +1,8 @@
+import { LoggerService } from "@akashnetwork/logging";
 import { z } from "zod";
 
+const configLogger = LoggerService.forContext('config');
+
 export const networkId = z.enum(["mainnet", "sandbox", "testnet"]);
 const coercedBoolean = () => z.enum(["true", "false"]).transform(val => val === "true");
 
@@ -9,7 +12,8 @@ export const browserEnvSchema = z.object({
   NEXT_PUBLIC_NODE_ENV: z.enum(["development", "production", "test"]).optional().default("development"),
   NEXT_PUBLIC_BASE_API_TESTNET_URL: z.string().url(),
   NEXT_PUBLIC_BASE_API_SANDBOX_URL: z.string().url(),
-  NEXT_PUBLIC_BASE_API_MAINNET_URL: z.string().url()
+  NEXT_PUBLIC_BASE_API_MAINNET_URL: z.string().url(),
+  NEXT_PUBLIC_LOG_LEVEL: z.enum(["fatal", "error", "warn", "info", "debug", "trace"]).optional().default("debug")
 });
 
 export const serverEnvSchema = browserEnvSchema.extend({
@@ -25,7 +29,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");
+    configLogger.info("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 libLogger = 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);
+    libLogger.debug("Fallback: Copying text command was " + msg);
   } catch (err) {
-    console.error("Fallback: Oops, unable to copy", err);
+    libLogger.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!");
+      libLogger.debug("Async: Copying to clipboard was successful!");
     },
     err => {
-      console.error("Async: Could not copy text: ", err);
+      libLogger.debug(`Async: Could not copy text: ${err}`);
     }
   );
 };

packages/logging/src/servicies/logger/logger.service.ts

@@ -34,7 +34,7 @@ export class LoggerService implements Logger {
       ...inputOptions
     };
 
-    if (typeof window === "undefined" && config.STD_OUT_LOG_FORMAT === "pretty") {
+    if (typeof window !== "undefined" && config.STD_OUT_LOG_FORMAT === "pretty") {
       options.transport = {
         target: "pino-pretty",
         options: { colorize: true, sync: true }

packages/ui/components/custom/file-button.tsx

@@ -1,4 +1,7 @@
-import React, { useRef, ChangeEvent } from "react";
+"use client";
+
+import React, { ChangeEvent, useRef } from "react";
+
 import { Button, ButtonProps } from "../button";
 
 interface FileButtonProps extends Omit<ButtonProps, "onChange"> {