ClickON logger

Introduction

The package provides console extension and emulation functions

Useful in cases where it is necessary to:

• Visually organize console output in the browser
• Display console output inside an HTML element
• Highlight elements by type
• Tag console output with slices and filter by them
• Store console output in history (suppress immediate output) and display it later

Installation

just install the package: @clickon/logger (for npm):

npm i @clickon/logger

Initiation and exit

const logger = new ClickONLogger();
logger.log('Hello world!');

Now it is possible configure the instance of logger:

const config: TClickLoggerOptions = {
	inSilentMode:false,
	historyLength:3000,
	styled:true,
	markSlice:true
}
logger.configure(config);

For getting help

const logger = new ClickONLogger();
logger.help(); // will print help in console

Modes

Logger supports various predefined output formatting styles.

They help make the output more illustrative and allow visual control of key points during app execution. In some cases, they reduce the time needed to find relevant information in the console to a single glance at the screen.

const logger = new ClickONLogger();
logger.log.header1('The awesome application has started.');
const foo = new Foo();
foo.init();
logger.log.init('Foo');
//...

Headers

• header1, header2, ..., header5

Empty line

• br
• clearLine

Timer

• time
• timeEnd

Instances logic

• add
• init
• delete
• dispose

Status

• activate
• deactivate

In/Out

• inMessage
• outMessage

Pretty output

• flat

Warnings and Errors

• warn
• error

All modes are listed in the help.

Types highlighting

The logger recognizes primitive JavaScript types and highlights them. It also creates special outputs in certain cases, for example, it can immediately display a plain object as a structure with easily perceivable indentation and highlighting.

The number of nesting levels, string length, and other parameters are configurable at runtime.

Slices

Any output can be tagged with a set of slices and marked to indicate which logical\technical\algorithmic slice the output belongs to.

For example, we may need to track the logic in the following slices:

• Network communication
• UI operations
• 3D viewer operations
• Performance

In the code, we mark key points with slices:

logger.slice('3D', 'IO').log('Fetch scene');
logger.slice('3D', 'Performance').time('prepare scene');
fetchScene();
logger.slice('3D', 'Peroformance').timeEnd('prepare scene');
//...
logger.slice('UI').log()
showUserData();

It is now possible to see these markers in the console or request output of only the lines from the desired slices. For example, '3D' and 'Performance':

logger.setFilteredSlices('3D', 'Performance');
// Fetch scene
// Timer prepare scene
// Timer prepare scene 520.300

It is also possible to use a persistently enabled slice that will tag all subsequent output.

logger.setSlices('headers');
logger.log.header2('Header2 message');
logger.log.header3('Header3 message');
logger.log.header4('Header4 message');
logger.setSlices();

History

The logger can suppress output and simply store it in its history, providing the ability to view the output later or clear the history.

logger.configure({isSlilentMode:true});
logger.log.header3('Hidden side procces');
logger.log('Count of passes: ', passesCount);
// nothing in console output

logger.showHistory();
// Hidden side process
// Count of passes: 3

Custom out

The Logger can partially emulate console output, which is useful when debugging applications in situations where access to the console is inconvenient or difficult. For example, in emulators or when running on a device that is not currently connected to a debugger.

An HTML element can be specified to transmit the output to the console. Both slice and silent modes are supported.

const loggerHTMLOut = document.getElementById('div-log');
if(loggerHTMLOut) logger.outElement = loggerHTMLOut;
// switch output to HTML element
// ...

logger.outElement = 'CONSOLE';
// return output back

Decorators

The system also provides decorators for class attributes and functions. They allow tracking the execution and duration of functions, as well as changes to attributes. All decorators collected in "LoggerDecs":

import {LoggerDecs} from './LoggerDecs';

class MyClass {
	@LoggerDecs.Watch()
	public watchedAttribute = 5;
	
	@LoggerDecs.Fn(false, true)
	myFunc() {
		this.watchedAttribute++;
	}
}

const mc = new MyClass();
mc.myFunc();
// * call MyClass.myFunc (no parameters)
// * MyClass.visibleAttribute: 5 ➔ 6
// * MyClass.myFunc finished in 2ms

Decorators support various modes for different output formatting.