Global Error handling for REST calls in Angular Js [duplicate]

Question

I am looking for generic way for handling all the http errors in angular js. I do not want to handle errors on each controller to display the error message.

I know we can use generic exception handler and I have used interceptors in my application but currently it is only handling the "Unauthorized" failures and redirecting to login page. but for other failures I do not want to redirect but just display the error message.

How can I use generic exception handler to display the error message from the server on the UI for each screen?

That is fine but how should I display errors messages from server for each UI screen from that .catch handler ? — ankit kothari
– ankit kothari, Commented Aug 12, 2017 at 16:01
What do you want the user to experience? Users despise the disruptive interruption of modal dialogs. — georgeawg
– georgeawg, Commented Aug 12, 2017 at 16:42
User should know that their action failed on the server for e.g User creation failed due to duplicate email Id in the application so how should I display errors messages from server for each UI screen from that .catch handler ? — ankit kothari
– ankit kothari, Commented Aug 12, 2017 at 16:52
Failures in form submission should be handled by the form controller with specific annotation on the form explaining to the user what needs correction. The ngFormController and the ngModelController have mechanisms to facilitate such forms. For more information, see AngularJS Developer Reference - Forms. — georgeawg
– georgeawg, Commented Aug 12, 2017 at 17:04
Consider using using the $asyncValidators API to check for duplicate email ids before form submission. — georgeawg
– georgeawg, Commented Aug 12, 2017 at 17:08

M3talM0nk3y · Accepted Answer · 2017-08-12 20:55:35Z

0

You can use interceptors to handle this:

app.service('APIInterceptor', ['$rootScope', '$window', '$q', function($window, $q) {
    this.responseError = function(response) {
        if (response.status === 401 || response.status === 403) {
            $window.location.href = '/';

            return  ̶$̶q̶.̶r̶e̶j̶e̶c̶t̶(̶ response;
        } else if (response.status === 500) {
            $rootScope.$emit("appError", new Error('An error occurred'));

            return;
        }

        return  ̶$̶q̶.̶r̶e̶s̶o̶l̶v̶e̶ $q.reject(response);
    };
}]);

app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $httpProvider.interceptors.push('APIInterceptor');

// Some code here...

}]);

app.controller('MyController', ['$rootScope', '$scope', '$http', function($rootScope, $scope, $http) {
    $scope.errorMessage = '';

    $rootScope.$on('appError', function(e, error) {
        // Event details
        console.log(e);

        // Error object from interceptor
        console.log(error);
        $scope.errorMessage = error.message;
    });
}]);

Check AngularJS $http Service API Reference for more information.

edited Aug 12, 2017 at 20:55

answered Aug 12, 2017 at 14:51

M3talM0nk3y

1,43215 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ankit kothari Over a year ago

That is fine but how should I display errors messages from server for each UI screen from that $q.reject(response) ? Should I keep ng-model="errorMsg" on each screen and set $rootScope.errorMsg in that Interceptor ?In that case I need to reset errorMsg variable during screen navigation or some other approach ?

M3talM0nk3y Over a year ago

You shouldn't need an errorMsg in the $rootScope; your controller can have an errorMsg and its $scope and you can set it once you handle the error. Check the answer on AngularJS with global $http error handling for more details.

ankit kothari Over a year ago

But I don't want my controller to handle the error.I am looking for more maintainable code in which global exception handle emit an error message and the current UI screen listen to it and display the error message.

M3talM0nk3y Over a year ago

@ankitkothari Okay, that's understandable. In such case, you can emit an event from the interceptor and have a listener for it within your controller. I've updated the code example to reflect this.

ankit kothari Over a year ago

Great ! Thank you so much for your help.

Collectives™ on Stack Overflow

Global Error handling for REST calls in Angular Js [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related