Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@airbrake/browser

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@airbrake/browser

Official Airbrake notifier for browsers

  • 2.1.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
42K
decreased by-12.74%
Maintainers
1
Weekly downloads
 
Created
Source

Official Airbrake Notifier for Browsers

Build Status npm version npm dm npm dt

The official Airbrake notifier for capturing JavaScript errors in web browsers and reporting them to Airbrake. If you're looking for Node.js support, there is a separate package.

Installation

Using yarn:

yarn add @airbrake/browser

Using npm:

npm install @airbrake/browser

Using a <script> tag via jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/@airbrake/browser"></script>

Using a <script> tag via unpkg:

<script src="https://unpkg.com/@airbrake/browser"></script>

Basic Usage

First, initialize the notifier with the project ID and project key taken from Airbrake. To find your project_id and project_key navigate to your project's Settings and copy the values from the right sidebar:

import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: 1,
  projectKey: 'REPLACE_ME',
  environment: 'production',
});

Then, you can send a textual message to Airbrake:

let promise = airbrake.notify(`user id=${user_id} not found`);
promise.then((notice) => {
  if (notice.id) {
    console.log('notice id', notice.id);
  } else {
    console.log('notify failed', notice.error);
  }
});

or report errors directly:

try {
  throw new Error('Hello from Airbrake!');
} catch (err) {
  airbrake.notify(err);
}

Alternatively, you can wrap any code which may throw errors using the wrap method:

let startApp = () => {
  throw new Error('Hello from Airbrake!');
};
startApp = airbrake.wrap(startApp);

// Any exceptions thrown in startApp will be reported to Airbrake.
startApp();

or use the call shortcut:

let startApp = () => {
  throw new Error('Hello from Airbrake!');
};

airbrake.call(startApp);

Example configurations

Advanced Usage

Notice Annotations

It's possible to annotate error notices with all sorts of useful information at the time they're captured by supplying it in the object being reported.

try {
  startApp();
} catch (err) {
  airbrake.notify({
    error: err,
    context: { component: 'bootstrap' },
    environment: { env1: 'value' },
    params: { param1: 'value' },
    session: { session1: 'value' },
  });
}

Severity

Severity allows categorizing how severe an error is. By default, it's set to error. To redefine severity, simply overwrite context/severity of a notice object:

airbrake.notify({
  error: err,
  context: { severity: 'warning' },
});

Filtering errors

There may be some errors thrown in your application that you're not interested in sending to Airbrake, such as errors thrown by 3rd-party libraries, or by browser extensions run by your users.

The Airbrake notifier makes it simple to ignore this chaff while still processing legitimate errors. Add filters to the notifier by providing filter functions to addFilter.

addFilter accepts the entire error notice to be sent to Airbrake and provides access to the context, environment, params, and session properties. It also includes the single-element errors array with its backtrace property and associated backtrace lines.

The return value of the filter function determines whether or not the error notice will be submitted.

  • If null is returned, the notice is ignored.
  • Otherwise, the returned notice will be submitted.

An error notice must pass all provided filters to be submitted.

In the following example all errors triggered by admins will be ignored:

airbrake.addFilter((notice) => {
  if (notice.params.admin) {
    // Ignore errors from admin sessions.
    return null;
  }
  return notice;
});

Filters can be also used to modify notice payload, e.g. to set the environment and application version:

airbrake.addFilter((notice) => {
  notice.context.environment = 'production';
  notice.context.version = '1.2.3';
  return notice;
});

Filtering keys

With the keysBlocklist option, you can specify a list of keys containing sensitive information that must be filtered out:

const airbrake = new Notifier({
  // ...
  keysBlocklist: [
    'password', // exact match
    /secret/, // regexp match
  ],
});

Source maps

Airbrake supports using private and public source maps. Check out our docs for more info:

Instrumentation

@airbrake/browser automatically instruments console.log function calls in order to collect logs and send them with the first error. You can disable that behavior using the instrumentation option:

const airbrake = new Notifier({
  // ...
  instrumentation: {
    console: false,
  },
});

APM

Routes
import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: 1,
  projectKey: 'REPLACE_ME',
  environment: 'production',
});

const routeMetric = this.airbrake.routes.start(
  'GET', // HTTP method name
  '/abc', // Route name
  200, // Status code
  'application/json' // Content-Type header
);
this.airbrake.routes.notify(routeMetric);
Queries
import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: 1,
  projectKey: 'REPLACE_ME',
  environment: 'production',
});

const queryInfo = this.airbrake.queries.start('SELECT * FROM things;');
queryInfo.file = 'file.js';
queryInfo.func = 'callerFunc';
queryInfo.line = 21;
queryInfo.method = 'GET';
queryInfo.route = '/abc';

this.airbrake.queries.notify(queryInfo);
Queues
import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: 1,
  projectKey: 'REPLACE_ME',
  environment: 'production',
});

const queueInfo = this.airbrake.queues.start('FooWorker');
this.airbrake.queues.notify(queueInfo);

Keywords

FAQs

Package last updated on 06 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc