[Front] BeautifyLogger (#82)

* Add Logger class for logging messages

* Add new level "throw" to Logger class

* Update version numbers in AdminNet, Database, ShopNet, and Table

* Update ObjectStorage and SignalR classes

* Update version number in ObjectStorage.ts

* Fix FileReader error handling in SignalR.ts

Author: Aloento

package.json

@@ -40,7 +40,6 @@
     "@microsoft/signalr-protocol-msgpack": "^8.0.0",
     "ahooks": "^3.7.8",
     "dayjs": "^1.11.10",
-    "debug": "^4.3.4",
     "dexie": "^3.2.4",
     "lexical": "^0.12.5",
     "lodash-es": "^4.17.21",
@@ -51,10 +50,9 @@
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@types/debug": "^4.1.12",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"

pnpm-lock.yaml

@@ -0,0 +1,110 @@
+import dayjs from "dayjs";
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 1.0.0
+ */
+const enum ANSI {
+  black = 30,
+  black_hl = 90,
+  balck_bg = 40,
+  black_bg_hl = 100,
+
+  red = 31,
+  red_hl = 91,
+  red_bg = 41,
+  red_bg_hl = 101,
+
+  green = 32,
+  green_hl = 92,
+  green_bg = 42,
+  green_bg_hl = 102,
+
+  yellow = 33,
+  yellow_hl = 93,
+  yellow_bg = 43,
+  yellow_bg_hl = 103,
+
+  blue = 34,
+  blue_hl = 94,
+  blue_bg = 44,
+  blue_bg_hl = 104,
+
+  magenta = 35,
+  magenta_hl = 95,
+  magenta_bg = 45,
+  magenta_bg_hl = 105,
+
+  cyan = 36,
+  cyan_hl = 96,
+  cyan_bg = 46,
+  cyan_bg_hl = 106,
+
+  white = 37,
+  white_hl = 97,
+  white_bg = 47,
+  white_bg_hl = 107,
+
+  default = 39,
+  default_bg = 49,
+};
+
+type level = "error" | "warn" | "info" | "debug" | "throw";
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 1.0.0
+ */
+export class Logger {
+  public readonly namespace;
+
+  public readonly info;
+  public readonly error;
+  public readonly warn;
+  public readonly debug;
+  public readonly throw;
+
+  public constructor(...namespace: string[]) {
+    this.namespace = namespace.join(":");
+
+    this.error = console.error.bind(this,
+      this.baseColor(
+        ANSI.red_bg_hl,
+        "error"
+      ), "\n\t");
+
+    this.warn = console.warn.bind(this,
+      this.baseColor(
+        ANSI.yellow_bg_hl,
+        "warn"
+      ), "\n\t");
+
+    this.info = console.info.bind(this,
+      this.baseColor(
+        ANSI.blue_bg_hl,
+        "info"
+      ), "\n\t");
+
+    this.debug = console.debug.bind(this,
+      this.baseColor(
+        ANSI.green_bg_hl,
+        "debug"
+      ), "\n\t");
+
+    this.throw = console.log.bind(this,
+      this.baseColor(
+        ANSI.magenta_bg_hl,
+        "throw"
+      ),
+      "↓ The Following Error is Thrown ↓"
+    );
+  }
+
+  private baseColor(color: ANSI, level: level): string {
+    return `\x1b[${color};${ANSI.black};1m ${level.toUpperCase()} `
+      + `\x1b[0m\x1b[${ANSI.black_bg_hl};${ANSI.white_hl}m ${dayjs().format("YY-M-D H:m:s")} `
+      + `\x1b[1m\x1b[${ANSI.balck_bg};${ANSI.white_hl}m ${this.namespace} `;
+  }
+}

src/Helpers/Logger.ts

@@ -13,7 +13,7 @@ export abstract class AdminNet extends SignalR {
   /**
    * @author Aloento
    * @since 1.0.0
-   * @version 0.1.1
+   * @version 0.1.2
    */
   public static readonly Hub = new HubConnectionBuilder()
     .withUrl(import.meta.env.DEV ? "https://localhost/AdminHub" : "https://awai.azurewebsites.net/AdminHub",
@@ -30,6 +30,7 @@ export abstract class AdminNet extends SignalR {
         },
       })
     .withAutomaticReconnect()
+    .withStatefulReconnect()
     .withHubProtocol(new MessagePackHubProtocol())
     .configureLogging(import.meta.env.DEV ? LogLevel.Debug : LogLevel.Information)
     .build();

src/ShopNet/Admin/AdminNet.ts

@@ -41,7 +41,7 @@ export const CartTable = DB.table<Omit<ICartItem, "Name" | "Cover">, never>("Sho
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.1
+ * @version 0.1.2
  */
 export const MSAL = new PublicClientApplication({
   auth: {
@@ -55,25 +55,16 @@ export const MSAL = new PublicClientApplication({
   },
   system: {
     loggerOptions: {
-      loggerCallback(level, message, containsPii) {
-        if (containsPii)
-          return;
-
+      loggerCallback(level, message) {
         switch (level) {
           case LogLevel.Error:
             console.error(message);
             return;
           case LogLevel.Warning:
             console.warn(message);
             return;
-          case LogLevel.Info:
-            console.info(message);
-            return;
-          case LogLevel.Verbose:
-            console.debug(message);
-            return;
           default:
-            console.trace(message);
+            console.debug(message);
         }
       }
     }

src/ShopNet/Database.ts

@@ -0,0 +1,15 @@
+import type { HubConnection } from "@microsoft/signalr";
+import type { Logger } from "~/Helpers/Logger";
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.2.0
+ */
+export interface INet {
+  Log: Logger;
+  Hub: HubConnection;
+
+  EnsureConnected: () => Promise<void>;
+  Invoke: <T>(methodName: string, ...args: any[]) => Promise<T>;
+}

src/ShopNet/INet.ts

@@ -1,13 +1,16 @@
 import { IStreamResult } from "@microsoft/signalr";
+import { Logger } from "~/Helpers/Logger";
 import { Shared } from "./Database";
 import { ShopNet } from "./ShopNet";
 
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.1.1
  */
 export class ObjectStorage extends ShopNet {
+  static Log = new Logger("ObjectStorage");
+
   /**
    * @author Aloento
    * @since 1.0.0
@@ -24,21 +27,22 @@ export class ObjectStorage extends ShopNet {
   /**
    * @author Aloento
    * @since 1.0.0
-   * @version 0.2.0
+   * @version 0.2.1
    */
   public static GetBySlice(objId: string): Promise<Uint8Array[]> {
     const slice: Uint8Array[] = [];
+    const my = this;
 
     return Shared.GetOrSet(objId, () => new Promise(
       (resolve, reject) => {
-        ObjectStorage.Get(objId).then(x =>
+        my.Get(objId).then(x =>
           x.subscribe({
             error(err) {
               reject(err);
             },
             next(value) {
               slice.push(value);
-              console.debug("Received Slice", objId, slice.length);
+              my.Log.debug("Received Slice", objId, slice.length);
             },
             complete() {
               resolve(slice);

src/ShopNet/ObjectStorage.ts

@@ -13,7 +13,7 @@ export abstract class ShopNet extends SignalR {
   /**
    * @author Aloento
    * @since 1.0.0
-   * @version 0.1.1
+   * @version 0.1.2
    */
   public static readonly Hub = new HubConnectionBuilder()
     .withUrl(import.meta.env.DEV ? "https://localhost/Hub" : "https://awai.azurewebsites.net/Hub",
@@ -30,6 +30,7 @@ export abstract class ShopNet extends SignalR {
         },
       })
     .withAutomaticReconnect()
+    .withStatefulReconnect()
     .withHubProtocol(new MessagePackHubProtocol())
     .configureLogging(import.meta.env.DEV ? LogLevel.Debug : LogLevel.Information)
     .build();