angularjs error handling in ajax request

Question

I want to write an error handling part in my application I use this code below but when error 500 occur its work right but there is a small or maybe big problem and thats the page load at first and after few second error page load , How can i remove this few second and go to error page directly without loading mainpage that release error? is there any way to load html template after execution of its controller?

var interceptor = ['$rootScope', '$q', function (scope, $q) {

        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status;
            if (status == 500) {
              window.location= "http://www.domain.lan/#!/error";


                return;
            }
             if (status == 403) {

                // window.location = "dashboard";
                return;
            }
            // otherwise
            return $q.reject(responseInterceptors);

        }

        return function (promise) {
            return promise.then(success, error);
        }

    }];
    $httpProvider.responseInterceptors.push(interceptor);

Vesta

is use $injector.get('$state').go('error'); but it doesnt have any effect on this issue – Vesta

Why you dont handle such error in $routeProvider / $stateProvider itself. – Dwain

How can i do that? im new in angularjs – Vesta

Depends when the request error is returned you can't guess an error till is returned, if you run ajax requests when template is loading or loaded you'll not be able to redirect before :) – Breton

So if you want to redirect before template you need to run $http calls for example in the routeProvider resolve function – Breton

I think its not possible to run all ajax request in resolve function and its not a true way , I have a lot of ajax request in my controllers i think its a bad solution to do that – Vesta

Answer 1

I'm assuming that you are using angular ui-router.

1st thing you need to add one state in your $stateProvider config to understand 'error' state by ui-router.

Route config Code

//added state to understand error
$stateProvider.state("error": {
   url: "/error",
   templateUrl: '/views/error.html',
   controller: 'errorCtrl' //optional if you want any specific functionality
});         

And You did window.location and set the url, window.location causing page to refresh. Instead of using window.location use window.location.hash

Interception function change

var interceptor = ['$rootScope', '$q', '$location', function (scope, $q, $location) {
function success(response) {
    return response;
}

function error(response) {
    var status = response.status;
    if (status == 500) {
      //window.location= "http://www.domain.lan/#!/error";
      //window.location.hash= "/error"; //it will rewrite the url without refreshing page
      $location.path('error');
      return;
    }
     if (status == 403) {

        // window.location = "dashboard";
        return;
    }
    // otherwise
    return $q.reject(responseInterceptors);

}

return function (promise) {
    return promise.then(success, error);
}

}];
$httpProvider.responseInterceptors.push(interceptor);

Other way you can try the same $state.go('error'); don't forget to add $state dependancy.

Hope this will be helpful to you. Let me know if there is still any confusion.

Dwain

I use hashprifix in config $locationProvider.hashPrefix('!'); , and window.location.hash make error, how can i solve this problem? – Vesta

I use $state.go and $location but both of them have problem that I said before in my post , at first template load and ajax request send but ajax return 404 and a div remain empty and after few second page change to error state i want to remove this few second and when user go to dashboard page(and there is some error here for example) go to error page without any interrupt – Vesta

use $state.transitionTo('error') have you tried this? – Dwain

all of them have true effect and change state but i can see the page that release that error for few second about 1 second for example and after that state change to error state , how can i remove this 1 second? is it possible? – Vesta

@mhadadi No we can't do this, the only way you can achieve this by showing loading icon until all requests are processed – Dwain

@mhadadi #15033695 this will helps you to implement spinner. – Dwain