browlog v1.3.4

Browlog

Automatically log any errors happening in your app!

Disclaimer

Browlog is simply just an extension which instantly post to any specified reporter(s).

This means, this extension doesn't have a dashboard like other monitoring tools since this is a very lightweight error logger by utilizing error events.

If this is enough for your needs, then let's get started!

Installation

npm i browlog

Usage

Browlog uses singleton approach, you need to call the init as following:

import browlog from 'browlog';
import slackReporter from 'browlog/reporters/slack';

browlog({
  reporters: [
    slackReporter('<webhook_url>'),
  ]
});

Browlog will start to listen to any errors happening in your app. Hence, I would suggest to init browlog as early as possible.

Also please remember that this is only for client-side logger, if this code also runs in server (SSR / prerender), you should not init browlog when the code is running in server.

Reporters

You can import any existing reporters (or create your own), by importing from this path:

import reporter from 'browlog/reporters/<supported_reporter>';

List of currently supported reporters:

1. Slack ('browlog/reporters/slack')
2. Microsoft Teams ('browlog/reporters/teams')

Note: If you don't specify any reporters, browlog will be disabled automatically.

App Name

You can add app name to make distinct the logger between one and another. Follow the example below:

import browlog from 'browlog';
import teamsReporter from 'browlog/reporters/teams';

browlog({
  reporters: [
    teamsReporter('<webhook_url>', {
      appName: 'My App', // "appName" will not be combined with "Log" object.
      environment: 'staging' // Other keys will be combined with "Log" object
    }),
  ]
});

App name treatment is valid to all types of reporters.

Custom

You can, however, add your own custom reporter as such:

const customReporter = (log) => {
  // do anything
  // as long as you return a promise here.
};

...

browlog({
  reporters: [
    customReporter,
  ]
});

You can check what is a Log object from the typings:

interface Log {
  type: string; // event type, could be window:onerror, etc.
  referrer: string;
  userAgent: string;
  timestamp: number; // unix timestamp
  time: string; // humanized timestamp, Asia/Jakarta as timezone
  href: string;
  messages: string[];
}

Options

Below are available options for browlog initialization:

/**
 * An array of promises generated from fetch after chain process a log request.
 * 
 * Read more about it here:
 * https://github.com/josteph/browlog#reporters
 */
reporters: ((...data: any[]) => void)[];

/**
 * Prevent browlog from init & attaching event listeners.
 * 
 * You can call another `browlog.init()` again somewhere.
 */
disable?: boolean;

/**
 * An array of regex to filter out unnecessary errors from being logged.
 * 
 * For example:
 * 
 * `[/Message\: Script error\./, /Vue warn/, /Service worker/]`
 */
ignoreErrors?: RegExp[];

/**
 * Debounce threshold for the logger to be queued before sending them in parallel.
 * 
 * Default value is `2000` (in ms)
 */
threshold?: number;