Installing Airbrake in an AngularJS application

Features

  • Easy and flexible installation options including npm and Yarn
  • 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/browser

Using Yarn

yarn add @airbrake/browser

Using CDN

Using <script> tag via jsdelivr:

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

Using <script> tag via unpkg:

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

Configuration

After you have installed the airbrake-js notifier the next step is configuring Airbrake in your app. This involves initializing an Notifier 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 Notifier({
      projectid: 1,       // Airbrake project id
      projectkey: 'FIXME' // Airbrake project API key
    });

    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.