browlog
v1.3.4
Published
Instant error reporting from browser to your webhook channel of choice
Downloads
11
Readme
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', // "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;