From 7c994da8f54921e5f26e663fa7f47bbdefb28be0 Mon Sep 17 00:00:00 2001 From: forbesus Date: Tue, 26 Nov 2024 01:48:04 -0800 Subject: [PATCH] feat(observability): utilise new logger in stats-web ref #436 --- apps/stats-web/mvm.lock | 3 ++- apps/stats-web/next.config.js | 8 ++++++++ apps/stats-web/package.json | 1 + apps/stats-web/src/app/blocks/[height]/errors.tsx | 5 ++++- apps/stats-web/src/app/error.tsx | 5 ++++- apps/stats-web/src/app/transactions/[hash]/error.tsx | 5 ++++- apps/stats-web/src/app/transactions/[hash]/page.tsx | 5 ++++- apps/stats-web/src/lib/copyClipboard.ts | 12 ++++++++---- .../logging/src/servicies/logger/logger.service.ts | 4 ++-- 9 files changed, 37 insertions(+), 11 deletions(-) diff --git a/apps/stats-web/mvm.lock b/apps/stats-web/mvm.lock index 0d99ab6a5..aef04c977 100644 --- a/apps/stats-web/mvm.lock +++ b/apps/stats-web/mvm.lock @@ -1,7 +1,8 @@ { "dependencies": { "@akashnetwork/network-store": "1.0.1", - "@akashnetwork/ui": "1.0.0" + "@akashnetwork/ui": "1.0.0", + "@akashnetwork/logging": "2.0.1" }, "devDependencies": { "@akashnetwork/dev-config": "1.0.0" diff --git a/apps/stats-web/next.config.js b/apps/stats-web/next.config.js index 273c77080..0b2a7f051 100644 --- a/apps/stats-web/next.config.js +++ b/apps/stats-web/next.config.js @@ -13,6 +13,14 @@ try { /** @type {import('next').NextConfig} */ const nextConfig = { + webpack: (config, { isServer }) => { + if (isServer) { + if (process.env.NODE_ENV !== 'production') { + config.externals = [...config.externals, 'pino', 'pino-pretty']; + } + } + return config; + }, output: "standalone", publicRuntimeConfig: { version diff --git a/apps/stats-web/package.json b/apps/stats-web/package.json index c9a54267f..550ad3381 100644 --- a/apps/stats-web/package.json +++ b/apps/stats-web/package.json @@ -13,6 +13,7 @@ "dependencies": { "@akashnetwork/network-store": "*", "@akashnetwork/ui": "*", + "@akashnetwork/logging": "*", "@cosmjs/encoding": "^0.32.4", "@json2csv/plainjs": "^7.0.4", "@nivo/line": "^0.87.0", diff --git a/apps/stats-web/src/app/blocks/[height]/errors.tsx b/apps/stats-web/src/app/blocks/[height]/errors.tsx index 65ae27eb5..544fb5b83 100644 --- a/apps/stats-web/src/app/blocks/[height]/errors.tsx +++ b/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 ( diff --git a/apps/stats-web/src/app/error.tsx b/apps/stats-web/src/app/error.tsx index c6ede3758..a0c686d6b 100644 --- a/apps/stats-web/src/app/error.tsx +++ b/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 ( diff --git a/apps/stats-web/src/app/transactions/[hash]/error.tsx b/apps/stats-web/src/app/transactions/[hash]/error.tsx index c6ede3758..6eb7b774d 100644 --- a/apps/stats-web/src/app/transactions/[hash]/error.tsx +++ b/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 ( diff --git a/apps/stats-web/src/app/transactions/[hash]/page.tsx b/apps/stats-web/src/app/transactions/[hash]/page.tsx index 76bc605b6..2f2ab4477 100644 --- a/apps/stats-web/src/app/transactions/[hash]/page.tsx +++ b/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 { 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) { diff --git a/apps/stats-web/src/lib/copyClipboard.ts b/apps/stats-web/src/lib/copyClipboard.ts index 9744acbdc..d914d7436 100644 --- a/apps/stats-web/src/lib/copyClipboard.ts +++ b/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}`); } ); }; diff --git a/packages/logging/src/servicies/logger/logger.service.ts b/packages/logging/src/servicies/logger/logger.service.ts index b1ccca278..25034da6e 100644 --- a/packages/logging/src/servicies/logger/logger.service.ts +++ b/packages/logging/src/servicies/logger/logger.service.ts @@ -48,13 +48,13 @@ export class LoggerService implements Logger { } setContext(context: string) { - this.pino.setBindings({ context }); + this.pino.child({ context }); return this; } bind(bindings: pino.Bindings) { - this.pino.setBindings(bindings); + this.pino.child(bindings); return this; }