Browser + Node.js · Structured logging

Konsole

Structured, namespaced logging with beautiful terminal output, child loggers, and flexible transports.

Interactive Demo

Namespace
Child Logger
Log Level
Controls

Output

live output0 lines
Click a log level above to start →
Printoff
ActiveApp
Childoff
Buffered0 entries

How it Works

Konsole works in browser and Node.js. It automatically picks the best output format for each environment and stores every log in a circular buffer for later inspection.

📊
Structured logging
Every entry carries msg, fields, level, levelValue, namespace and timestamp — compatible with Datadog, Loki, and any log aggregator.
🏷️
Child loggers
logger.child({ requestId }) creates an ephemeral child that injects context into every line it produces. Bindings accumulate through nesting.
🎨
Auto formatting
TTY terminal → ANSI pretty. Pipe / CI → NDJSON. Browser → styled %c badges. One format: 'auto' option handles it all.
🚚
Transports
HttpTransport, FileTransport, StreamTransport, ConsoleTransport. Add multiple to one logger. Filter and transform per transport.
💾
Circular buffer
maxLogs: 1000 keeps only the last 1000 entries in memory — no unbounded growth in long-running apps.
Web Worker
useWorker: true offloads storage and HTTP transport to a background thread — keeps the main thread free in high-volume browser apps.

Code Snippets

Six numeric log levels — discard everything below your threshold.

const logger = new Konsole({
  namespace: 'App',
  level: 'info',    // trace + debug discarded
});

logger.trace('→ entering loop');   // 10 — dropped
logger.debug('Cache miss');         // 20 — dropped
logger.info('Server started', { port: 3000 }); // 30 ✅
logger.warn('Memory at 80%');       // 40 ✅
logger.error(new Error('timeout')); // 50 ✅
logger.fatal('Out of memory');      // 60 ✅

Usage Examples

Konsole has no framework dependency — it works everywhere: React, plain HTML, and Node.js servers.

Import as a module in any React app — works with Next.js, Vite, and CRA.

import { Konsole } from 'konsole-logger';

// Create loggers at module level
const logger = new Konsole({ namespace: 'App', format: 'silent' });
const api    = new Konsole({ namespace: 'API', level: 'warn' });

function Dashboard() {
  const handleClick = () => {
    const req = logger.child({ requestId: crypto.randomUUID() });
    req.info('Dashboard loaded', { userId: 42 });
  };

  return <button onClick={handleClick}>Load</button>;
}

// Expose for DevTools debugging
Konsole.exposeToWindow();
Buffer
Level
Namespace
No entries match the current filter
Showing: 0Total: 0
Press Esc to close