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.