feat(scripts): allow remote logging during dev (#928)

Author: sidvishnoi

esbuild/dev.ts

@@ -30,6 +30,9 @@ export const getDevOptions = ({
       CONFIG_OPEN_PAYMENTS_REDIRECT_URL: JSON.stringify(
         'https://webmonetization.org/welcome',
       ),
+      CONFIG_LOG_SERVER_ENDPOINT: process.env.LOG_SERVER
+        ? JSON.stringify(process.env.LOG_SERVER)
+        : JSON.stringify(false),
     },
   };
 };

esbuild/prod.ts

@@ -37,6 +37,7 @@ export const getProdOptions = ({
       CONFIG_OPEN_PAYMENTS_REDIRECT_URL: JSON.stringify(
         'https://webmonetization.org/welcome',
       ),
+      CONFIG_LOG_SERVER_ENDPOINT: JSON.stringify(false),
     },
   };
 };

scripts/log-server.ts

@@ -0,0 +1,73 @@
+import {
+  createServer,
+  type IncomingMessage,
+  type ServerResponse,
+} from 'node:http';
+import { format, formatWithOptions, styleText } from 'node:util';
+import type { RemoteLoggerMessage } from '@/shared/logger';
+
+const PORT = process.env.LOG_SERVER_PORT || 8000;
+const CORS_HEADERS = {
+  'Access-Control-Allow-Private-Network': 'true',
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': '*',
+};
+
+const server = createServer(async (req, res) => {
+  if (req.method === 'OPTIONS') {
+    return respond(res);
+  }
+
+  const body = await getBody(req);
+  if (!body) return respond(res, 400);
+
+  const logs = JSON.parse(body) as RemoteLoggerMessage[];
+  for (const log of logs) {
+    console.log(
+      `▶ ${styleText('dim', timestampFormat.format(new Date(log.timestamp)))}`,
+      styleText(
+        'inverse',
+        `[${log.logger.toUpperCase()}:${styleText(['italic', 'dim'], log.methodName)}]`,
+      ),
+      log.msg
+        .map((e) =>
+          typeof e === 'string'
+            ? format('%s', e)
+            : formatWithOptions({ colors: true }, '%o', e),
+        )
+        .join(' '),
+      styleText(['italic', 'dim'], log.stackTrace[0]?.trim()),
+      '\n',
+    );
+  }
+
+  return respond(res);
+});
+
+server.listen(PORT, () => {
+  console.warn(`Log server listening on port ${PORT}`);
+});
+
+const timestampFormat = new Intl.DateTimeFormat(undefined, {
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  fractionalSecondDigits: 3,
+  hour12: false,
+});
+
+function respond(res: ServerResponse<IncomingMessage>, statusCode = 200) {
+  res.writeHead(statusCode, { ...CORS_HEADERS }).end();
+}
+
+function getBody(req: IncomingMessage) {
+  return new Promise<string>((resolve) => {
+    let body = '';
+    req.on('data', (chunk) => {
+      body += chunk;
+    });
+    req.on('end', () => {
+      resolve(body);
+    });
+  });
+}

src/shared/defines.ts

@@ -1,11 +1,13 @@
 import type { LogLevelDesc } from 'loglevel';
 
 declare const CONFIG_LOG_LEVEL: LogLevelDesc;
+declare const CONFIG_LOG_SERVER_ENDPOINT: string | false;
 declare const CONFIG_PERMISSION_HOSTS: { origins: string[] };
 declare const CONFIG_ALLOWED_PROTOCOLS: string[];
 declare const CONFIG_OPEN_PAYMENTS_REDIRECT_URL: string;
 
 export const LOG_LEVEL = CONFIG_LOG_LEVEL;
+export const LOG_SERVER_ENDPOINT = CONFIG_LOG_SERVER_ENDPOINT;
 export const PERMISSION_HOSTS = CONFIG_PERMISSION_HOSTS;
 export const ALLOWED_PROTOCOLS = CONFIG_ALLOWED_PROTOCOLS;
 export const OPEN_PAYMENTS_REDIRECT_URL = CONFIG_OPEN_PAYMENTS_REDIRECT_URL;

src/shared/logger.ts

@@ -1,4 +1,6 @@
 import log from 'loglevel';
+import { ThrottleBatch } from './helpers';
+import { LOG_SERVER_ENDPOINT } from './defines';
 
 // TODO: Disable debug logging in production
 export const createLogger = (level: log.LogLevelDesc = 'DEBUG') => {
@@ -16,7 +18,80 @@ export const createLogger = (level: log.LogLevelDesc = 'DEBUG') => {
   };
   log.rebuild();
 
+  // Provide a LOG_SERVER=http://127.0.0.1:8000 env var to enable remote
+  // logging. The remote logging server is run via `tsx scripts/log-server.ts`
+  //
+  // Remote logging is excluded from bundle via treeshaking if the `LOG_SERVER`
+  // env var is not provided.
+  //
+  // DO NOT ENABLE THIS FOR PRODUCTION.
+  if (LOG_SERVER_ENDPOINT) {
+    remoteLogger(log, LOG_SERVER_ENDPOINT);
+  }
+
   return log;
 };
 
 export type Logger = log.RootLogger;
+
+export type RemoteLoggerMessage = {
+  msg: unknown[];
+  timestamp: string;
+  methodName: string;
+  logger: string;
+  stackTrace: string[];
+};
+
+function remoteLogger(log: log.RootLogger, endpoint: string) {
+  const queue = new ThrottleBatch(send, (logItems) => logItems.flat(), 500);
+
+  const originalFactory = log.methodFactory;
+  log.methodFactory = (methodName, logLevel, loggerName) => {
+    const raw = originalFactory(methodName, logLevel, loggerName);
+    const original = raw.bind(log);
+    // Note: this interception breaks the stack trace linenumber in devtools console
+    return (...msgArgs: unknown[]) => {
+      const logItem: RemoteLoggerMessage = {
+        msg: msgArgs,
+        methodName,
+        timestamp: new Date().toISOString(),
+        logger: loggerName?.toString() || '',
+        stackTrace: formatStackTrace(getStacktrace()),
+      };
+      queue.enqueue(logItem);
+      original.apply(log, msgArgs);
+    };
+  };
+  log.rebuild();
+
+  function send(...logItems: unknown[]) {
+    void fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(logItems),
+    }).catch(() => {});
+  }
+
+  function getStacktrace() {
+    try {
+      throw new Error();
+    } catch (trace) {
+      return trace.stack;
+    }
+  }
+
+  function formatStackTrace(rawStacktrace: string): string[] {
+    let stacktrace = rawStacktrace.split('\n');
+    const lines = stacktrace;
+    lines.splice(0, 3);
+    const depth = 3;
+    if (depth && lines.length !== depth + 1) {
+      const shrink = lines.splice(0, depth);
+      stacktrace = shrink;
+      if (lines.length) stacktrace.push(`and ${lines.length} more`);
+    } else {
+      stacktrace = lines;
+    }
+    return stacktrace;
+  }
+}