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).
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:
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
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.