@viplance/nestjs-logger 0.3.8 → 0.4.1

package/dist/services/ws.service.js

@@ -0,0 +1,106 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WsService = void 0;
+const common_1 = require("@nestjs/common");
+const ws_1 = require("ws");
+const rxjs_1 = require("rxjs");
+let WsService = class WsService {
+    constructor() {
+        this.onMessage = new rxjs_1.Subject();
+        this.ws = null;
+        this.connected = false;
+        this.connectionTimeout = 500;
+        this.options = {
+            port: 8080,
+            host: 'localhost',
+        };
+        this.key = '';
+        this.handleError = () => {
+            const serverUrl = this.getServerUrl();
+            console.error(`Server ${serverUrl} is not available.`);
+            setTimeout(this.setupConnection, this.connectionTimeout);
+        };
+        this.closeConnection = (connection) => {
+            clearTimeout(connection.pingTimeout);
+            if (this.connected) {
+                console.log('Connection has been closed by server.');
+                this.connected = false;
+                this.handleError();
+            }
+        };
+        this.ping = (connection) => {
+            console.log('Ping remote server.');
+            clearTimeout(connection.pingTimeout);
+            connection.pingTimeout = setTimeout(() => {
+                connection.terminate();
+            }, 30000 + this.connectionTimeout);
+        };
+        this.handleMessage = (message) => {
+            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);
+            }
+        };
+        this.getServerUrl = () => {
+            var _a, _b, _c;
+            return `${((_a = this.options) === null || _a === void 0 ? void 0 : _a.secure) ? 'wss' : 'ws'}://${(_b = this.options) === null || _b === void 0 ? void 0 : _b.host}:${(_c = this.options) === null || _c === void 0 ? void 0 : _c.port}`;
+        };
+        this.handleOpenConnection = async () => {
+            this.connected = true;
+            const serverUrl = this.getServerUrl();
+            console.log(`${serverUrl} has been connected.`);
+        };
+    }
+    setupConnection(options, key = '') {
+        var _a;
+        this.options = {
+            ...this.options,
+            ...options,
+        };
+        this.key = key;
+        // Set up Web Socket server
+        if (this.ws) {
+            return;
+        }
+        const wsServer = new ws_1.WebSocketServer({
+            retryCount: 1,
+            reconnectInterval: 1,
+            handshakeTimeout: this.connectionTimeout,
+            port: (_a = this.options) === null || _a === void 0 ? void 0 : _a.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) => {
+            this.ws = connection;
+            connection.onmessage = this.handleMessage;
+        });
+    }
+    sendMessage(message) {
+        var _a;
+        (_a = this.ws) === null || _a === void 0 ? void 0 : _a.send(JSON.stringify(message));
+    }
+};
+exports.WsService = WsService;
+exports.WsService = WsService = __decorate([
+    (0, common_1.Injectable)()
+], WsService);
+//# sourceMappingURL=ws.service.js.map

package/dist/services/ws.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ws.service.js","sourceRoot":"","sources":["../../src/services/ws.service.ts"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./context.type";
-export * from "./log.type";
-export * from "./options.type";
+export * from './context.type';
+export * from './log.type';
+export * from './options.type';

package/dist/types/options.type.d.ts

@@ -2,6 +2,7 @@ import { DataSourceOptions } from "typeorm";
 export type LogModuleOptions = {
     path?: string;
     key?: string;
+    join?: boolean;
     maxRecords?: number;
     maxAge?: number;
     maxSize?: number;
@@ -11,4 +12,10 @@ export type LogModuleOptions = {
         table?: string;
         collection?: string;
     };
+    websocket?: {
+        port?: number;
+        namespace?: string;
+        host?: string;
+        secure?: boolean;
+    };
 };

package/dist/utils/entity2table.d.ts

@@ -1,2 +1,2 @@
-import { EntitySchema, Table } from "typeorm";
+import { EntitySchema, Table } from 'typeorm';
 export declare function entity2table(entity: EntitySchema): Table;

package/dist/utils/entity2table.js

