@dccs/teff-log

Minimal, zero-dependency, version-agnostic logger for frontend apps.
Controllable at runtime from the browser console across all libraries that use it.

✨ Features

• Log levels: DEBUG, INFO, WARN, ERROR
• Global runtime control from DevTools
• Version-agnostic (works across multiple bundles/libs)
• App-level configuration supported
• Global config has highest priority
• Stores last N(configurable) messages in a global queue
• Timestamps included in logs
• Zero runtime dependencies
• Hash-Based Configuration
• Works in browsers, web workers, Node.js and SSR (globalThis-based)

🧠 Key Concept

The logger does not keep its own state.

Instead, it reads the log level dynamically on every log call from:

window.__teff__.logger.level

This allows changing log verbosity at runtime without reload and affects all libraries using this logger.

📦 Installation

npm install @dccs/teff-log

🚀 Usage

import { Logger, LogLevel } from '@dccs/teff-log';

Logger.info('App started');
Logger.debug('Debug message');
Logger.warn('Something looks off');
Logger.error('Something failed');

// Read the messages stored in the global queue
const messages = Logger.getMessages();

⚙️ Default Behavior

If nothing is configured, the log level defaults to:

INFO

🖥️ Control Logs From Browser Console (Highest Priority)

Open DevTools and run:

window.__teff__.logger.level = 'DEBUG';

• Takes effect immediately
• No page reload
• Affects all apps and libraries using teff-log

Change anytime:

window.__teff__.logger.level = 'ERROR';

🏗️ Configure From Application Code

You can also configure the logger from your app:

Logger.setLevel(LogLevel.WARN);

🔗 Hash-Based Configuration

You can configure the logger immediately via URL hash parameters, without opening DevTools:

https://example.com/#/dashboard?teffLogLevel=DEBUG&teffMaxMessages=50

• teffLogLevel → sets the initial log level (DEBUG, INFO, WARN, ERROR)
• teffMaxMessages → sets the maximum number of messages stored in the global queue

This is read automatically on page load, so your logger starts with the configured level and queue size before any code calls Logger methods.

Priority order

1. window.__teff__.logger.level (DevTools / global)
2. Logger.setLevel(...) (application)
3. Default → INFO

🌍 Global Object Availability

As soon as any bundle that uses teff-log is loaded, this object is guaranteed to exist:

window.__teff__.logger

So this never throws, even before the first log:

window.__teff__.logger.level = 'DEBUG';

Under the hood the object lives on globalThis, so the logger also works in web workers, Node.js and SSR. In the browser, window.__teff__ and globalThis.__teff__ are the same object.

📝 Example Output

2026-02-09T12:34:56.789Z [INFO] App started
2026-02-09T12:34:57.123Z [DEBUG] Fetching data...
2026-02-09T12:34:58.456Z [ERROR] Request failed

📄 License

MIT