nightingale-browser-console

nightingale-browser-console

Browser console handler for nightingale

Install

npm install --save nightingale-browser-console

Usage

import { configure, levels } from 'nightingale';
import { ConsoleHandler } from 'nightingale-browser-console';

configure([{ handlers: [new ConsoleHandler(Level.INFO)] }]);

Theme

If you have a dark console theme, you can set this config in your localStorage :

localStorage.NIGHTINGALE_THEME = 'dark';

You can also force this option:

import { ConsoleHandler } from 'nightingale-browser-console';

configure([{ handlers: [new ConsoleHandler(Level.INFO, { theme: 'dark' })] }]);

Debug

with localStorage

localStorage.debug = '*'; // debug everything
localStorage.debug = 'app'; // debug for logger with key 'app'
localStorage.debug = 'app,nightingale'; // debug for logger with key 'app' and 'nightingale'
localStorage.debug = '/^app/'; //debug for logger with key starting with 'app'
localStorage.debug = '/^(app|nightingale$)/'; // debug for logger with key starting with 'app' and key 'nightingale'
localStorage.debug = '*,-app'; // debug everything except app
localStorage.debug = '*,-app:*'; // debug everything except app and all its children

with query, in the url

?DEBUG='*'; // debug everything
?DEBUG=app // debug for logger with key 'app'
?DEBUG=app,nightingale // debug for logger with key 'app' and 'nightingale'
?DEBUG=/^app/  // debug for logger with key starting with 'app'
?DEBUG=/^(app|nightingale$)/  // debug for logger with key starting with 'app' and key 'nightingale'
?DEBUG=*,-app // debug everything except app
?DEBUG=*,-app:* // debug everything except app and all its children

Use source maps to display error stack trace

In production:

Send your log to an external tool like sentry. Sentry allows you to send the source maps after building (if you use webpack, you can use hidden-source-map to generate .map files, send them to sentry, and remove them so they are not accessible).

In development:

• Configure your build tool to generate sourcemaps. For webpack: use proper devtool configuration. For best stack trace, use source-map but it's the slowest option.
• Make sure your project uses source-map-support or similar tool. If not, you can install and simply import source-map-support/register.