Generic HTTP Error Handling with AngularJS

Recently, our R&D team here at Ravello Systems decided to enhance our HTTP error handling. An ideal solution would entail generic error handlers that would not require extraneous work to be done on the majority of calls in the code. This means that things like authentication problems and server unavailability issues would be handled in one place, such as in a generic “error” modal.

On the other hand, we also wanted to be able to easily override these default handlers so that specific places can accomplish tasks, such as silently ignoring errors pertaining to unimportant calls (e.g. background requests that are not user-facing), or display a special “try again later” context-aware message.

This post explores how the notifications mentioned above are currently being implemented, in hopes that those in need will benefit and alternative solutions will be discovered.

Our Requirements

• Generic error handling should happen automatically and cannot be forgotten by developers, meaning that adding a ‘.catch(genericHandler)’ to every call is out of the question.
• When less common cases occur, it is obvious that a generic handler should not be used.
• Generic handlers should work seamlessly with Angular’s $http service, ensuring that everything will be handled, regardless of who makes the call.
• All grouped requests should be manageable (i.e. requests that are handled by the caller in a single $q.all() call).

The End Result

A call solely using the generic handling code looks like this:

$http.get('some/url').then(
    function(response) {
        // Stuff here
    }
);

Seem familiar? That’s right, in most cases you don’t need to change your code at all.

However, in case you do want to handle errors yourself:

RequestsErrorHandler.specificallyHandled(
    function() {
        $q.all({foo: FooService.fetch(), bar: BarService.fetch()}).then(
            function() { /* Handle success */ },
            function() { /* Handle specific errors */ }
        );
    }
);

As you can see, the process is pretty straightforward, and the use of a function (which we would essentially consider a block in languages like Ruby), allows us to group multiple requests together with the same error handler.

Implementation

In a nutshell, we tag every request that needs to be generically handled by adding an HTTP header. Then, when requests fail due to errors, an interceptor handles those that are tagged.

This is carried out in 3 parts:

• A Decorator for $http - The only way to tag requests inside our specificallyHandled function involves running interceptors asynchronously, blurring the lines between requests that were or were not made inside of our specificallyHandled block. This decorator simply wraps all of the $http functions together, adding a specific header in case they should be handled generically.
• Response Interceptor - This intercepts all of the failed responses and handles them in a generic way, if and only if they have the magical HTTP header added in the $http decorator.
• RequestsErrorHandler - This service turns generic handling on or off according to when it is called.

The code is available here.

The post Generic HTTP Error Handling with AngularJS appeared first on The Ravello Blog.