Angular $http error callback response is always undefined

Question

I am having issues trying to gracefully handle $http errors. I am looping over a list of servers to make API calls to for status. The calls that complete successfully for perfectly. The ones that fail are not giving me access to the error information. It is always undefined. Here is the code snippet:

angular.forEach($scope.servers, function (server) {
    // blank out results first
    server.statusResults = {};

    $http.jsonp(server.url + '/api/system/status?callback=JSON_CALLBACK', {headers: { 'APP-API-Key': server.apiKey }}).
        success(function (data, status, headers, config) {
            server.statusResults = data;
        }).
        error(function (data, status, headers, config) {
            // data is always undefined here when there is an error
            console.error('Error fetching feed:', data);
        });
    }
);

The console output shows the correct 401 error (which I didn't output) and my console error message (which I did output) with an undefined data object.

GET https://server_address/api/system/status?callback=angular.callbacks._1 401 (Unauthorized) angular.min.js:104
Error fetching feed: undefined

What I am trying to do is NOT have Angular display the 401 in the log, and instead I will display it in a graceful way. However since data is undefined I have no way of accessing the information.

I am new to AngularJS, but my example closely matches other examples I've found in the documentation.

I've also tried using $resource instead of the $http and got the exact same problem.

var statusResource = $resource(server.url + '/api/system/status', {alt: 'json', callback: 'JSON_CALLBACK'},
                { status: {method: 'JSONP'}, isArray: false, headers: { 'APP-API-Key': server.apiKey } });

// make status API call
statusResource.status({}, function (data) {
    server.statusResults = data;
}, function (err) {
    // data is always undefined here when there is an error
    console.log(err);
});

I'm probably doing something obviously wrong, but I'm not sure what else to try.

Also [see this interesting question and answer](http://stackoverflow.com/questions/14517709/how-to-get-data-from-jsonp-error-callback-in-angularjs). — Pointy, Aug 08 '13 at 16:12

score 0 · Accepted Answer · answered Aug 08 '13 at 16:33

0

Per the $http docs, body is

The response body transformed with the transform functions.

With the 401 (Unauthorized) error you are getting back, it is quite possible there is no body being returned, hence why it is undefined.

If you want to log the error code, log the status parameter instead. It contains the HTTP Status Code, which should be uniform, unlike response bodies.

answered Aug 08 '13 at 16:33

iagreen

31,470
8
76
90

Thanks, but that didn't work. The error is a 401, but the status code returns 0. – Chuck M Aug 08 '13 at 16:40
1

I missed that you were using JSONP. You can't catch the error code with JSONP. See the link @Pointy gave in his comment, specifically [this answer](http://stackoverflow.com/a/1002797/1904517) that is linked in a comment. – iagreen Aug 08 '13 at 16:47
Thanks. The link from Pointy explained it very well. I am going to look closer in CORS. I assume that would also solve this problem? – Chuck M Aug 08 '13 at 17:17
It can solve the problem with a few caveats -- the server has to be setup to handle CORS, and has to respond that your domain is authorized to make the requests. If you control the remote server, that isn't a problem. If not, it may or may not work depending on the server config. If it does not work, you might have to proxy the request through the server that serves your app. – iagreen Aug 08 '13 at 17:43
How to proxy the request through the server? can you explain please? Because I'm not succeeding to make it work. Thanks – ronymattar Jun 26 '15 at 09:38

Angular $http error callback response is always undefined

1 Answers1