New Toronto Group
 - New Toronto Group

How to Capture Errors in Your AngularJS app using AirBrake.io

| Posted on October 06th, 2014 by Chad Upton


Whether you're new to App development with AngularJS or you're an experienced JavaScript Framework developer, you're eventually going to want to improve the quality of your mobile app (or desktop app for that matter). Airbrake.io is a platform for capturing errors that occur in your application while people are using it.

No matter what you do, you can't predict every issue with your app, especially since users may have any number of plugins, viruses, toolbars, greasemonkey scripts, etc. in their browser that can affect how the browser renders your app and therefore affect how your app behaves (or fails). All of these are actual examples of things I've discovered (through Airbrake) that affect our apps.

You also can't be everywhere to check the console when an error does happen. Thankfully, users don't have to send you an error report either, it is sent to Airbrake automatically. Airbrake can then alert you of a new issue (in a variety of ways).

airbrake

For now, the real value is the alerts and the databse of issues. The Airbrake user interface allows you to wade through current and past errors that have been captured and stored in the database. The interface is pretty good right now, however, I've been in contact with the folks at Airbrake and they've promised that some (much anticipated) features and improvements will be available very soon.

So, how do you get Airbrake up and running in an AngularJS app?

Step 1 - Download the Airbrake shim and place the code near the bottom of your app's index page:

http://airbrake.io

code

CODE IN TEXT FORMAT

You'll see jquery in the above code segment and that is a requirement for Airbrake in case you're not already using it in your app.

Step 2 - Override Angular's exceptionHandler

Code

CODE IN TEXT FORMAT

When any error happens in your angular app, it's now going to be handled by this method. You'll see I'm capturing the stacktrace and passing it along to airbrake.

You can also pass along any other metadata that might help you solve an issue. In this example I've got a history object that contains an array of views (and other data) the user has previously been to. That way, I can try to take the same path through the app to replicate the issue. Creating that history object will be a future blog post.

Viola. Now your application will automatically report errors to Airbrake!

We're an app design, development, training and consulting company based in Toronto, Canada. Whether you're in the GTA or across the globe, contact us for a competant team who will work with you on your project.

Posted in AngularJS, Airbrake, JavaScript Framework, HTML5 CSS3 App, Toronto  | Comments (9)

Comments (9)

  1. Ardian Bahtiarsyah:
    Feb 04, 2015 at 06:29 AM

    nice post!
    Btw how to create $history and $user object?

  2. Prat Uppal:
    Feb 10, 2015 at 05:57 PM

    Can you please sens the details on how "History" is tracked.
    Thanks in advance

  3. Chad Upton:
    Feb 10, 2015 at 06:12 PM

    Yes. There is no real secret here, we maintain an array on the rootscope that we push user events into. That way if there is an error then we can see their path through the app. For example, if the user goes to their profile page we would call this line and push this data into the history array:

    $rootScope.history.push('User went to profile page');

    You can tack any other data onto that string that might be helpful. I like to include the current URL and referrer for example.

    This is just a string of course, but I would suggest an improvement... use json data and then you could have a small tool that digests the json into a more readable and richer history view.

  4. Chad Upton:
    Feb 12, 2015 at 09:52 PM

    The $user object an object that we populate with information about the user, such as their username. So, depending on the user related properties you capture in your application, you can store the relevant ones in the $user object and send them up to airbrake with your error.

  5. Prat Uppal:
    Feb 13, 2015 at 11:51 PM

    Chad, thank you for the response. In Angular, we really want to track the components when an issue occurs. For example, when an API_Call within a ProfileFactory fails, then we want to log the factory name (in this case ProfileFactory, associated controller ProfileCtrl and so on). Can you think of a simple automated way to do this. We started hardcoding component names in error messages before logging and you can only imaging the magnitude of work involved in this and also unhandled errors will be missing the component names. - Thanks again in advance, Prat

  6. Chad Upton:
    Feb 16, 2015 at 11:00 PM

    Hi Prat,

    This worked for me:

    var controller = $injector.get('$route').current.$$route.controller;

    Then add the controller variable into the airbrake params. You may want to test this with structures beyond controllers, but I suspect it will be something similar for those. Report back if you find anything useful.

  7. Prat Uppal:
    Feb 19, 2015 at 08:01 PM

    Thanks a lot Chad. I will try it out and let you know.

  8. Earl:
    Mar 13, 2015 at 02:27 PM

    Hi,
    Is there a way to not push the error during the development code?

  9. Chad Upton:
    Mar 16, 2015 at 02:18 PM

    Hi Earl. We've found it helpful to push the errors during development too. However, we have multiple AirBrake projects setup. We use one project specifically for development and one for production so it's easier to spot errors that come from real users.

    During our build, our development AirBrake ID is swapped for the production one.


Add a Comment





To use reCAPTCHA you must get an API key from http://recaptcha.net/api/getkey

Allowed tags: <b><i><br>Add a new comment: