fbpx Skip to content

Aquent | DEV6

How to Capture Errors in Your AngularJS app using AirBrake

Written 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

<script src="vendor/scripts/jquery-2.1.1.min.js"></script>
<script src="vendor/scripts/airbrake-shim.js" data-airbrake-project-id="" data-airbrake-project-key=""></script>
<script data-airbrake-onload="initAirbrake">
    function initAirbrake() {
        Airbrake.addFilter(function (notice) {
            console.log(notice);
            return true;
        });
    }
</script>

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:

'use strict';
myApp.factory('$exceptionHandler', ['$injector', function ($injector) {
        function log(exception, cause) {
            Airbrake.push({
                error : {
                    message : exception.toString(),
                    stack : exception.stack
                },
                params : {
                    user : $user,
                    history : $history
                }
            });
        }
        return( log );
    }]
);

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.

Voila. 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 competent team who will work with you on your project.

Sign up for our Angular Course

Learn the most recent version and start building your own Angular apps

view course details