logger-max

Styled console logger with emoji prefixes and environment-aware filtering. Framework-agnostic: works with React, Vue, Angular, Svelte, Node.js, or plain JS.

Install

npm install logger-max

Quick Start

import logger from 'logger-max';

logger.info('App initialized');
logger.warn('Deprecated API usage');
logger.error('Failed to fetch', { status: 500 });
logger.debug('State update', { prev, next });
logger.critical('Database connection lost');

Custom Setup

import { createLogger } from 'logger-max';

export const logger = createLogger({
  isProduction: process.env.NODE_ENV === 'production',
  prefix: 'MyApp',
  qaParam: true,
  silent: false,
});

Log Types

| Method | Emoji | Console | Visible in production | |--------|-------|---------|-----------------------| | logger.log(...) | 📝 | console.log | No | | logger.info(...) | ℹ️ | console.log | No | | logger.specialInfo(...) | 🔍 | console.log | No | | logger.warn(...) | ⚠️ | console.warn | No | | logger.warnInfo(...) | ℹ️ | console.warn | No | | logger.error(...) | ❌ | console.error | Yes | | logger.critical(...) | 🚨 | console.error | Yes | | logger.debug(...) | 🐛 | console.log | No | | logger.devMode(...) | 🚧 | console.log | No | | logger.event(provider, ...args) | - | console.log | No | | logger.abTest(...) | 🎯 | console.log | Yes |

Production QA Marker

In production (isProduction: true), only error, critical, and abTest logs are shown by default.

qaParam lets you temporarily reveal all logs on a production URL:

createLogger({ isProduction: true });
// Enables hidden logs with ?qa_log=true

createLogger({ isProduction: true, qaParam: 'debug_console' });
// Enables hidden logs with ?debug_console=true

createLogger({
  isProduction: true,
  qaParam: { name: 'debug_console', value: 'letmein' },
});
// Enables hidden logs with ?debug_console=letmein

createLogger({ isProduction: true, qaParam: false });
// Disables URL-based QA reveal

Event Logging

Events take a provider as the first argument and support a custom color as the last argument:

logger.event('Analytics', 'Page viewed', { page: '/home' });
logger.event('Stripe', 'Payment processed', '#00aa00');

Objects & Arrays

Pass objects, arrays, errors, and functions alongside text. Inspectable values render as expandable console items:

logger.info('User data', { name: 'Alex', role: 'admin' });
logger.debug('Items loaded', [1, 2, 3]);
logger.error('Request failed', new Error('timeout'));

Custom Log Types

const logger = createLogger({
  customTypes: {
    NETWORK: {
      name: 'network',
      label: 'NET',
      emoji: '🌐',
      consoleMethod: 'log',
      styles: {
        color: '#1565C0',
        backgroundColor: '#E3F2FD',
        fontSize: '12px',
        fontWeight: 'bold',
        padding: '2px 4px',
        borderRadius: '3px',
      },
      showInProduction: false,
    },
  },
});

logger.network('GET /api/users', { status: 200 });

Style Overrides

Override styles for built-in or custom types without replacing the whole config:

const logger = createLogger({
  styleOverrides: {
    ERROR: { backgroundColor: '#000', color: '#ff4444' },
    INFO: { fontSize: '14px' },
  },
});

Runtime Reconfiguration

logger.configure({ silent: true });
logger.configure({ silent: false, prefix: 'v2' });
logger.configure({ qaParam: { name: 'debug_console', value: 'letmein' } });

Framework Examples

React

// src/logger.js
import { createLogger } from 'logger-max';

export const logger = createLogger({
  isProduction: process.env.NODE_ENV === 'production',
  prefix: 'MyApp',
});

// src/components/App.jsx
import { logger } from '../logger';

function App() {
  logger.info('App rendered');
  return <div>Hello</div>;
}

Vue

// src/plugins/logger.js
import { createLogger } from 'logger-max';

export const logger = createLogger({
  isProduction: import.meta.env.PROD,
  prefix: 'VueApp',
});

// src/main.js
import { logger } from './plugins/logger';
app.config.globalProperties.$logger = logger;

Node.js

const { createLogger } = require('logger-max');

const logger = createLogger({
  isProduction: process.env.NODE_ENV === 'production',
});

logger.info('Server started on port 3000');

TypeScript

Full type definitions included:

import { createLogger, LoggerConfig, LoggerInstance } from 'logger-max';

API Reference

createLogger(config?: LoggerConfig): LoggerInstance

Creates a new logger instance.

LoggerConfig

| Property | Type | Default | Description | |----------|------|---------|-------------| | isProduction | boolean | auto-detect | Production mode | | prefix | string | - | Global prefix | | qaParam | boolean \| string \| { name: string; value?: string \| boolean } | true | URL marker that reveals hidden production logs | | silent | boolean | false | Disable all logging | | customTypes | LogTypesMap | - | Add log types | | styleOverrides | Record<string, Partial<StyleObject>> | - | Override styles |

License

MIT