feat: add real time logger page (#276)

* feat: add real time logger

* feat: add subscription for logging

* feat: use timestamp and level in xterm, migrate to new xterm package

* feat: improve design on log page

* fit: remove xterm fit addon

* fix: dispose terminal correctly

* style: format code

* refactor: add jsdoc for redis-transport

* fix: redis connection not possible sometimes

* feat: make terminal full size

* fix: deepsource issues

* fix: lint issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/log/src/index.mjs

@@ -1,5 +1,7 @@
 import winston, { format, transports } from "winston";
 
+import { RedisTransport } from "./redis-transport.mjs";
+
 const logMessageFormat = format.printf(({ level, message, timestamp }) => {
   return `${timestamp} ${level}: ${message}`;
 });
@@ -10,7 +12,7 @@ const logger = winston.createLogger({
     format.timestamp(),
     logMessageFormat,
   ),
-  transports: [new transports.Console()],
+  transports: [new transports.Console(), new RedisTransport()],
 });
 
 export { logger };

packages/log/src/redis-transport.mjs

@@ -0,0 +1,44 @@
+import { Redis } from "ioredis";
+import superjson from "superjson";
+import Transport from "winston-transport";
+
+//
+// Inherit from `winston-transport` so you can take advantage
+// of the base functionality and `.exceptions.handle()`.
+//
+export class RedisTransport extends Transport {
+  /** @type {Redis} */
+  redis;
+
+  /**
+   * Log the info to the Redis channel
+   * @param {{ message: string; timestamp: string; level: string; }} info
+   * @param {() => void} callback
+   */
+  log(info, callback) {
+    setImmediate(() => {
+      this.emit("logged", info);
+    });
+
+    if (!this.redis) {
+      // Is only initialized here because it did not work when initialized in the constructor or outside the class
+      this.redis = new Redis();
+    }
+
+    this.redis
+      .publish(
+        "logging",
+        superjson.stringify({
+          message: info.message,
+          timestamp: info.timestamp,
+          level: info.level,
+        }),
+      )
+      .then(() => {
+        callback();
+      })
+      .catch(() => {
+        // Ignore errors
+      });
+  }
+}