gajus / roarr-browser-log-writer

Roarr log writer for use in a web browser.

Roarr Browser Log Writer

Roarr log writer for use in a web browser.

Usage

Import the initialization code anywhere in your codebase, e.g.

import {
  createLogWriter,
} from '@roarr/browser-log-writer';

globalThis.ROARR = globalThis.ROARR ?? {};
globalThis.ROARR.write = createLogWriter();

Alternatively, import @roarr/browser-log-writer/init, which is equivalent to the above code.

import '@roarr/browser-log-writer/init';

If you are using Webpack, then consider using lazy loading, e.g.

import('@roarr/browser-log-writer/init');

Displaying Logs

Logs are produced using console.log. However, by default, no logs are printed.

The simplest way to view all logs is to define ROARR_LOG=true localStorage value, i.e.

Type in console localStorage.setItem('ROARR_LOG', 'true') and refresh the page. Now you should see all the logs.

Filtering Logs

By default all logs are displayed. However, you can narrow down logs using a special constant ROARR_FILTER.

The value of ROARR_FILTER is a Liqe query, e.g.

# Only print logs with `context.logLevel` greater than 10.
localStorage.setItem('ROARR_FILTER', 'context.logLevel:>10')

# Only print logs with `context.namespace` containing "slonik".
localStorage.setItem('ROARR_FILTER', 'context.namespace:slonik')

roarr-browser-log-writer's Issues

Customize context format to avoid "cyclic object value"

Hello @gajus,

thanks for your nice work on this lib :)

I try to move my project from debug to Roarr,

but if face an issue with the formatter, i have quite a few complex structure logged, and they crash the app with an error
"cyclic object value".

first, it's a bit sad to the whole app crash in logging, maybe we can be a bit more defensive while logging (like break the logging not the app)

but then we could maybe do like in debug, allow custom formatter for the logged values (%j for example) to customize it

wdyt ?

have pretty print on both browser and server side

I'm using NextJS and want logger to be prettily on both browser and server side,
however I found it a bit difficult to setup.

I'm currently doing something like this

const browserLogWriter = createLogWriter();
const nodeLogWriter = createNodeWriter();

ROARR.write = message => {
    if (typeof window !== 'undefined') {
        browserLogWriter(message);
    } else {
        nodeLogWriter(message);
    }
};

if (typeof window !== 'undefined') {
    localStorage.setItem('ROARR_LOG', 'true');
    localStore.setItem('ROARR_LOG', `context.logLevel:>${LOG_LEVEL}`);
}

is there a better way to use this browser writer without compromising node printing?

Add `peerDependencies` in package.json

The current version of 1.3.0 package.json does not configure peerDependencies, including version control for roarr, I use roarr-browser-log-writer in monorepo automatically depends on a very old version of roarr.