From ff14d8f49437b00be263b4fb76852bce563449b5 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 6 Jun 2024 22:19:54 +0200 Subject: [PATCH 1/5] Add Logger --- .eslintrc.js | 2 +- src/api/index.ts | 26 ++--- .../ScopeNavigation/HistoryManager.ts | 31 ++++-- src/globals.d.ts | 1 + src/logger.ts | 6 ++ src/logging/Logger.ts | 94 +++++++++++++++++++ src/logging/TaggedLogger.ts | 36 +++++++ src/logging/types.ts | 7 ++ 8 files changed, 185 insertions(+), 18 deletions(-) create mode 100644 src/logger.ts create mode 100644 src/logging/Logger.ts create mode 100644 src/logging/TaggedLogger.ts create mode 100644 src/logging/types.ts diff --git a/.eslintrc.js b/.eslintrc.js index f5f66e2bb..5f70f742f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -26,7 +26,7 @@ module.exports = { plugins: ["react", "@typescript-eslint"], rules: { curly: "error", - "no-console": "warn", + "no-console": "error", "no-useless-return": "error", "react/jsx-boolean-value": ["error", "always"], "react/jsx-curly-brace-presence": ["error", "always"] diff --git a/src/api/index.ts b/src/api/index.ts index 87e152fb6..9153791e6 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,9 +1,13 @@ +import { logger } from "../logger"; +import { TaggedLogger } from "../logging/TaggedLogger"; import { platform } from "../platform"; import { isObject } from "../typeGuards/isObject"; import { ActionDispatcher } from "./ActionDispatcher"; import { DigmaMessageEvent, DigmaOutgoingMessageData } from "./types"; import { sendMessageToWebService } from "./web/sendMessageToWebService"; +const messagingLogger = new TaggedLogger(logger, "MESSAGING"); + const isDigmaMessageEvent = (e: MessageEvent): e is DigmaMessageEvent => isObject(e.data) && e.data.type === "digma"; @@ -19,8 +23,8 @@ export const initializeDigmaMessageListener = ( ) => { const handleDigmaMessage = (e: MessageEvent) => { if (isDigmaMessageEvent(e)) { - console.debug( - `Digma message received: %c${e.data.action} + logger.debug( + `Message received: %c${e.data.action} %cRaw message: %O`, INCOMING_MESSAGE_ACTION_ID_CONSOLE_STYLE, null, @@ -40,9 +44,9 @@ export const initializeDigmaMessageListener = ( export const sendMessage = ( message: DigmaOutgoingMessageData ): string | undefined => { - console.debug( - `Digma message to sent: ${message.action} - Raw message: %O`, + messagingLogger.debug( + `Message to sent: ${message.action} +Raw message: %O`, message ); @@ -53,8 +57,8 @@ export const sendMessage = ( case "VS Code": if (window.sendMessageToVSCode) { window.sendMessageToVSCode(message); - console.debug( - `Digma message has been successfully sent to VS Code: %c${message.action} + messagingLogger.debug( + `Message has been successfully sent to VS Code: %c${message.action} %cRaw message: %O`, OUTGOING_MESSAGE_ACTION_ID_CONSOLE_STYLE, null, @@ -67,8 +71,8 @@ export const sendMessage = ( return window.cefQuery({ request: JSON.stringify(message), onSuccess: function (response) { - console.debug( - `Digma message has been successfully handled by JCEF: %c${message.action} + messagingLogger.debug( + `Message has been successfully handled by JCEF: %c${message.action} %cRaw message: %O Response: %O`, OUTGOING_MESSAGE_ACTION_ID_CONSOLE_STYLE, @@ -78,8 +82,8 @@ Response: %O`, ); }, onFailure: function (error_code: number, error_message: string) { - console.error( - `Digma message has failed to be handled by JCEF: %c${message.action} + messagingLogger.error( + `Failed to handle the message by JCEF: %c${message.action} %cRaw message: %O %cError code: %d Error message: %s`, diff --git a/src/components/Navigation/ScopeNavigation/HistoryManager.ts b/src/components/Navigation/ScopeNavigation/HistoryManager.ts index ccbf60824..0ac62f52f 100644 --- a/src/components/Navigation/ScopeNavigation/HistoryManager.ts +++ b/src/components/Navigation/ScopeNavigation/HistoryManager.ts @@ -1,3 +1,5 @@ +import { logger as baseLogger } from "../../../logger"; +import { TaggedLogger } from "../../../logging/TaggedLogger"; import { Environment, Scope } from "../../common/App/types"; const MAX_STEPS = 15; @@ -32,7 +34,8 @@ export class HistoryManager { private current: Node | null = null; private itemsCount = 0; private currentIndex = -1; - private debug = false; + + private logger = new TaggedLogger(baseLogger, "HISTORY"); constructor(data?: HistoryData) { if (data) { @@ -71,7 +74,11 @@ export class HistoryManager { this.itemsCount++; } - this.debug && console.log("History pushed: ", this.getHistoryData()); + this.logger.debug( + `New frame pushed +History state: %O`, + this.getHistoryData() + ); } canMoveBack() { @@ -89,7 +96,11 @@ export class HistoryManager { this.current = this.current.previous; this.currentIndex--; - this.debug && console.log("History back: ", this.getHistoryData()); + this.logger.debug( + `Navigated back +History state: %O`, + this.getHistoryData() + ); return this.getCurrent(); } @@ -108,7 +119,12 @@ export class HistoryManager { this.current = this.current.next; this.currentIndex++; - this.debug && console.log("History forward: ", this.getHistoryData()); + this.logger.debug( + `Navigated forward +History state: %O`, + this.getHistoryData() + ); + return this.getCurrent(); } @@ -125,8 +141,11 @@ export class HistoryManager { this.current.value = { ...this.current.value, ...newValue }; } - this.debug && - console.log("History current updated: ", this.getHistoryData()); + this.logger.debug( + `Current frame updated +History state: %O`, + this.getHistoryData() + ); } getHistoryData() { diff --git a/src/globals.d.ts b/src/globals.d.ts index 21c3da944..6572a2b32 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -56,6 +56,7 @@ declare global { isDigmathonModeEnabled?: unknown; userId?: unknown; isDigmathonGameFinished?: unknown; + isLoggingEnabled?: unknown; } } diff --git a/src/logger.ts b/src/logger.ts new file mode 100644 index 000000000..3cf255722 --- /dev/null +++ b/src/logger.ts @@ -0,0 +1,6 @@ +import { Logger } from "./logging/Logger"; +import { LOG_LEVEL } from "./logging/types"; + +export const logger = new Logger( + window.isLoggingEnabled === true ? LOG_LEVEL.DEBUG : LOG_LEVEL.NONE +); diff --git a/src/logging/Logger.ts b/src/logging/Logger.ts new file mode 100644 index 000000000..e9e1a6021 --- /dev/null +++ b/src/logging/Logger.ts @@ -0,0 +1,94 @@ +import { format } from "date-fns"; +import { LOG_LEVEL } from "./types"; + +export class Logger { + private logLevel: number; + private showTimeStamp: boolean; + private showLogLevel: boolean; + + public constructor( + logLevel: LOG_LEVEL, + showTimeStamp = true, + showLogLevel = true + ) { + this.logLevel = logLevel; + this.showTimeStamp = showTimeStamp; + this.showLogLevel = showLogLevel; + } + + public setLogLevel(logLevel: LOG_LEVEL): void { + this.logLevel = logLevel; + } + + private getTimestampTag(): string { + return format(new Date(), "HH:mm:ss"); + } + + private getLogLevelTag(): string { + return LOG_LEVEL[this.logLevel]; + } + + private getFormattedMessage(tags: string[], message: unknown): string { + if (this.showTimeStamp) { + tags.unshift(this.getTimestampTag()); + } + + if (this.showLogLevel) { + tags.unshift(this.getLogLevelTag()); + } + + const tagsString = tags.map((x) => `[${x}]`).join(""); + + return `${tagsString}: ${message as string}`; + } + + public log( + level: LOG_LEVEL, + tags: string[], + message?: unknown, + ...optionalParams: unknown[] + ): void { + const formattedMessage = this.getFormattedMessage(tags, message); + + if (this.logLevel > level) { + return; + } + + switch (level) { + case LOG_LEVEL.DEBUG: + // eslint-disable-next-line no-console + console.debug(formattedMessage, ...optionalParams); + break; + case LOG_LEVEL.INFO: + // eslint-disable-next-line no-console + console.info(formattedMessage, ...optionalParams); + break; + case LOG_LEVEL.WARN: + // eslint-disable-next-line no-console + console.warn(formattedMessage, ...optionalParams); + break; + case LOG_LEVEL.ERROR: + // eslint-disable-next-line no-console + console.error(formattedMessage, ...optionalParams); + break; + default: + break; + } + } + + public debug(message?: unknown, ...optionalParams: unknown[]): void { + this.log(LOG_LEVEL.DEBUG, [], message, ...optionalParams); + } + + public info(message?: unknown, ...optionalParams: unknown[]): void { + this.log(LOG_LEVEL.INFO, [], message, ...optionalParams); + } + + public warn(message?: unknown, ...optionalParams: unknown[]): void { + this.log(LOG_LEVEL.WARN, [], message, ...optionalParams); + } + + public error(message?: unknown, ...optionalParams: unknown[]): void { + this.log(LOG_LEVEL.ERROR, [], message, ...optionalParams); + } +} diff --git a/src/logging/TaggedLogger.ts b/src/logging/TaggedLogger.ts new file mode 100644 index 000000000..b31831d70 --- /dev/null +++ b/src/logging/TaggedLogger.ts @@ -0,0 +1,36 @@ +import { Logger } from "./Logger"; +import { LOG_LEVEL } from "./types"; + +export class TaggedLogger { + private logger: Logger; + private tag: string; + + constructor(logger: Logger, tag: string) { + this.logger = logger; + this.tag = tag; + } + + public log( + level: LOG_LEVEL, + message?: unknown, + ...optionalParams: unknown[] + ): void { + this.logger.log(level, [this.tag], message, ...optionalParams); + } + + public debug(message?: unknown, ...optionalParams: unknown[]): void { + this.log(LOG_LEVEL.DEBUG, message, ...optionalParams); + } + + public info(message?: unknown, ...optionalParams: unknown[]): void { + this.log(LOG_LEVEL.INFO, message, ...optionalParams); + } + + public warn(message?: unknown, ...optionalParams: unknown[]): void { + this.log(LOG_LEVEL.WARN, message, ...optionalParams); + } + + public error(message?: unknown, ...optionalParams: unknown[]): void { + this.log(LOG_LEVEL.ERROR, message, ...optionalParams); + } +} diff --git a/src/logging/types.ts b/src/logging/types.ts new file mode 100644 index 000000000..15d4244cc --- /dev/null +++ b/src/logging/types.ts @@ -0,0 +1,7 @@ +export enum LOG_LEVEL { + DEBUG = 0, + INFO = 1, + WARN = 2, + ERROR = 3, + NONE = 4 +} From a89a917e219fe519d75545c28f331d0ce9ccc9b7 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 6 Jun 2024 22:37:00 +0200 Subject: [PATCH 2/5] Prettify --- src/logging/Logger.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/logging/Logger.ts b/src/logging/Logger.ts index e9e1a6021..c5599ecd7 100644 --- a/src/logging/Logger.ts +++ b/src/logging/Logger.ts @@ -16,10 +16,6 @@ export class Logger { this.showLogLevel = showLogLevel; } - public setLogLevel(logLevel: LOG_LEVEL): void { - this.logLevel = logLevel; - } - private getTimestampTag(): string { return format(new Date(), "HH:mm:ss"); } @@ -42,6 +38,10 @@ export class Logger { return `${tagsString}: ${message as string}`; } + public setLogLevel(logLevel: LOG_LEVEL): void { + this.logLevel = logLevel; + } + public log( level: LOG_LEVEL, tags: string[], From eaa176a534c4361c3431ffd90899088d66764c8e Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 7 Jun 2024 00:10:17 +0200 Subject: [PATCH 3/5] Fix linter errors --- src/api/web/services/about.ts | 3 ++- src/api/web/services/dashboard.ts | 3 ++- src/api/web/services/environments.ts | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/api/web/services/about.ts b/src/api/web/services/about.ts index b06421466..d46086d99 100644 --- a/src/api/web/services/about.ts +++ b/src/api/web/services/about.ts @@ -1,5 +1,6 @@ import { actions as globalActions } from "../../../actions"; import { BackendInfo } from "../../../components/common/App/types"; +import { logger } from "../../../logger"; import { client } from "../client"; type GetAboutResponse = BackendInfo; @@ -14,6 +15,6 @@ export const getAboutInfo = async () => { payload: response.data }); } catch (e) { - console.error(e); + logger.error(e); } }; diff --git a/src/api/web/services/dashboard.ts b/src/api/web/services/dashboard.ts index c8031d5c0..66764b99e 100644 --- a/src/api/web/services/dashboard.ts +++ b/src/api/web/services/dashboard.ts @@ -1,5 +1,6 @@ import { AxiosError } from "axios"; import { actions as dashboardActions } from "../../../components/Dashboard/actions"; +import { logger } from "../../../logger"; import { client } from "../client"; export interface GetDashboardParams { @@ -29,7 +30,7 @@ export const getDashboard = async ( payload: response.data }); } catch (e) { - console.error(e); + logger.error(e); let errorMessage = e instanceof Error ? e.message : "Unknown error"; if (e instanceof AxiosError && e.response?.status === 404) { errorMessage = "Backend version is outdated. Please update Digma."; diff --git a/src/api/web/services/environments.ts b/src/api/web/services/environments.ts index 6535c0ff4..ace9d58b2 100644 --- a/src/api/web/services/environments.ts +++ b/src/api/web/services/environments.ts @@ -1,3 +1,4 @@ +import { logger } from "../../../logger"; import { client } from "../client"; export interface GetEnvironmentParams { @@ -28,7 +29,7 @@ export const getEnvironment = async ( payload: response.data }); } catch (e) { - console.error(e); + logger.error(e); const errorMessage = e instanceof Error ? e.message : "Unknown error"; window.postMessage({ From 9b574600ea9568a9e52bb6ad88a25d00cde33808 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 7 Jun 2024 11:39:48 +0200 Subject: [PATCH 4/5] Update naming --- src/api/index.ts | 2 +- src/api/web/services/about.ts | 2 +- src/api/web/services/dashboard.ts | 2 +- src/api/web/services/environments.ts | 2 +- .../Navigation/ScopeNavigation/HistoryManager.ts | 2 +- src/logging/Logger.ts | 14 +++++++------- src/{logger.ts => logging/index.ts} | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) rename src/{logger.ts => logging/index.ts} (55%) diff --git a/src/api/index.ts b/src/api/index.ts index 9153791e6..b89fe510e 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,4 +1,4 @@ -import { logger } from "../logger"; +import { logger } from "../logging"; import { TaggedLogger } from "../logging/TaggedLogger"; import { platform } from "../platform"; import { isObject } from "../typeGuards/isObject"; diff --git a/src/api/web/services/about.ts b/src/api/web/services/about.ts index d46086d99..8a993ea5d 100644 --- a/src/api/web/services/about.ts +++ b/src/api/web/services/about.ts @@ -1,6 +1,6 @@ import { actions as globalActions } from "../../../actions"; import { BackendInfo } from "../../../components/common/App/types"; -import { logger } from "../../../logger"; +import { logger } from "../../../logging"; import { client } from "../client"; type GetAboutResponse = BackendInfo; diff --git a/src/api/web/services/dashboard.ts b/src/api/web/services/dashboard.ts index 66764b99e..4d986a5b0 100644 --- a/src/api/web/services/dashboard.ts +++ b/src/api/web/services/dashboard.ts @@ -1,6 +1,6 @@ import { AxiosError } from "axios"; import { actions as dashboardActions } from "../../../components/Dashboard/actions"; -import { logger } from "../../../logger"; +import { logger } from "../../../logging"; import { client } from "../client"; export interface GetDashboardParams { diff --git a/src/api/web/services/environments.ts b/src/api/web/services/environments.ts index ace9d58b2..16f5da2ac 100644 --- a/src/api/web/services/environments.ts +++ b/src/api/web/services/environments.ts @@ -1,4 +1,4 @@ -import { logger } from "../../../logger"; +import { logger } from "../../../logging"; import { client } from "../client"; export interface GetEnvironmentParams { diff --git a/src/components/Navigation/ScopeNavigation/HistoryManager.ts b/src/components/Navigation/ScopeNavigation/HistoryManager.ts index 0ac62f52f..7919872a9 100644 --- a/src/components/Navigation/ScopeNavigation/HistoryManager.ts +++ b/src/components/Navigation/ScopeNavigation/HistoryManager.ts @@ -1,4 +1,4 @@ -import { logger as baseLogger } from "../../../logger"; +import { logger as baseLogger } from "../../../logging"; import { TaggedLogger } from "../../../logging/TaggedLogger"; import { Environment, Scope } from "../../common/App/types"; diff --git a/src/logging/Logger.ts b/src/logging/Logger.ts index c5599ecd7..f38f3a11e 100644 --- a/src/logging/Logger.ts +++ b/src/logging/Logger.ts @@ -2,16 +2,16 @@ import { format } from "date-fns"; import { LOG_LEVEL } from "./types"; export class Logger { - private logLevel: number; + private minLogLevel: number; private showTimeStamp: boolean; private showLogLevel: boolean; - public constructor( - logLevel: LOG_LEVEL, + constructor( + minLogLevel: LOG_LEVEL, showTimeStamp = true, showLogLevel = true ) { - this.logLevel = logLevel; + this.minLogLevel = minLogLevel; this.showTimeStamp = showTimeStamp; this.showLogLevel = showLogLevel; } @@ -21,7 +21,7 @@ export class Logger { } private getLogLevelTag(): string { - return LOG_LEVEL[this.logLevel]; + return LOG_LEVEL[this.minLogLevel]; } private getFormattedMessage(tags: string[], message: unknown): string { @@ -39,7 +39,7 @@ export class Logger { } public setLogLevel(logLevel: LOG_LEVEL): void { - this.logLevel = logLevel; + this.minLogLevel = logLevel; } public log( @@ -50,7 +50,7 @@ export class Logger { ): void { const formattedMessage = this.getFormattedMessage(tags, message); - if (this.logLevel > level) { + if (this.minLogLevel > level) { return; } diff --git a/src/logger.ts b/src/logging/index.ts similarity index 55% rename from src/logger.ts rename to src/logging/index.ts index 3cf255722..c9005d581 100644 --- a/src/logger.ts +++ b/src/logging/index.ts @@ -1,5 +1,5 @@ -import { Logger } from "./logging/Logger"; -import { LOG_LEVEL } from "./logging/types"; +import { Logger } from "./Logger"; +import { LOG_LEVEL } from "./types"; export const logger = new Logger( window.isLoggingEnabled === true ? LOG_LEVEL.DEBUG : LOG_LEVEL.NONE From 35c62d74fc87060b479be1d630bd70934efe0bf7 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 7 Jun 2024 13:55:27 +0200 Subject: [PATCH 5/5] Fix log format --- src/logging/Logger.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/logging/Logger.ts b/src/logging/Logger.ts index f38f3a11e..ca422ca50 100644 --- a/src/logging/Logger.ts +++ b/src/logging/Logger.ts @@ -25,14 +25,14 @@ export class Logger { } private getFormattedMessage(tags: string[], message: unknown): string { - if (this.showTimeStamp) { - tags.unshift(this.getTimestampTag()); - } - if (this.showLogLevel) { tags.unshift(this.getLogLevelTag()); } + if (this.showTimeStamp) { + tags.unshift(this.getTimestampTag()); + } + const tagsString = tags.map((x) => `[${x}]`).join(""); return `${tagsString}: ${message as string}`;