Logging

SALVO-TS provides a standardized interface for logging in your project.

caution

Do not use console.log and related methods in your code. Always use the SALVO logging functions.

The reason for this is because SALVO automatically suppresses most logging in production (and has features for re-enabling it for debugging - read on.) This helps keep things clean, but is also a technical requirement for some clients.

In components and pages

In components and pages you can log via this.$log:

tip

When using this interface, log messages automatically indicate the name of the component or page that they were called in.

See the API docs for TaggedLog (which this.$log is an instance of) for detailed docs.

typescript
// Log a simple message at various log levels
this.$log.debug('Hello world!');     // Detailed info for debugging - hidden in production
this.$log.info('Hello world!');      // General info - hidden in production
this.$log.warning('Hello world!');   // Non-error warnings - shown in production
this.$log.error('Hello world!');     // Errors! - shown in production
this.$log.fatal('Hello world!');     // Errors which are likely to cause fundemental issues with the site - shown in production
// All of the above also support passing an object as the second parameter
this.$log.debug('Hello world!', {foo: 'bar'});
this.$log.info('Hello world!', {foo: 'bar'});
this.$log.warning('Hello world!', {foo: 'bar'});
this.$log.error('Hello world!', {foo: 'bar'});
this.$log.fatal('Hello world!', {foo: 'bar'});
// Timers (debug)
this.$log.time('timer name');     // Starts a timer - disabled in production
this.$log.timeLog('timer name');  // Log a timer's time - disabled in production
this.$log.timeEnd('timer name');  // Stop a timer and log it's time - disabled in production
// Other helper functions
this.$log.table('Hello world!', [{foo: 'bar'}, {foo: 'baz'}]); // Similar to console.table() - debug - hidden in production

typescript
// Log a simple message at various log levels
this.$log.debug('Hello world!');     // Detailed info for debugging - hidden in production
this.$log.info('Hello world!');      // General info - hidden in production
this.$log.warning('Hello world!');   // Non-error warnings - shown in production
this.$log.error('Hello world!');     // Errors! - shown in production
this.$log.fatal('Hello world!');     // Errors which are likely to cause fundemental issues with the site - shown in production
// All of the above also support passing an object as the second parameter
this.$log.debug('Hello world!', {foo: 'bar'});
this.$log.info('Hello world!', {foo: 'bar'});
this.$log.warning('Hello world!', {foo: 'bar'});
this.$log.error('Hello world!', {foo: 'bar'});
this.$log.fatal('Hello world!', {foo: 'bar'});
// Timers (debug)
this.$log.time('timer name');     // Starts a timer - disabled in production
this.$log.timeLog('timer name');  // Log a timer's time - disabled in production
this.$log.timeEnd('timer name');  // Stop a timer and log it's time - disabled in production
// Other helper functions
this.$log.table('Hello world!', [{foo: 'bar'}, {foo: 'baz'}]); // Similar to console.table() - debug - hidden in production

Elsewhere

Outside of component and page classes, you can get a reference to the general Logger by importing the log object.

Note that this interface is identical to the above, but takes an additional 'tag' parameter. The tag should be something that indicates where this log was called from - i.e. a class or file name.

typescript
import {log} from 'salvo-ts'
// Log a simple message at various log levels
log.debug('MyExample', 'Hello world!');     // Detailed info for debugging - hidden in production
log.info('MyExample', 'Hello world!');      // General info - hidden in production
log.warning('MyExample', 'Hello world!');   // Non-error warnings - shown in production
log.error('MyExample', 'Hello world!');     // Errors! - shown in production
log.fatal('MyExample', 'Hello world!');     // Errors which are likely to cause fundemental issues with the site - shown in production
// All of the above also support passing an object as the second parameter
log.debug('MyExample', 'Hello world!', {foo: 'bar'});
log.info('MyExample', 'Hello world!', {foo: 'bar'});
log.warning('MyExample', 'Hello world!', {foo: 'bar'});
log.error('MyExample', 'Hello world!', {foo: 'bar'});
log.fatal('MyExample', 'Hello world!', {foo: 'bar'});
// Timers ('MyExample', debug)
log.time('MyExample', 'timer name');     // Starts a timer - disabled in production
log.timeLog('MyExample', 'timer name');  // Log a timer's time - disabled in production
log.timeEnd('MyExample', 'timer name');  // Stop a timer and log it's time - disabled in production
// Other helper functions
log.table('MyExample', 'Hello world!', [{foo: 'bar'}, {foo: 'baz'}]); // Similar to console.table() - debug - hidden in production

typescript
import {log} from 'salvo-ts'
// Log a simple message at various log levels
log.debug('MyExample', 'Hello world!');     // Detailed info for debugging - hidden in production
log.info('MyExample', 'Hello world!');      // General info - hidden in production
log.warning('MyExample', 'Hello world!');   // Non-error warnings - shown in production
log.error('MyExample', 'Hello world!');     // Errors! - shown in production
log.fatal('MyExample', 'Hello world!');     // Errors which are likely to cause fundemental issues with the site - shown in production
// All of the above also support passing an object as the second parameter
log.debug('MyExample', 'Hello world!', {foo: 'bar'});
log.info('MyExample', 'Hello world!', {foo: 'bar'});
log.warning('MyExample', 'Hello world!', {foo: 'bar'});
log.error('MyExample', 'Hello world!', {foo: 'bar'});
log.fatal('MyExample', 'Hello world!', {foo: 'bar'});
// Timers ('MyExample', debug)
log.time('MyExample', 'timer name');     // Starts a timer - disabled in production
log.timeLog('MyExample', 'timer name');  // Log a timer's time - disabled in production
log.timeEnd('MyExample', 'timer name');  // Stop a timer and log it's time - disabled in production
// Other helper functions
log.table('MyExample', 'Hello world!', [{foo: 'bar'}, {foo: 'baz'}]); // Similar to console.table() - debug - hidden in production

Enabling full logging in production

A theme that has been built in production mode will not include most logging by default.

You can enable logging in your browser by running the following in your console:

typescript
__SALVO__.overrideLogLevel('DEBUG');

typescript
__SALVO__.overrideLogLevel('DEBUG');

This setting will persist until your localStorage is cleared, so feel free to reload the page.

If you would like to clear this, run the following to reset:

typescript
__SALVO__.overrideLogLevel(null);

typescript
__SALVO__.overrideLogLevel(null);