Opbeat for AngularJS

Great performance metrics shouldn’t be limited to server-side applications. More and more applications are running in the browser, yet front-end developers don’t have the tools to adequately debug and monitor their code.

Great performance metrics shouldn’t be limited to server-side applications. More and more applications are running in the browser, yet front-end developers don’t have the tools to adequately debug and monitor their code.

So we’ve built Opbeat for AngularJS.

 

AngularJS is a full-fledged framework that allows us to provide performance metrics of everything from $http requests, to $cache calls and $directive rendering.

Opbeat for AngularJS works by hooking into ngRoute / uiRouter to monitor route changes, and whenever a route is changed, we consider this a new transaction. We will record traces of the following services within Angular:

  • $cacheFactory
  • $compile
  • $controller
  • $directives (‘ngBind’, ‘ngClass’, ‘ngModel’, ‘ngIf’, ‘ngInclude’, ‘ngRepeat’, ‘ngSrc’, ‘ngStyle’, ‘ngSwitch’, ‘ngTransclude’)
  • Custom $directives
  • $factories
  • $http
  • $httpBackend
  • $resource
  • $templateRequest

By instrumenting these core AngularJS services, we are able to generate a complete breakdown of the executed logic until the first render has occurred ($viewContentLoaded).

Breakdown

The above breakdown gives you a good overview of how the time is spent within your application, and gives insights into which parts of the app might be potential bottlenecks.

This is the first time front-end developers are able to get these kinds of insights, sampled continuously and directly from their apps in production, so we’re super excited.

Angular support is currently in private beta, and as usual we’re rolling it out slowly to better handle feedback. In the meantime we’d love to know what you think: twitter.com/opbeat.

Sign up to the AngularJS private beta.

About the author
Kenneth Auchenberg built Opbeat.js.
You can follow him on Twitter or GitHub.