AngularJS

Installing Airbrake in an AngularJS application

Key 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 source map support
• Control which errors you send with customizable filtering options

Installation & Configuration#

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

Troubleshoot#

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

• adding extra details to errors
• source maps for easy to parse backtraces
• filtering errors
• specifying error severity

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