@future-widget-lab/ui-logger

An opinionated but minimal logger built on top of loglevel. It allows you to define custom log levels, emojis for different log types, and control debug level logs based on URL search parameters.

Features

• Custom log levels and message formatting.
• Debug logging controlled by URL search parameters.
• Fine-grained control over debug visibility using tags.
• Emoji support for different log types.
• Optional side effects after a message is printed.

Installation

npm install @future-widget-lab/ui-logger

Usage

Basic Example

import { createLogger } from '@future-widget-lab/ui-logger';

const logger = createLogger({
  level: 'info'
});

logger.info({}, 'Application started');
logger.error({ errorCode: 500 }, 'Internal server error');

Debugging

To enable debug logs for a specific tag, add the corresponding search parameter to the URL.

const logger = createLogger({
  level: 'debug',
  allTag: 'all',
  debugSearchParameterName: 'debug'
});

logger.debug('auth-module', { user: 'test' }, 'Authentication successful');

To see the debug logs, navigate to:

http://example.com/?debug=auth-module

Or use the catch-all tag:

http://example.com/?debug=all

Customizing Log Emojis

const logger = createLogger({
  level: 'info',
  debugEmoji: '🐛',
  errorEmoji: '❌',
  infoEmoji: 'ℹ️',
  traceEmoji: '🔍',
  warnEmoji: '⚠️'
});

Handling Log Side Effects

You can perform custom actions after a log message is printed by using the onAfterMessage option. The logger handles formatting, while onAfterMessage can trigger side effects such as API calls.

const logger = createLogger({
  level: 'info',
  onAfterMessage: ({ level, timestamp, payload, message }) => {
    sendLogToAnalytics({ level, timestamp, payload, message });
  }
});

API Reference

createLogger(options: CreateLoggerOptions)

Creates a new logger instance with the specified configuration options.

Options

Option	Type	Default	Description
level	LogLevelDesc		Sets the default log level.
allTag	string	'all'	Catch-all tag for debug logs.
debugSearchParameterName	string	'debug'	Name of the search parameter for debug logs.
shouldDebug	ShouldDebug	Internal Helper	Custom function to determine if debug logs should be printed.
debugEmoji	string	'🕵'	Emoji for debug logs.
errorEmoji	string	'📕'	Emoji for error logs.
infoEmoji	string	'📘'	Emoji for info logs.
traceEmoji	string	'📓'	Emoji for trace logs.
warnEmoji	string	'📒'	Emoji for warn logs.
onMessage	function	undefined	Custom message formatting handler.
onAfterMessage	function	undefined	Side-effect handler after logging.

Methods

• debug(tag: string, object: object, message: string): Logs a debug message.
• error(object: object, message: string): Logs an error message.
• info(object: object, message: string): Logs an informational message.
• trace(object: object, message: string): Logs a trace message.
• warn(object: object, message?: string): Logs a warning message.

License

MIT