Logs MCP - Singleton Console Logger

A singleton console log collector that works across multiple bundles in the browser. It intercepts all console methods and stores logs in memory for later retrieval.

Features

• True Singleton: Uses window object to ensure only one instance exists across all bundles
• Auto-capture: Intercepts console.log, console.warn, console.error, console.info, and console.debug
• Memory efficient: Configurable maximum log entries with FIFO rotation
• Cross-bundle: Multiple bundles can use the same logger instance
• Type-safe: Full TypeScript support

Installation

npm install logs-mcp

Usage

Basic Usage

import { init, getLogs, getLogsAsString } from 'logs-mcp/browser'

// Initialize the singleton logger (safe to call multiple times)
init({ maxLogs: 1000 })

// Your console logs are now being captured
console.log('Hello world')
console.error('An error occurred', new Error('Test error'))

// Get all logs as array
const logs = getLogs()
// Output: [{ level: 'log', message: ['Hello world'], timestamp: 1234567890 }, ...]

// Get logs as formatted string
const logsString = getLogsAsString()
// Output: "[2024-01-01T00:00:00.000Z] [LOG] Hello world\n[2024-01-01T00:00:00.001Z] [ERROR] An error occurred..."

Singleton Behavior

The logger is a true singleton - multiple imports or bundles will share the same instance:

// bundle1.js
import { init } from 'logs-mcp/browser'
init({ maxLogs: 500 })

// bundle2.js
import { init, getLogs } from 'logs-mcp/browser'
init({ maxLogs: 1000 }) // This won't create a new instance, just returns existing one

// Both bundles share the same logs
const allLogs = getLogs() // Contains logs from both bundles

API Reference

init(options?: { maxLogs?: number })

Initialize the singleton logger. Safe to call multiple times.

• maxLogs: Maximum number of log entries to keep (default: 1000)

getLogsCollector()

Get the singleton ConsoleLogCollector instance. Creates one if it doesn't exist.

getLogs(): LogEntry[]

Get all captured logs as an array.

getLogsAsString(): string

Get all logs formatted as a string with timestamps.

getLogsByLevel(level: 'log' | 'warn' | 'error' | 'info' | 'debug'): LogEntry[]

Get logs filtered by level.

clearLogs()

Clear all captured logs.

stop()

Stop capturing logs and restore original console methods.

isInitialized(): boolean

Check if the logger is currently initialized and capturing.

LogEntry Interface

interface LogEntry {
  level: 'log' | 'warn' | 'error' | 'info' | 'debug'
  message: any[]
  timestamp: number
  stack?: string // Present for errors
}

Advanced Usage

Using the ConsoleLogCollector directly

For more control, you can use the ConsoleLogCollector class directly:

import { ConsoleLogCollector, createConsoleLogCollector } from 'logs-mcp/browser'

// Create your own instance (not singleton)
const collector = createConsoleLogCollector({ maxLogs: 500 })
collector.start()

// Use console methods as normal
console.log('Test message')

// Get logs
const logs = collector.getLogs()

// Stop collecting
collector.stop()

Use Cases

• Error Reporting: Capture console logs to include with error reports
• Debugging: Access console history in production environments
• Testing: Verify console output in tests
• Monitoring: Track warnings and errors across your application
• Multi-bundle Apps: Share logs across micro-frontends or lazy-loaded modules

Browser Support

Works in all modern browsers that support ES6+ features.

Development

Scripts

• pnpm dev - Start development mode with watch
• pnpm build - Build the package
• pnpm test - Run all tests
• pnpm typecheck - Run TypeScript type checking
• pnpm lint - Run ESLint
• pnpm format - Format code with Prettier
• pnpm pub --name <name> - Publish package to npm

License

MIT