@splincode/client-logger

ClientLogger

Lightweight and configurable JavaScript logger (written on TypeScript)

Installation

npm i @splincode/client-logger --save-dev

Motivation

This logger is a handy tool that can be useful in the design and development of the enterprise application level. Easy setting of logging levels and convenient work with groups. Among other things, you can use meta programming (decorators).

Usage

You could easily use this Logger in the browser. You only need to install the package and import it in your scripts before assembly. To see how to use the Logger please follow the link or follow that's link.

You can also run the examples on webpack:

import { ClientLogger } from '@splincode/client-logger';

const logger = new ClientLogger();

Table of contents

• Logging
  • Basic usage API trace, debug, info, warn. error
  • Groups, groupCollapsed, collapsible
  • Nested groups (usage pipe method)
  • Set logging level (worked in single or groups)
  • Customization style line
  • Output pretty json stringify, printJSON
  • Copy json, object, text to clipboard
  • Configuration ClientLogger
• Development
• Contributing
• Run Tests
• Todo

Logging

Example: basic methods

import { ClientLogger } from '@splincode/client-logger';

const logger = new ClientLogger();

logger.trace('trace is worked', 1, { a: 1 });
logger.debug('debug is worked', 2, console);
logger.info('info is worked', 3, Object);
logger.warn('warn is worked', 4, String);
logger.error('error is worked', 5, (2.55).toFixed());

• Default level: All

• Show time

• Disable trace on console (filter):

import { ClientLogger } from '@splincode/client-logger';

const logger = new ClientLogger();

for (let i = 0; i < 20; i++) {
    logger.trace('trace is worked', i);
}

Example: groups

• Logger groups with auto closed (usage callback):

import { ClientLogger } from '@splincode/client-logger';

const logger = new ClientLogger();

logger.groupCollapsed('EXAMPLE 2: show stack', () => {
    logger.trace('trace is worked', 1, { a: 1 });
    logger.debug('debug is worked', 2, console);
    logger.info('info is worked', 3, Object);
    logger.warn('warn is worked', 4, String);
    logger.error('error is worked', 5, (2.55).toFixed());
});

logger.group('Show trace in opened group', ({ trace }) => {
    for (let i = 0; i < 20; i++) {
        trace('trace is worked', i);
    }
});

logger.groupCollapsed('Show trace in collapsed group', ({ trace }) => {
    for (let i = 0; i < 20; i++) {
        trace('trace is worked', i);
    }
});

Example: nested groups

• Logger nested groups (with pipe):

import { ClientLogger } from '@splincode/client-logger';

const logger = new ClientLogger();

logger
    .groupCollapsed('GROUP TEST')
    .pipe(({ trace, debug, info, warn, error }) => {
        trace('trace is worked');
        debug('debug is worked');
        info('info is worked');
        warn('warn is worked');
        error('error is worked');
    })
    .close();

logger
    .group('A')
    .pipe(
        ({ trace }) => trace('trace is worked'),
        ({ debug }) => debug('debug is worked'),
        ({ info }) => info('info is worked'),
        ({ warn }) => warn('warn is worked'),
        ({ error }) => error('error is worked')
    )
    .groupCollapsed('B')
    .pipe(
        ({ trace }) => trace('trace is worked'),
        ({ debug }) => debug('debug is worked'),
        ({ info }) => info('info is worked'),
        ({ warn }) => warn('warn is worked'),
        ({ error }) => error('error is worked')
    )
    .group('C')
    .pipe(
        ({ trace }) => trace('trace is worked'),
        ({ debug }) => debug('debug is worked'),
        ({ info }) => info('info is worked'),
        ({ warn }) => warn('warn is worked'),
        ({ error }) => error('error is worked')
    )
    .closeAll(); // closed all opened group

Example: set minimal logging level

Basic parameterization

import { ClientLogger, LoggerLevel } from '@splincode/client-logger';

const logger = new ClientLogger();

logger.trace.group('A opened', ({ trace }) => trace('trace group is worked'));
logger.debug.group('B opened', ({ debug }) => debug('debug group is worked'));
logger.info.group('C opened', ({ info }) => info('info group is worked'));
logger.warn.group('D opened', ({ warn }) =>  warn('warn group is worked'));
logger.error.group('E opened', ({ error }) => error('error group is worked'));

const level = LoggerLevel.INFO;
logger.log('Set new logger level', LoggerLevel[level]);
logger.level = level;

logger.trace.groupCollapsed('A collapsed', ({ trace }) => trace('trace group is worked'));
logger.debug.groupCollapsed('B collapsed', ({ debug }) => debug('debug group is worked'));
logger.info.groupCollapsed('C collapsed', ({ info }) => info('info group is worked'));
logger.warn.groupCollapsed('D collapsed', ({ warn }) => warn('warn group is worked'));
logger.error.groupCollapsed('E collapsed', ({ error }) => error('error group is worked'));

• Logger level groups (pretty usage API):

import { ClientLogger, LoggerLevel } from '@splincode/client-logger';

const logger = new ClientLogger();

const level = LoggerLevel.INFO;
logger.log('Set new logger level', LoggerLevel[level]);
logger.level = level;

