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.

Installation

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>

Configuration

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.

Example:

angular.module('app', ['ngOpbeat'])
  .config(function ($opbeatProvider) {
    $opbeatProvider.config({
      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"
        data-org-id="<organizationId>"
        data-app-id="<appId>">
</script>

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.

Example:

try {
    return multiply(add(a, b), a, b) / c
} catch (e) {
    $opbeat.captureException(e)
}

Adding user context

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

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

    $opbeat.setUserContext({
        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) {

    $opbeat.setExtraContext({
        user_type: "{{ user.type }}",
        org_name: "{{ organization.name }}",
        org_plan: "{{ organization.billing.plan }}"
    })

  })

Supported versions

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

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

Important: Currently we don’t support Angular 2.0.

Supported browsers

opbeat-angular is tested on the following browsers

Desktop

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

Important: Currently we don’t support IE9.

Mobile

  • Android 4.0+
  • Safari on iOS 9+