@viplance/nestjs-logger 0.3.7 → 0.4.0

package/public/scripts/common.js

@@ -12,9 +12,7 @@ const logTypes = Object.keys(selectedLogTypes).filter((key) => key !== `all`);
 let logs = [];
 let text = "";
 
-window.addEventListener("load", async () => {
-  getLogs();
-});
+connectWebSocket();
 
 document.addEventListener(`click`, (e) => {
   const target = e.target;
@@ -69,7 +67,14 @@ document.addEventListener(`click`, (e) => {
     (target.classList?.contains(`row`) && target.id);
 
   if (logId) {
-    const log = logs.find((log) => log._id === logId);
+    let id = logId;
+
+    try {
+      if (Number(id) > 0) id = Number(id); // SQL DB numeric index
+    } catch (e) {}
+
+    const log = logs.find((log) => log._id === id);
+
     showLogDetails(log);
   }
 });
@@ -133,10 +138,10 @@ function getLogHtmlElement(log) {
     </div>`;
 }
 
-function renderLogs() {
+function renderLogs(logList = logs) {
   let html = "";
 
-  logs
+  logList
     .filter((log) => {
       return selectedLogTypes["all"] || selectedLogTypes[log.type];
     })
@@ -158,50 +163,83 @@ function renderLogs() {
   document.getElementById("logs").innerHTML = html;
 }
 
+async function checkElementsVisibility(logList = logs) {
+  if (logList.length === 0) {
+    document.getElementById("no-logs").style.display = "block";
+    document.getElementById("search").style.display = "none";
+    document.querySelector(".table-header").style.display = "none";
+    document.querySelector("nav").style.display = "none";
+  } else {
+    document.getElementById("no-logs").style.display = "none";
+    document.getElementById("search").style.display = "inline-block";
+    document.querySelector(".table-header").style.display = "flex";
+    document.querySelector("nav").style.display = "flex";
+  }
+}
+
 async function getLogs() {
   const { origin, pathname, search } = window.location;
+  const searchParams = new URLSearchParams(search);
+  const key = searchParams.get("key");
+
+  if (!!socket) {
+    socket.send(
+      JSON.stringify({
+        action: "getLogs",
+        key,
+      })
+    );
+  } else {
+    const res = await fetch(`${origin}${pathname}api${search}`);
 
-  const res = await fetch(`${origin}${pathname}api${search}`);
+    if (res.ok) {
+      logs = await res.json();
 
-  if (res.ok) {
-    logs = await res.json();
+      checkElementsVisibility();
 
-    if (logs.length === 0) {
-      document.getElementById("no-logs").style.display = "block";
-      document.querySelector(".table-header").style.display = "none";
-      document.querySelector("nav").style.display = "none";
+      renderLogs();
     } else {
-      document.getElementById("no-logs").style.display = "none";
-      document.querySelector(".table-header").style.display = "flex";
-      document.querySelector("nav").style.display = "flex";
+      alert("An error occurred while fetching logs.");
     }
-
-    renderLogs();
-  } else {
-    alert("An error occurred while fetching logs.");
   }
 }
 
-async function deleteLog(id) {
+async function deleteLog(_id) {
   if (!confirm("Are you sure? It can't be undone.")) return;
 
   const { origin, pathname, search: searchParams } = window.location;
 
   const searchParamsWithId = new URLSearchParams(searchParams);
-  searchParamsWithId.set("id", id);
-
-  const res = await fetch(
-    `${origin}${pathname}api?${searchParamsWithId.toString()}`,
-    {
-      method: "DELETE",
-    }
-  );
-
-  if (res.ok) {
+  const key = searchParamsWithId.get("key");
+
+  if (!!socket) {
+    socket.send(
+      JSON.stringify({
+        action: "delete",
+        key,
+        data: {
+          _id,
+        },
+      })
+    );
     closePopup();
     getLogs();
   } else {
-    alert("An error occurred while deleting log.");
+    searchParamsWithId.set("id", _id);
+
+    const res = await fetch(
+      `${origin}${pathname}api?${searchParamsWithId.toString()}`,
+      {
+        method: "DELETE",
+      }
+    );
+
+    if (res.ok) {
+      closePopup();
+      getLogs();
+    } else {
+      alert("An error occurred while deleting log.");
+    }
   }
 }
 

package/public/scripts/details-popup.js

@@ -1,11 +1,22 @@
 function showLogDetails(log) {
   const popup = document.getElementById(`popup`);
+  const context = getObject(log.context);
+  const breadcrumbs = getObject(log.breadcrumbs);
+
+  const timeInfo =
+    log.updatedAt === log.createdAt
+      ? getDate(log.updatedAt)
+      : `Updated: ${getDate(log.updatedAt)}.   First seen: ${getDate(
+          log.createdAt
+        )}`;
 
   popup.innerHTML = `
     <div class="content center">
       <div class="container">
-        <h2 class="popup-title ${log.type}">${log.type}: ${log.message}</h2>
-        <div class="mt-05">${getDate(log.updatedAt)}</div>
+        <h2 class="popup-title ${log.type}">${log.type}: ${log.message} (${
+    log.count
+  })</h2>
+        <div class="mt-05">${timeInfo}</div>
           ${
             log.trace
               ? `
@@ -15,18 +26,18 @@ function showLogDetails(log) {
               : ""
           }
           ${
-            log.context
+            context
               ? `
             <h3 class="mt-15">Context</h3>
-            <p>${jsonViewer(log.context)}</p>
+            <p>${jsonViewer(context)}</p>
             `
               : ""
           }
           ${
-            log.breadcrumbs && log.breadcrumbs.length > 0
+            breadcrumbs && breadcrumbs.length > 0
               ? `
             <h3 class="mt-15">Breadcrumbs</h3>
-            <p>${jsonViewer(log.breadcrumbs)}</p>
+            <p>${jsonViewer(breadcrumbs)}</p>
             `
               : ""
           }
@@ -42,6 +53,14 @@ function showLogDetails(log) {
   popup.style.display = "block";
 }
 
+function getObject(context) {
+  if (typeof context === "string") {
+    return JSON.parse(context);
+  }
+
+  return context;
+}
+
 function getTrace(trace) {
   return trace.replace(new RegExp(String.fromCharCode(10), "g"), "<br />");
 }

package/public/scripts/ws.js

@@ -0,0 +1,83 @@
+// WebSocket connection
+let socket;
+let frozen = false;
+
+async function connectWebSocket() {
+  const { hostname, origin, pathname, search } = window.location;
+
+  const res = await fetch(`${origin}${pathname}settings${search}`);
+
+  if (!res.ok) {
+    alert('An error occurred while fetching settings.');
+    return;
+  }
+
+  const settings = await res.json();
+
+  if (!settings.websocket) {
+    getLogs();
+    document.getElementById('refresh').style.display = 'block';
+  }
+
+  document.getElementById('freeze').style.display = 'block';
+
+  if (!settings.websocket?.port) {
+    alert('WebSocket port is not configured.');
+    return;
+  }
+
+  const socketUrl = `ws://${hostname}:${settings.websocket.port}`;
+  socket = new WebSocket(socketUrl, 'json');
+
+  socket.onerror = (error) => {
+    console.error(error);
+  };
+
+  socket.onopen = (event) => {
+    getLogs();
+  };
+
+  socket.onclose = (event) => {
+    console.log(event);
+    setTimeout(connectWebSocket, 5000);
+  };
+
+  socket.onmessage = (event) => {
+    const data = JSON.parse(event.data.toString());
+
+    if (data['action'] && !frozen) {
+      switch (data['action']) {
+        case 'list':
+          logs = data['data'];
+          checkElementsVisibility(logs);
+          renderLogs(logs);
+          break;
+        case 'insert':
+          getLogs();
+          break;
+        case 'update':
+          getLogs();
+          return;
+        case 'delete':
+          return;
+      }
+    }
+  };
+}
+function sendMessage(message) {
+  socket.send(JSON.stringify(message));
+}
+
+function toggleFreeze() {
+  frozen = !frozen;
+  const button = document.querySelector('#freeze button');
+  button.innerHTML = frozen ? 'Frozen' : 'Freeze';
+
+  if (frozen) {
+    button.classList.remove('white');
+    button.classList.add('light');
+  } else {
+    button.classList.remove('light');
+    button.classList.add('white');
+  }
+}

package/public/styles/index.css

@@ -190,6 +190,11 @@ nav ul li:hover {
   font-size: 1rem;
 }
 
+#refresh,
+#freeze {
+  display: none;
+}
+
 /* table */
 .table-header,
 .row {

package/src/entities/log.entity.ts

@@ -1,13 +1,17 @@
-import { EntitySchema } from "typeorm";
+import { DataSourceOptions, EntitySchema } from "typeorm";
 
-export function createLogEntity(name: string) {
+export function createLogEntity(
+  name: string,
+  dbType: DataSourceOptions["type"] | "memory"
+) {
   return new EntitySchema({
     name,
     columns: {
       _id: {
-        type: String,
+        type: dbType === "mongodb" ? String : Number,
         objectId: true,
         primary: true,
+        generated: true,
       },
       type: { type: String },
       message: { type: String },

package/src/log.module.ts

@@ -8,12 +8,19 @@ import querystring from "node:querystring";
 import { ApplicationConfig } from "@nestjs/core";
 import { join } from "node:path";
 import { LogAccessGuard } from "./guards/access.guard";
+import { WsService } from "./services/ws.service";
 
 @Global()
 @Module({
   imports: [TypeOrmModule],
-  providers: [ApplicationConfig, LogAccessGuard, LogService, MemoryDbService],
-  exports: [TypeOrmModule, LogService, MemoryDbService],
+  providers: [
+    ApplicationConfig,
+    LogAccessGuard,
+    LogService,
+    MemoryDbService,
+    WsService,
+  ],
+  exports: [TypeOrmModule, LogService, MemoryDbService, WsService],
 })
 export class LogModule {
   public static async init(
@@ -23,6 +30,7 @@ export class LogModule {
     app.resolve(LogService);
 
     const logService: LogService = await app.resolve(LogService);
+    const wsService: WsService = await app.resolve(WsService);
     const logAccessGuard: LogAccessGuard = await app.get(LogAccessGuard);
 
     if (options) {
@@ -38,6 +46,26 @@ export class LogModule {
 
       const httpAdapter = app.getHttpAdapter();
 
+      // frontend settings endpoint
+      httpAdapter.get(
+        join(options.path, "settings"),
+        async (req: any, res: any) => {
+          logAccessGuard.canActivate(req);
+
+          const result: { [key: string]: any } = {};
+
+          if (options?.websocket) {
+            result.websocket = {
+              namespace: options.websocket?.namespace,
+              port: options.websocket?.port,
+              host: options.websocket?.host || req.headers?.host.split(":")[0],
+            };
+          }
+
+          res.json(result);
+        }
+      );
+
       // get all logs endpoint
       httpAdapter.get(join(options.path, "api"), async (req: any, res: any) => {
         logAccessGuard.canActivate(req);
@@ -60,6 +88,11 @@ export class LogModule {
           res.json(await logService.delete(params.id.toString()));
         }
       );
+
+      // set up WebSocket connection
+      if (options?.websocket) {
+        wsService.setupConnection(options.websocket, options.key);
+      }
     }
 
     if (options?.database) {

package/src/services/log.service.ts

@@ -1,4 +1,9 @@
-import { Injectable, LoggerService, Scope } from "@nestjs/common";
+import {
+  Injectable,
+  LoggerService,
+  OnApplicationShutdown,
+  Scope,
+} from "@nestjs/common";
 import { MemoryDbService } from "./memory-db.service";
 import { defaultTable } from "../defaults";
 import { Context, LogModuleOptions, LogType } from "../types";
@@ -11,24 +16,40 @@ import {
 import { createLogEntity } from "../entities/log.entity";
 import { ExecutionContextHost } from "@nestjs/core/helpers/execution-context-host";
 import { setInterval } from "timers";
+import { entity2table } from "../utils/entity2table";
+import { WsService } from "./ws.service";
+import { Subscription } from "rxjs";
 
 @Injectable({ scope: Scope.TRANSIENT })
-export class LogService implements LoggerService {
+export class LogService implements LoggerService, OnApplicationShutdown {
   static connection: DataSource;
   static options: LogModuleOptions;
-  static Log: EntitySchema = createLogEntity(defaultTable);
+  static Log: EntitySchema = createLogEntity(defaultTable, "memory");
   static timer: ReturnType<typeof setInterval>;
+  static subscription: Subscription;
 
   breadcrumbs: any[] = [];
 
-  constructor(private readonly memoryDbService: MemoryDbService) {}
+  constructor(
+    private readonly memoryDbService: MemoryDbService,
+    private readonly wsService: WsService
+  ) {}
+
+  onApplicationShutdown() {
+    if (LogService.timer) {
+      clearInterval(LogService.timer);
+    }
+  }
 
   async connectDb(options: LogModuleOptions): Promise<DataSource> {
     LogService.Log = createLogEntity(
-      options.database?.collection || options.database?.table || defaultTable
+      options.database?.collection || options.database?.table || defaultTable,
+      options.database?.type || "mongodb"
     );
 
-    this.setOptions(options);
+    if (!LogService.options) {
+      this.setOptions(options);
+    }
 
     const dataSourceOptions = {
       type: options.database?.type,
@@ -39,9 +60,22 @@ export class LogService implements LoggerService {
     } as DataSourceOptions;
 
     LogService.connection = new DataSource(dataSourceOptions);
-
     await LogService.connection.initialize();
 
+    if (dataSourceOptions.type !== "mongodb") {
+      const queryRunner = LogService.connection.createQueryRunner();
+
+      try {
+        await queryRunner.connect();
+
+        const table = entity2table(LogService.Log);
+
+        await queryRunner.createTable(table, true);
+      } finally {
+        await queryRunner.release();
+      }
+    }
+
     if (LogService.timer) {
       clearInterval(LogService.timer);
     }
@@ -53,6 +87,24 @@ export class LogService implements LoggerService {
 
   setOptions(options: LogModuleOptions) {
     LogService.options = options;
+
+    if (options.websocket && !LogService.subscription) {
+      LogService.subscription = this.wsService.onMessage.subscribe(
+        async (message) => {
+          switch (message.action) {
+            case "getLogs":
+              this.wsService.sendMessage({
+                action: "list",
+                data: await this.getAll(),
+              });
+              break;
+            case "delete":
+              this.delete(message.data._id);
+              break;
+          }
+        }
+      );
+    }
   }
 
   addBreadcrumb(breadcrumb: any) {
@@ -121,8 +173,12 @@ export class LogService implements LoggerService {
     });
   }
 
-  async delete(id: string) {
-    return this.getConnection().delete(LogService.Log, id);
+  async delete(_id: string) {
+    this.wsService.sendMessage({
+      action: "delete",
+      data: { _id },
+    });
+    return this.getConnection().delete(LogService.Log, _id);
   }
 
   private async smartInsert(data: {
@@ -146,16 +202,31 @@ export class LogService implements LoggerService {
     const context = data.context ? this.parseContext(data.context) : undefined;
 
     if (log) {
-      return await connection.update(LogService.Log, log._id, {
+      const updatedLog = {
         context,
         trace: data.trace,
         breadcrumbs: this.breadcrumbs,
         count: log.count + 1,
         updatedAt: currentDate,
+      };
+
+      this.wsService.sendMessage({
+        action: "update",
+        data: { ...log, ...updatedLog },
       });
+
+      await connection.update(LogService.Log, log["_id"], {
+        context,
+        trace: data.trace,
+        breadcrumbs: this.breadcrumbs,
+        count: log.count + 1,
+        updatedAt: currentDate,
+      });
+
+      return { ...log, ...updatedLog };
     }
 
-    return await connection.insert(LogService.Log, {
+    const insertedLog = {
       type: data.type,
       message: data.message,
       context,
@@ -164,7 +235,27 @@ export class LogService implements LoggerService {
       count: 1,
       createdAt: currentDate,
       updatedAt: currentDate,
+    };
+
+    const res = await connection.insert(LogService.Log, insertedLog);
+    const _id = this.getNewObjectId(res);
+
+    this.wsService.sendMessage({
+      action: "insert",
+      data: { _id, ...insertedLog },
     });
+
+    return { _id, ...insertedLog };
+  }
+
+  private getNewObjectId(result: any): string | number {
+    if (result.identifiers) {
+      return result.identifiers[0]._id;
+    }
+
+    console.log(result);
+
+    return result._id;
   }
 
   private getConnection(): EntityManager {

package/src/services/ws.d.ts

@@ -0,0 +1 @@
+declare module "ws";

package/src/services/ws.service.ts

@@ -0,0 +1,110 @@
+import { Injectable } from "@nestjs/common";
+import WebSocket, { WebSocketServer } from "ws";
+import { LogModuleOptions } from "../types";
+import { Subject } from "rxjs";
+
+@Injectable()
+export class WsService {
+  public onMessage: Subject<any> = new Subject();
+  private ws: WebSocket | null = null;
+  private connected: boolean = false;
+  private connectionTimeout: number = 500;
+  private options: LogModuleOptions["websocket"] = {
+    port: 8080,
+    host: "localhost",
+  };
+  private key: string = "";
+
+  setupConnection(options: LogModuleOptions["websocket"], key = "") {
+    this.options = {
+      ...this.options,
+      ...options,
+    };
+    this.key = key;
+
+    // Set up Web Socket server
+    if (this.ws) {
+      return;
+    }
+
+    const wsServer = new WebSocketServer({
+      retryCount: 1,
+      reconnectInterval: 1,
+      handshakeTimeout: this.connectionTimeout,
+      port: this.options?.port,
+    });
+
+    console.log(
+      `Logs WebSocket server is listening on port ${this.options.port}`
+    );
+
+    wsServer.on("error", this.handleError);
+    wsServer.on("open", () => this.handleOpenConnection());
+    wsServer.on("ping", () => this.ping(this.ws));
+    wsServer.on("close", () => this.closeConnection(this.ws));
+    wsServer.on("message", this.handleMessage);
+    wsServer.on("connection", (connection: WebSocket) => {
+      this.ws = connection;
+      connection.onmessage = this.handleMessage;
+    });
+  }
+
+  sendMessage(message: any) {
+    this.ws?.send(JSON.stringify(message));
+  }
+
+  private handleError = () => {
+    const serverUrl = this.getServerUrl();
+    console.error(`Server ${serverUrl} is not available.`);
+
+    setTimeout(this.setupConnection, this.connectionTimeout);
+  };
+
+  private closeConnection = (connection: any) => {
+    clearTimeout(connection.pingTimeout);
+
+    if (this.connected) {
+      console.log("Connection has been closed by server.");
+      this.connected = false;
+      this.handleError();
+    }
+  };
+
+  private ping = (connection: any) => {
+    console.log("Ping remote server.");
+    clearTimeout(connection.pingTimeout);
+
+    connection.pingTimeout = setTimeout(() => {
+      connection.terminate();
+    }, 30000 + this.connectionTimeout);
+  };
+
+  private handleMessage = (message: any) => {
+    try {
+      const data = JSON.parse((message.data || message).toString());
+
+      if (this.key !== "" && data.key !== this.key) {
+        throw new Error("WebSocket unauthorized");
+      }
+
+      if (this.options)
+        if (data.action) {
+          this.onMessage.next(data);
+        }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  private getServerUrl = (): string => {
+    return `${this.options?.secure ? "wss" : "ws"}://${this.options?.host}:${
+      this.options?.port
+    }`;
+  };
+
+  private handleOpenConnection = async () => {
+    this.connected = true;
+    const serverUrl = this.getServerUrl();
+    console.log(`${serverUrl} has been connected.`);
+  };
+}

package/src/types/options.type.ts

@@ -12,4 +12,10 @@ export type LogModuleOptions = {
     table?: string;
     collection?: string;
   };
+  websocket?: {
+    port?: number;
+    namespace?: string;
+    host?: string;
+    secure?: boolean;
+  };
 };