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:
- Slack (
'browlog/reporters/slack'
) - 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',
environment: 'staging'
}),
]
});
App name treatment is valid to all types of reporters.
Custom
You can, however, add your own custom reporter as such:
const customReporter = (log) => {
};
...
browlog({
reporters: [
customReporter,
]
});
You can check what is a Log
object from the typings:
interface Log {
type: string;
referrer: string;
userAgent: string;
timestamp: number;
time: string;
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;