Utilities

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.) This helps keep things clean, but is also a technical requirement for some clients.

Log levels
Level	Description	Default visibility
DEBUG	Detailed debugging info	Hidden in production
INFO	General information	Hidden in production
WARN	Non-error warning messages	Shown in production
ERROR	Error messages	Shown in production
FATAL	Errors likely to cause fundamental issues with the entire site	Shown in production

In components

In components you can log via this.$log. This automatically includes the name of the component in the log message.

src/components/ExampleComponent.ts
ts
// 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.warn('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' });
 
// 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([{ foo: 'bar' }, { foo: 'baz' }]); // Similar to console.table() - debug - hidden in production

src/components/ExampleComponent.ts
ts
// 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.warn('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' });
 
// 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([{ foo: 'bar' }, { foo: 'baz' }]); // Similar to console.table() - debug - hidden in production

Elsewhere

Outside of components, you can import and use the log object.

This interface is nearly identical but takes an additional 'tag' as the first parameter. The tag should be something that indicates where this log was made - i.e. a class or file name.

src/theme/Cart.ts
ts
import {log} from 'salvo-ts'
log.debug('Cart', 'Hello world!');

src/theme/Cart.ts
ts
import {log} from 'salvo-ts'
log.debug('Cart', 'Hello world!');

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:

Console
ts
__SALVO__.overrideLogLevel('DEBUG');

Console
ts
__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:

Console
ts
__SALVO__.overrideLogLevel(null);

Console
ts
__SALVO__.overrideLogLevel(null);