Error handling in AngularJS with a RESTful API

Aug 2015

One of the things I love most about AngularJS is the ease in which you can implement informative and clean error handling on the front end. This comes in particularly useful when you’re making calls to a server and need to keep the user up to date with the state of your application.

The way I’ve found to work best at displaying errors in a clean manner is by initialising an errors variable in the scope of your controller. If you’re injecting and using $scope in your controllers, it may look something like the following:

// main.js - client-side

'use strict';

var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.errors = {};
}]);

The idea here is that we can now dynamically add error properties to this $scope.errors object whenever we receive a response from our RESTful API.

Adding in a service

Assume the existence of an arbitrary AngularJS service, MyService. We will use this in its basic form to provide a reusable interface to access our REST API. It looks something like the following:

// service.js - client-side
'use strict';

app.factory('MyService', ['$resource', function($resource) {
  return $resource('/api/users');
}]);

We can then dependency inject this service into our MainCtrl to give us access to it. In this example we’ll perform a simple GET request. Note: You don’t have to use a custom Service, you could always use something like Angular’s core $http service.

// main.js - client-side
...

app.controller('MainCtrl', ['$scope', 'MyService', function($scope, MyService) {
  $scope.errors = {};

  $scope.getData = function() {
    MyService.get({
      params: 'any parameter required here'
    }, function(data) {
      // Here we execute code when the server responds as expected
      $scope.errors.api = false;
    }, function(err) {
      // Here is where we can catch the errors and start using the response.
      $scope.errors.api = err.message;
    });
  };
}]);

As you can see above, if an error is returned we are setting the value of our api attribute to err. Depending on how you’ve written your REST API, you might have to set it to equal err.message or err.error for example, depending on what object you’re returning and which attribute contains a string explaining why there was an error returned.

Handling the errors

If an error is returned from our server, we want to display useful information about this error to our users. In our main view, assuming it is bound to MainCtrl, we can make use of Angular’s ng-show native directive to conditionally show a piece of HTML with the error message:

<!-- index.html - client-side - bound to MainCtrl -->
...

<div ng-show="errors.api">
  <h1>Sorry! There was an error!</h1>
  {% raw %}
  <p>{{ errors.api }}</p>
  {% endraw %}
</div>

We now have a variable that will dynamically change via the response from our API with a meaningful piece of information about the state of the application and what errors may have occurred - providing our user with vital information in the eyes of good UX.


I’ve written a very basic example using Angular’s $http service on codepen.