logger.trace.group('A')
    .pipe(({ trace }) => trace('trace is worked from A'))
    .pipe(({ debug }) => debug('debug is worked from A'))
    .pipe(({ info }) => info('info is worked from A'))
    .pipe(({ warn }) => warn('warn is worked from A'))
    .pipe(({ error }) => error('error is worked from A'))
    .close()

    .debug.group('B')
    .pipe(({ trace }) => trace('trace is worked from B'))
    .pipe(({ debug }) => debug('debug is worked from B'))
    .pipe(({ info }) => info('info is worked from B'))
    .pipe(({ warn }) => warn('warn is worked from B'))
    .pipe(({ error }) => error('error is worked from B'))
    .close()

    .info.group('C')
    .pipe(({ trace }) => trace('trace is worked from C'))
    .pipe(({ debug }) => debug('debug is worked from C'))
    .pipe(({ info }) => info('info is worked from C'))
    .pipe(({ warn }) => warn('warn is worked from C'))
    .pipe(({ error }) => error('error is worked from C'))
    .close()

    .warn.group('D')
    .pipe(({ trace }) => trace('trace is worked from D'))
    .pipe(({ debug }) => debug('debug is worked from D'))
    .pipe(({ info }) => info('info is worked from D'))
    .pipe(({ warn }) => warn('warn is worked from D'))
    .pipe(({ error }) => error('error is worked from D'))
    .close()

    .error.group('E')
    .pipe(({ trace }) => trace('trace is worked from E'))
    .pipe(({ debug }) => debug('debug is worked from E'))
    .pipe(({ info }) => info('info is worked from E'))
    .pipe(({ warn }) => warn('warn is worked from E'))
    .pipe(({ error }) => error('error is worked from E'))
    .close();

Set level in constructor ClientLogger

import { ClientLogger, LoggerLevel } from '@splincode/client-logger';

const production = true;
const level = production ? LoggerLevel.INFO : LoggerLevel.ALL;

const logger = new ClientLogger({ minLevel: level });
logger.log('Set current logger level: ', LoggerLevel[level]);

/**
 * OR:
 * const logger = new ClientLogger();
 * logger.level = minLevel;
 *
 */

logger.log('custom output'); // not execute
logger.trace('trace is worked'); // not execute
logger.debug('debug is worked'); // not execute
logger.info('info is worked'); // not execute
logger.warn('warn is worked');
logger.error('error is worked');

Example: set style line

import { ClientLogger } from '@splincode/client-logger';

const logger = new ClientLogger();

logger
    .css({ textTransform: 'uppercase', fontWeight: 'bold' })
    .debug('window current ', window);

logger
    .css('color: red; text-decoration: underline; font-weight: bold')
    .info('It is awesome logger');

logger.warn('logger.css(...) does not define a global format!');
logger.info('For global configuration, use the constructor parameters');

Example: pretty json

import { ClientLogger } from '@splincode/client-logger';
const logger = new ClientLogger();

fetch("http://data.io").then((greatBigJSON) => {
    // default browser print json
    logger.debug("Classic output json", greatBigJSON);
    
    // for pretty json usage logger.log method
    logger.log(...logger.stringify(greatBigJSON));
    
    // or minimal usage (but does not work source map)
    logger.printJSON(greatBigJSON);
    
});

import { ClientLogger } from '@splincode/client-logger';
const logger = new ClientLogger();

fetch("http://data.io").then((greatBigJSON) => {
    
    logger
        .group('Classic output json:')
        .pipe(({ debug }) => debug('Classic output json: ', greatBigJSON))
        .close()
        .group('Pretty output json:')
        .pipe(({ log, stringify }) => log(...stringify(greatBigJSON)))
        .close();
    
});

Example: clipboard

import { ClientLogger, LoggerLevel } from '@splincode/client-logger';

const logger = new ClientLogger();
const JsonValue = { a: 1, b: [1, 2, 3] };

logger.group('copy JSON', ({ log, stringify, clipboard }) => {
    log(...stringify(clipboard.copy(JsonValue)));
    log('The object you have on the clipboard ...');
});

Example: full configurations

import { ClientLogger, LoggerLevel } from '@splincode/client-logger';
import { MyConsole } from 'node_modules/custom-logger';
// ..

const logger = new ClientLogger({

    // Drop-in replacement for console, if needed
    consoleInstance: <Console> new MyConsole(),
    
    // Minimal execute signature
    minLevel: LoggerLevel.INFO,

    // Custom color
    configColor: {
        [LoggerLevel.TRACE]: 'Grey',
        [LoggerLevel.DEBUG]: 'Blue',
        [LoggerLevel.INFO]: 'Green',
        [LoggerLevel.WARN]: 'Orange',
        [LoggerLevel.ERROR]: 'Red',
    },

    // Custom label
    configLabel: {
        [LoggerLevel.TRACE]: 'trace: ',
        [LoggerLevel.DEBUG]: 'debug: ',
        [LoggerLevel.INFO]: 'info: ',
        [LoggerLevel.WARN]: 'warn: ',
        [LoggerLevel.ERROR]: 'error: ',
    }

});

logger.trace('trace is worked', 1, { a: 1 }); // not execute
logger.debug('debug is worked', 2, console); // not execute
logger.info('info is worked', 3, Object);
logger.warn('warn is worked', 4, String);
logger.error('error is worked', 5, (2.55).toFixed());

Development

Install the dependencies:

npm install

Run the dev server

npm start

Contributing

Your commit messages have to be in this format:

type(category): description [flags]

Where type is one of the following:

• breaking
• build
• ci
• chore
• docs
• feat
• fix
• other
• perf
• refactor
• revert
• style
• test

Run Tests

All logger tests are written with mocha, chai.

npm test

Todo

• [x] Override console
• [x] Logger method (trace, debug, info, warning, error)
• [x] Logger group + groupCollapsible (pipes)
• [x] Logger pretty write object
• [x] Set style by css
• [x] Logger level groups (trace, debug, info, warn, error)
• [x] Clipboard data
• [ ] Set global style + add another css class
• [ ] Format output console
• [ ] Dependency Injection for Angular
• [ ] Switch enable/disable default console output
• [ ] Profiling (memory usage, sizeof, time execute)
• [ ] Timers (decorator)
• [ ] Pre process output
• [ ] Cross-browser fixing

About

Author: Maxim Ivanov