DEV Community

Andrew Stacy
Andrew Stacy

Posted on • Updated on

Better JS Logging for Micro-Frontends, Browser, Node

Official documentation can be found here:

Hey everyone, I recently released version 1.1 of Adze, a library that solves a lot of the pain points of handling logs in multiple environments and logging with modular systems like micro-frontends.

As you may already be aware there are a number of other good JS libraries out there to assist with logging. The focus of Adze is to provide a convenient and clean API, provide first-class TypeScript support, and to empower you to take command of your logs rather than pigeon-hole you into a specific way of handling them.

Here is a list of the features that Adze provides:

  • First-class TypeScript support
  • Multi-environment support for the Browser and Node
  • Wraps and extends the entire standard API
  • A fluent, chainable API
  • Log Listeners for capturing log data
  • Log annotation namespaces, labels, and other meta data
  • Attractive styling (EMOJI'S INCLUDED and consistent across major browsers)
  • Everything is configurable
  • Enables completely custom log levels
  • A global log store for recalling logs and overriding configuration (supports micro-frontends and modules)
  • Support for Mapped Diagnostic Context
  • Convenient unit testing environment controls
  • Advanced Log Filtering
  • and much more...

Default Output Example

Beyond the new features that Adze provides you, it also wraps the entire console web standard.


// ----- setup.js ----- //
import { adze, createShed } from 'adze';

// Adze can be used without any configuration.
adze().log('Hello World!');

// But you'll likely want to set it up like this...

/* A shed is a global log store used for listeners and caching 
   as well as configuration overrides. */
const shed = createShed();

/* Let's create a log listener to transport our log data
   to a destination. We'll listen to all log levels. */
shed.addListener('*', (data, render) => {
  /* If a log does not render then we will ignore transporting 
     it. */
  if (render) {
    // Do transport logic here.

// Let's create an Adze configuration (or import it from an env file).
const cfg = {
  logLevel: 1,

// Now we'll create a new factory using seal
export const log = adze(cfg).label('foo').count.seal();
Enter fullscreen mode Exit fullscreen mode
// ----- elsewhere.js ----- //
import { log } from '~/setup.js';

// And now we can create new logs using our new factory
log().error('An error occurred! Oh no!');
log().error('Another error occurred! Quick! Help!');
log().log("I won't display because my log level is too high.");
Enter fullscreen mode Exit fullscreen mode

Top comments (0)