Add Logger

.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"]

src/api/index.ts

@@ -1,9 +1,13 @@
+import { logger } from "../logging";
+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,8 +44,8 @@ export const initializeDigmaMessageListener = (
 export const sendMessage = <T>(
   message: DigmaOutgoingMessageData<T>
 ): string | undefined => {
-  console.debug(
-    `Digma message to sent: ${message.action}
+  messagingLogger.debug(
+    `Message to sent: ${message.action}
 Raw message: %O`,
     message
   );
@@ -53,8 +57,8 @@ Raw message: %O`,
     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 @@ Raw message: %O`,
         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`,

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 "../../../logging";
 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);
   }
 };

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 "../../../logging";
 import { client } from "../client";
 
 export interface GetDashboardParams<T> {
@@ -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.";

src/api/web/services/environments.ts

@@ -1,3 +1,4 @@
+import { logger } from "../../../logging";
 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({

src/components/Navigation/ScopeNavigation/HistoryManager.ts

@@ -1,3 +1,5 @@
+import { logger as baseLogger } from "../../../logging";
+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<HistoryStep> | 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() {

src/globals.d.ts

@@ -56,6 +56,7 @@ declare global {
     isDigmathonModeEnabled?: unknown;
     userId?: unknown;
     isDigmathonGameFinished?: unknown;
+    isLoggingEnabled?: unknown;
   }
 }
 

src/logging/Logger.ts

@@ -0,0 +1,94 @@
+import { format } from "date-fns";
+import { LOG_LEVEL } from "./types";
+
+export class Logger {
+  private minLogLevel: number;
+  private showTimeStamp: boolean;
+  private showLogLevel: boolean;
+
+  constructor(
+    minLogLevel: LOG_LEVEL,
+    showTimeStamp = true,
+    showLogLevel = true
+  ) {
+    this.minLogLevel = minLogLevel;
+    this.showTimeStamp = showTimeStamp;
+    this.showLogLevel = showLogLevel;
+  }
+
+  private getTimestampTag(): string {
+    return format(new Date(), "HH:mm:ss");
+  }
+
+  private getLogLevelTag(): string {
+    return LOG_LEVEL[this.minLogLevel];
+  }
+
+  private getFormattedMessage(tags: string[], message: unknown): string {
+    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}`;
+  }
+
+  public setLogLevel(logLevel: LOG_LEVEL): void {
+    this.minLogLevel = logLevel;
+  }
+
+  public log(
+    level: LOG_LEVEL,
+    tags: string[],
+    message?: unknown,
+    ...optionalParams: unknown[]
+  ): void {
+    const formattedMessage = this.getFormattedMessage(tags, message);
+
+    if (this.minLogLevel > 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);
+  }
+}

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);
+  }
+}

src/logging/index.ts

@@ -0,0 +1,6 @@
+import { Logger } from "./Logger";
+import { LOG_LEVEL } from "./types";
+
+export const logger = new Logger(
+  window.isLoggingEnabled === true ? LOG_LEVEL.DEBUG : LOG_LEVEL.NONE
+);

src/logging/types.ts

@@ -0,0 +1,7 @@
+export enum LOG_LEVEL {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3,
+  NONE = 4
+}