Why is my http error response not being called when img ng-src is called?

Question

I have the following problem: I am trying to trap an HTTP 500 response from the server but the intercept is not getting the 500 response. This is generated by an img src call to an unauthorized URL (technically the server should be returning a 4xx, but it returns a 5xx --> its a 3rd party server.

Update 2: My intercept with HTTP rejection is called if I do a direct $http.get but it does not get called if the http get is implicitly called by img ng-src or img-src. The funny part is my httptimeout intercept is called, but the response intercept is never called. How do I solve this?

Update 1: I've added a screenshot of the 500 error that is being received by my browser via web inspector but not being intercepted. Please see the end.

interceptor code:

  .factory('timeoutHttpIntercept', function ($rootScope, $q) {
            //console.log("*** HTTP INTERCEPTOR CALLED ***");
            return {
                'request': function (config) {
                    config.timeout = 15000;
                    //console.log("*** HTTP INTERCEPTOR CALLED ***");
                    return config;
                }


            };
        })

.factory ('httpAuthIntercept', function ($rootScope, $q)
{
    return {
    requestError: function (response) {
      console.log ("**** REJECT REQUEST: "+JSON.stringify(response));
      return $q.reject(response);
    },

    responseError: function (response) {
      console.log ("**** REJECT RESPONSE: "+JSON.stringify(response));
      return $q.reject(response);
    },
    response: function (response)
        {
            console.log("*******RESPONSE with status: "+response.status+"****************");
            if (response.status == 500)
            {
             console.log ("**** RESPONSE: "+JSON.stringify(response));
            }
                return (response);
        }
  };
})

Followed by, in .config:

 $httpProvider.interceptors.push('timeoutHttpIntercept');
 $httpProvider.interceptors.push('httpAuthIntercept');

Now, in my template I am calling the following code:

<img ng-src="{{LoginData.url}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps=3&buffer=1000&auth=1234&rand={{rand}}" width="100%" />

The above triggers a 500 response. I see the server logs generating this as well:

Starting capture on eth0 interface
2015-05-11 05:12:44 xx.xx.xx.xx 192.168.1.13    >   GET <server.com>    /cgi-bin/zms?mode=jpeg&monitor=1&maxfps=3&buffer=1000&auth=1234&rand=116426 HTTP/1.1    -
2015-05-11 05:12:44 192.168.1.13    xx.xx.xx.xx <   -   -   -   HTTP/1.1    500 Internal Server Error

But for some reason, the auth intercept is not trapping this 500. If I remove the 500 check in auth intercept, I can see it trapping successful responses with 200 OK.

What am I doing wrong?

500 Response screenshot being received --> web inspector of Safari:

Thanks

Answer 1

I had a similar problem.

My responseError method of the interceptor wasn't triggered after generating an 500 error with Fiddler (proxy). In fiddler you can create your own responses for certain files. The problem somehow was in my own created response. Not sure where the problem was. But after I copied one of the responses allready in Fiddler I got the method responseError working.

Perhaps the response you are getting from the third party server is invalid somehow.

If you want to try with Fiddler. In the programm folder you have certain ResponseTemplates C:\Program Files\Fiddler2\ResponseTemplates

Copied "502_unreachable.dat" to "500_servererror.dat" and only modified the response code to 500 and left response body untouched.

restarted Fiddler and I could apply my new created Fiddler response as auto-responder. And yes it triggered the responseError method.

Answer 2

Whats the angularjs version you are using? if its < 1.3 it may be worth trying to pushing your interceptor to $httpProvider.responseInterceptors instead on $httpProvider

app.factory('MyHttpInterceptor', function($q) {
        return function (promise) {
            return promise.then(function (response) {
                return response;
            },
            function (response) {
                if (response.status === 500) {
                    // you should hit this for HTTP 500
                }
                return $q.reject(response);
            });
        };
    });


app.config(function ($routeProvider, $httpProvider) {

   // rest of the config code

    $httpProvider.responseInterceptors.push('MyHttpInterceptor');
})

another implementation

app.factory('MyHttpInterceptor', ['$q', function ( $q) {
    function success(response) {
        // all good
    return response;
    }
    function error(response) {
        var status = response.status;
        if (status == 500) {
            return;
        }
        // otherwise
        return $q.reject(response);
    }
    return function (promise) {
        return promise.then(success, error);
    }
}]);