Opbeat is joining forces with Elastic – Learn more about Elastic APM

Get started with AngularJS

Getting Opbeat set up for your AngularJS app is easy, and there are various ways you can tweak it to fit to your needs.


To get started, create a new app in your Opbeat organization and select AngularJS as the type.

While creating the new app, you will be asked to add a snippet before your app code, so you can initialize the module from where you boot your Angular app.

Important: We recommend including opbeat-angular before any other script.

Load from CDN

The module can be loaded from our fast and reliable CDN server.

Include the following snippet before your main application.

<script src="https://d3tvtfb6518e3e.cloudfront.net/3/opbeat-angular.min.js"></script>

Install from npm

The module can also be installed using npm. The package is called opbeat-angular.

Run the following command in your project directory:

$ npm install opbeat-angular --save

And include it in your application:

<script src="node_modules/opbeat-angular/opbeat-angular.min.js"></script>

Install from bower

The module can also be installed using bower.

Run the following command in your project directory:

$ bower install opbeat-angular --save

And include it in your application:

<script src="bower_components/opbeat-angular/opbeat-angular.min.js"></script>


Include the ngOpbeat module as a dependency of your application, and use $opbeatProvider.config(options) to set your app details like appId and orgId.

All the available configuration options are listed in the API documentation.


angular.module('app', ['ngOpbeat'])
  .config(function ($opbeatProvider) {
      orgId: '<organizationId>',
      appId: '<appId>'


Alternatively you can add data-org-id and data-app-id attributes to your script tag:

<script src="opbeat-angular.min.js"

Initial page load url

In your dashboard you can find metrics related to initial page load. These transactions are ordered by the page url. However sometimes this could result in seeing too many transactions (For example if there’s an identifier in the page url). To avoid this you can set the initial page load name:

opbeat.setInitialPageLoadName('<Initial page name>')

Getting more detailed exceptions with CORS

In order to collect much more detailed information about exceptions. We’ll need you to enable CORS on your JavaScript files.

To enable CORS, first set up your server to return the right Access-Control-Allow-Origin headers. enable-cors.org has a comprehensive guide for different server software.

Then, add the crossorigin attribute to <script> tags (only do this to JavaScript you host yourself or have verified that the respective server returns the correct Access-Control-Allow-Origin headers). Here’s an example:

<script src="/static/js/scripts.js" crossorigin></script>

Note: Make sure to force browser caches to invalidate.

Because browsers cache resources including the Access-Control-Allow-Origin header, you need to force these caches to invalidate. The right way to invalidate depends a bit on your setup, but the easiest one is to change the URLs of your scripts by appending a query string parameter, e.g.:

<script src="/static/js/scripts.js?v1" crossorigin></script>

Source Maps

We support source maps to reverse JavaScript minification. If your build script generates source maps, and includes the sourceMappingURL in the generated JavaScript, we will try to detect and download the source map.

Read more in the Source Maps for frontend JavaScript article.

Capturing exceptions manually

You can capture errors and exceptions manually by using the captureException() method.


try {
    return multiply(add(a, b), a, b) / c
} catch (e) {

Important: Currently we don’t capture errors that originate from DevTools console.

Adding user context

You can add information about the logged-in user by using the setUserContext() method.

angular.module('app', ['ngOpbeat'])
  .run(function ($opbeat) {

        username: "{{ user_name }}",
        email: "{{ user_email }}",
        id: "{{ user_id }}"


Adding extra context

You can add any extra information by using the setExtraContext() method.

angular.module('app', ['ngOpbeat'])
  .run(function ($opbeat) {

        user_type: "{{ user.type }}",
        org_name: "{{ organization.name }}",
        org_plan: "{{ organization.billing.plan }}"


You can also add extra information to individual errors:

var err = new Error('test')
err.extraInfo = 'important info'

Important: Currently you can only set simple data types (number, string and Date) on the error object.

Supported versions

We support AngularJS 1.2.x up to and including 1.5.x

Note: Currently we only support AngularJS 1.x.
If you are interested in Angular 2+ support, sign up for the beta.

AngularJS 1.3.11 and lower

You need to use AngularJS manual initialization instead of ng-app attribute:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['app']);

Supported browsers

opbeat-angular is tested on the following browsers


  • Chrome: 46+
  • Firefox: 42+
  • Edge
  • Internet Explorer: 10+
  • Safari: 9+

Important: Currently we don’t support IE9.


  • Android 4.0+
  • Safari on iOS 9+

Other platforms

Important: Currently we don’t support Apache Cordova and Electron.

Running alongside other frameworks

There are known issues with running Opbeat alongside TrackJS and New relic. In order to get reliable metrics in your dashboards we recommend to remove these modules.

If you need to include TrackJS and/or New relic please make sure to include your scripts in this order:

  1. New relic
  2. Opbeat
  3. TrackJS