Installing Airbrake in an AngularJS application

Features

  • Easy and flexible installation options including NPM, Bower and a public CDN
  • Send uncaught errors to Airbrake or manually using a try/catch
  • Add custom parameters to your errors for more context
  • Private sourcemap support
  • Control which errors you send with customizable filtering options

Installation

Using npm

npm install airbrake-js

Using Bower

bower install airbrake-js-client

Configuration

After you have installed the airbrake-js notifier the next step is configuring Airbrake in your app. This involves initializing an airbrakeJs.Client with your projectId and projectKey and adding an $exceptionHandler.

The following config snippet should be added to your app.js file. Be sure to replace the values for projectId and projectKey with the real values from your project’s settings page.

angular
  .module('app')
  .factory('$exceptionHandler', function ($log) {
    var airbrake = new airbrakeJs.Client({
      projectId: 1,
      projectKey: 'FIXME'
    });

    airbrake.addFilter(function (notice) {
      notice.context.environment = 'production';
      return notice;
    });

    return function (exception, cause) {
      $log.error(exception);
      airbrake.notify({error: exception, params: {angular_cause: cause}});
    };
  });

Going Further

Installation and configuration is just the beginning. The airbrake-js notifier supports many other advanced uses and options including:

Please visit the airbrake-js GitHub repo for more usage and configuration examples.