chore: configures batching for client logger

Author: anthonydmays

lib/javascript/fullstack_demo/src/app/api/log/route.ts

@@ -1,7 +1,10 @@
 import { logger } from '@/util/server-logger';
 
 export async function POST(request: Request) {
-  const { level, message, vars } = await request.json();
-  logger.log(level, message, ...(vars || []));
+  const batch = await request.json();
+  for (const log of batch) {
+    const { level, message, vars } = log;
+    logger.log(level, message, { ...(vars || {}) });
+  }
   return new Response(null, { status: 204 });
 }

lib/javascript/fullstack_demo/src/models.ts

@@ -1,5 +1,13 @@
+import { LogLevel } from './util/logger';
+
 export interface Todo {
   id: number;
   text: string;
   completed: boolean;
 }
+
+export interface Log {
+  level: LogLevel;
+  message: string;
+  vars: {};
+}

lib/javascript/fullstack_demo/src/util/client-logger.ts

@@ -1,24 +1,88 @@
+import { Log } from '@/models';
 import { Logger, LogLevel } from './logger';
 
+const FLUSH_AFTER_SIZE = 15;
+const MAX_BATCH_SIZE = 100;
+const FLUSH_INTERVAL_MS = 1000 * 5; // 5 seconds
+
 class ClientLogger implements Logger {
-  log(level: LogLevel, message: string, ...vars: unknown[]): void {
-    fetch('/api/log', {
+  private readonly buffer: Log[] = [];
+  private flushing = false;
+
+  constructor() {
+    setInterval(() => this.flush(), FLUSH_INTERVAL_MS);
+  }
+
+  log(level: LogLevel, message: string, vars?: {}): void {
+    vars = { ...this.getDefaultVars(), ...(vars || {}) };
+    this.buffer.push({ level, message, vars });
+    if (this.buffer.length >= FLUSH_AFTER_SIZE && !this.flushing) {
+      this.flush();
+    }
+  }
+
+  private getDefaultVars() {
+    if (typeof window === 'undefined') {
+      return [];
+    }
+
+    return {
+      client: {
+        type: 'web',
+        userAgent: navigator.userAgent,
+        location: window.location.href,
+      },
+    };
+  }
+
+  async flush(): Promise<void> {
+    if (this.buffer.length === 0 || this.flushing) {
+      return;
+    }
+
+    this.flushing = true;
+
+    const batch = this.buffer.splice(0, MAX_BATCH_SIZE);
+    let backoffInMs = FLUSH_INTERVAL_MS;
+
+    do {
+      try {
+        await this.sendLogs(batch);
+        this.flushing = false;
+      } catch (e) {
+        console.error('Failed to send logs', e);
+        backoffInMs *= 2;
+        await this.delay(backoffInMs);
+      }
+    } while (this.flushing);
+  }
+
+  async sendLogs(batch: Log[]): Promise<void> {
+    let endpoint = '/api/log';
+    if (typeof window === 'undefined') {
+      endpoint = `${process.env?.NEXT_PUBLIC_API_URL || ''}/api/host`;
+    }
+    await fetch(endpoint, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ level, message, vars }),
+      body: JSON.stringify(batch),
     });
   }
 
-  debug(format: string, ...vars: unknown[]): void {
-    this.log('DEBUG', format, ...vars);
+  async delay(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  debug(format: string, vars?: {}): void {
+    this.log('debug', format, vars);
   }
-  info(format: string, ...vars: unknown[]): void {
-    this.log('INFO', format, ...vars);
+  info(format: string, vars?: {}): void {
+    this.log('info', format, vars);
   }
-  error(format: string, ...vars: unknown[]): void {
-    this.log('ERROR', format, ...vars);
+  error(format: string, vars?: {}): void {
+    this.log('error', format, vars);
   }
 }
 

lib/javascript/fullstack_demo/src/util/logger.ts

@@ -1,8 +1,8 @@
 export interface Logger {
-  log(level: LogLevel, message: string, ...vars: unknown[]): void;
-  debug(format: string, ...vars: unknown[]): void;
-  info(format: string, ...vars: unknown[]): void;
-  error(format: string, ...vars: unknown[]): void;
+  log(level: LogLevel, message: string, vars?: {}): void;
+  debug(format: string, vars?: {}): void;
+  info(format: string, vars?: {}): void;
+  error(format: string, vars?: {}): void;
 }
 
-export type LogLevel = 'DEBUG' | 'INFO' | 'ERROR' | 'WARN';
+export type LogLevel = 'debug' | 'info' | 'error' | 'warn';

lib/javascript/fullstack_demo/src/util/server-logger.ts

@@ -9,7 +9,7 @@ export class WinstonLogger implements Logger {
 
   constructor() {
     this.winstonLogger = winston.createLogger({
-      level: 'info',
+      level: 'debug',
       format: combine(
         format((info) => {
           const headerList = headers();
@@ -20,28 +20,28 @@ export class WinstonLogger implements Logger {
         json(),
       ),
       transports: [
-        new winston.transports.Console(),
+        new winston.transports.Console({ level: 'info' }),
         new winston.transports.File({ filename: 'debug.log', level: 'debug' }),
       ],
     });
   }
 
-  async log(level: LogLevel, message: string, ...vars: unknown[]) {
+  async log(level: LogLevel, message: string, vars: {}) {
     const { userId } = await auth();
     this.winstonLogger.log(level.toLowerCase(), message, { ...vars, userId });
   }
 
-  async debug(format: string, ...vars: unknown[]) {
+  async debug(format: string, vars: {}) {
     const { userId } = await auth();
     this.winstonLogger.debug(format, { ...vars, userId });
   }
 
-  async info(format: string, ...vars: unknown[]) {
+  async info(format: string, vars: {}) {
     const { userId } = await auth();
     this.winstonLogger.info(format, { ...vars, userId });
   }
 
-  async error(format: string, ...vars: unknown[]) {
+  async error(format: string, vars: {}) {
     const { userId } = await auth();
     this.winstonLogger.error(format, { ...vars, userId });
   }