@@ -11,7 +11,7 @@ function entity2table(entity) {
             type: resolveColumnType(col === null || col === void 0 ? void 0 : col.type),
             isPrimary: !!(col === null || col === void 0 ? void 0 : col.primary),
             isGenerated: !!(col === null || col === void 0 ? void 0 : col.generated),
-            generationStrategy: (col === null || col === void 0 ? void 0 : col.generated) ? "increment" : undefined,
+            generationStrategy: (col === null || col === void 0 ? void 0 : col.generated) ? 'increment' : undefined,
             isUnique: !!(col === null || col === void 0 ? void 0 : col.unique),
             isNullable: !!(col === null || col === void 0 ? void 0 : col.nullable),
             default: col === null || col === void 0 ? void 0 : col.default,
@@ -21,15 +21,15 @@ function entity2table(entity) {
 function resolveColumnType(type) {
     switch (type) {
         case String:
-            return "text";
+            return 'text';
         case Number:
-            return "int";
+            return 'int';
         case Date:
-            return "timestamp";
+            return 'timestamp';
         case Boolean:
-            return "boolean";
+            return 'boolean';
         default:
-            return "text";
+            return 'text';
     }
 }
 //# sourceMappingURL=entity2table.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viplance/nestjs-logger",
-  "version": "0.3.8",
+  "version": "0.4.1",
   "description": "NestJS internal logging system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,17 +21,22 @@
     "mariadb",
     "sqlite",
     "memory",
+    "websocket",
+    "realtime",
+    "UI",
     "free"
   ],
   "author": "Dzmitry Sharko",
   "license": "ISC",
   "peerDependencies": {
-    "@nestjs/common": "^10.0.0",
-    "@nestjs/core": "^10.0.0",
+    "@nestjs/common": "^11.0.0",
+    "@nestjs/core": "^11.0.0",
     "@nestjs/typeorm": "^11.0.0",
+    "@nestjs/websockets": "^11.1.7",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.2",
-    "typeorm": "^0.3.27"
+    "typeorm": "^0.3.27",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/node": "^24.5.2",

package/public/index.html

@@ -8,6 +8,11 @@
     <link rel="stylesheet" href="styles/reset.css" />
     <link rel="stylesheet" href="styles/colors.css" />
     <link rel="stylesheet" href="styles/index.css" />
+    <script
+      defer="defer"
+      src="scripts/ws.js
+    "
+    ></script>
     <script
       defer="defer"
       src="scripts/json-viewer.js
@@ -42,12 +47,12 @@
             </ul>
           </nav>
           <input id="search" onkeyup="search(event)" type="text" placeholder="Search" />
-          <div onclick="getLogs()"><button class="white">Refresh</button></div>
+          <div id="refresh" onclick="getLogs()"><button class="white">Refresh</button></div>
+          <div id="freeze" onclick="toggleFreeze()"><button class="white">Freeze</button></div>
       </div>
       <div class="container table-header">
         <div class="col">Type</div>
         <div class="col">Info</div>
-        <div class="col">Trace</div>
         <div class="col">Count</div>
       </div>
     </header>

package/public/scripts/common.js

@@ -10,11 +10,9 @@ const selectedLogTypes = {
 const logTypes = Object.keys(selectedLogTypes).filter((key) => key !== `all`);
 
 let logs = [];
-let text = "";
+let text = '';
 
-window.addEventListener("load", async () => {
-  getLogs();
-});
+connectWebSocket();
 
 document.addEventListener(`click`, (e) => {
   const target = e.target;
@@ -107,12 +105,12 @@ function getDate(incomingDate) {
   const date = new Date(incomingDate);
 
   const formatter = new Intl.DateTimeFormat(undefined, {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    month: "short",
-    day: "2-digit",
-    year: "numeric",
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric',
     hour12: false,
   });
 
@@ -135,20 +133,20 @@ function getLogHtmlElement(log) {
         <div class="log-info">${log.message}</div>
         <div class="date">${getDate(log.updatedAt)}</div>
       </div>
-      <div class="col context">${log.trace || ""}</div>
+      <div class="col context">${log.trace || ''}</div>
       <div class="col">${log.count}</div>
     </div>`;
 }
 
-function renderLogs() {
-  let html = "";
+function renderLogs(logList = logs) {
+  let html = '';
 
-  logs
+  logList
     .filter((log) => {
-      return selectedLogTypes["all"] || selectedLogTypes[log.type];
+      return selectedLogTypes['all'] || selectedLogTypes[log.type];
     })
     .filter((log) => {
-      if (text === "") return true;
+      if (text === '') return true;
 
       return (
         log.message.toLowerCase().includes(text) ||
@@ -162,53 +160,86 @@ function renderLogs() {
       html += getLogHtmlElement(log);
     });
 
-  document.getElementById("logs").innerHTML = html;
+  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

@@ -3,18 +3,27 @@ function showLogDetails(log) {
   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
               ? `
               <h3 class="mt-15">Trace</h3>
               <p class="key pl-2"><span>${getTrace(log.trace)}</span></p>
               `
-              : ""
+              : ''
           }
           ${
             context
@@ -22,7 +31,7 @@ function showLogDetails(log) {
             <h3 class="mt-15">Context</h3>
             <p>${jsonViewer(context)}</p>
             `
-              : ""
+              : ''
           }
           ${
             breadcrumbs && breadcrumbs.length > 0
@@ -30,7 +39,7 @@ function showLogDetails(log) {
             <h3 class="mt-15">Breadcrumbs</h3>
             <p>${jsonViewer(breadcrumbs)}</p>
             `
-              : ""
+              : ''
           }
         <div class="content">
           <button class="white mt-2" onclick="closePopup()">Close</button>
@@ -41,11 +50,11 @@ function showLogDetails(log) {
       </div>
     <div>`;
 
-  popup.style.display = "block";
+  popup.style.display = 'block';
 }
 
 function getObject(context) {
-  if (typeof context === "string") {
+  if (typeof context === 'string') {
     return JSON.parse(context);
   }
 
@@ -53,10 +62,10 @@ function getObject(context) {
 }
 
 function getTrace(trace) {
-  return trace.replace(new RegExp(String.fromCharCode(10), "g"), "<br />");
+  return trace.replace(new RegExp(String.fromCharCode(10), 'g'), '<br />');
 }
 
 function closePopup() {
   const popup = document.getElementById(`popup`);
-  popup.style.display = "none";
+  popup.style.display = 'none';
 }

package/public/scripts/json-viewer.js

@@ -1,6 +1,6 @@
 function jsonViewer(json, parentKey) {
   if (!json) {
-    return "";
+    return '';
   }
 
   res = `<div>`;
@@ -8,7 +8,7 @@ function jsonViewer(json, parentKey) {
   if (Array.isArray(json)) {
     json.forEach((item) => {
       res += `<div class="key pl-2">${
-        typeof item === "object" ? jsonViewer(item) : `<span>${item}</span>`
+        typeof item === 'object' ? jsonViewer(item) : `<span>${item}</span>`
       }</div>`;
     });
 
@@ -23,7 +23,7 @@ function jsonViewer(json, parentKey) {
   }
 
   for (const key of keys) {
-    if (typeof json[key] === "object") {
+    if (typeof json[key] === 'object') {
       res += jsonViewer(json[key], key);
     } else {
       res += `<div class="key pl-2">${key}: <span>${json[key]}</span></div>`;
@@ -34,7 +34,7 @@ function jsonViewer(json, parentKey) {
     res += `</div>`;
   }
 
-  res += "</div>";
+  res += '</div>';
 
   return res;
 }

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/defaults.ts

@@ -1 +1 @@
-export const defaultTable = "logs";
+export const defaultTable = 'logs';

package/src/entities/log.entity.ts

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

package/src/guards/access.guard.ts

@@ -3,9 +3,9 @@ import {
   ExecutionContext,
   HttpException,
   Injectable,
-} from "@nestjs/common";
-import { LogService } from "../services/log.service";
-import querystring from "node:querystring";
+} from '@nestjs/common';
+import { LogService } from '../services/log.service';
+import querystring from 'node:querystring';
 
 @Injectable()
 export class LogAccessGuard implements CanActivate {
@@ -14,10 +14,10 @@ export class LogAccessGuard implements CanActivate {
       ? context.switchToHttp().getRequest()
       : context; // hook for using as method
 
-    const params = querystring.parse(req.url.split("?")[1]);
+    const params = querystring.parse(req.url.split('?')[1]);
 
     if (LogService.options.key && params.key !== LogService.options.key) {
-      throw new HttpException("Unauthorized", 401);
+      throw new HttpException('Unauthorized', 401);
     }
 
     return true;