feat: tweak logger buffer

src/utils/logger.ts

@@ -1,7 +1,7 @@
 import { signal } from '@preact/signals';
 
 export interface LogLine {
-  type: 'info' | 'error';
+  type: 'info' | 'warn' | 'error';
   line: string;
   index: number;
 }
@@ -13,28 +13,60 @@ export const logLinesSignal = signal<LogLine[]>([]);
  */
 class Logger {
   private index = 0;
+  private buffer: LogLine[] = [];
+  private bufferTimer: number | null = null;
 
   public info(line: string, ...args: any[]) {
     console.info('[twitter-web-exporter]', line, ...args);
-    logLinesSignal.value = [...logLinesSignal.value, { type: 'info', line, index: this.index++ }];
+    this.writeBuffer({ type: 'info', line, index: this.index++ });
+  }
+
+  public warn(line: string, ...args: any[]) {
+    console.warn('[twitter-web-exporter]', line, ...args);
+    this.writeBuffer({ type: 'warn', line, index: this.index++ });
   }
 
   public error(line: string, ...args: any[]) {
     console.error('[twitter-web-exporter]', line, ...args);
-    logLinesSignal.value = [...logLinesSignal.value, { type: 'error', line, index: this.index++ }];
+    this.writeBuffer({ type: 'error', line, index: this.index++ });
   }
 
-  public errorWithBanner(msg: string, err: Error) {
+  public errorWithBanner(msg: string, err?: Error, ...args: any[]) {
     this.error(
-      `${msg} (Message: ${err.message})\n` +
+      `${msg} (Message: ${err?.message ?? 'none'})\n` +
         '  This may be a problem caused by Twitter updates.\n  Please file an issue on GitHub:\n' +
-        '  https://github.com/prinsss/twitter-web-exporter/issues'
+        '  https://github.com/prinsss/twitter-web-exporter/issues',
+      ...args,
     );
   }
 
   public debug(...args: any[]) {
     console.debug('[twitter-web-exporter]', ...args);
   }
+
+  /**
+   * Buffer log lines to reduce the number of signal and DOM updates.
+   */
+  private writeBuffer(log: LogLine) {
+    this.buffer.push(log);
+
+    if (this.bufferTimer) {
+      clearTimeout(this.bufferTimer);
+    }
+
+    this.bufferTimer = window.setTimeout(() => {
+      this.bufferTimer = null;
+      this.flushBuffer();
+    }, 0);
+  }
+
+  /**
+   * Flush buffered log lines and update the UI.
+   */
+  private flushBuffer() {
+    logLinesSignal.value = [...logLinesSignal.value, ...this.buffer];
+    this.buffer = [];
+  }
 }
 
 /**