Have ideas to improve npm?Join in the discussion! »

    @airbrake/browser
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.4 • Public • Published

    Official Airbrake Notifier for Browsers

    Build Status npm version

    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,
      },
    });

    Install

    npm i @airbrake/browser

    DownloadsWeekly Downloads

    38,815

    Version

    2.1.4

    License

    MIT

    Unpacked Size

    765 kB

    Total Files

    271

    Last publish

    Collaborators

    • avatar