jquery ajax ignores 500 status error

Question

I'm making some GET requests to an App Engine app, testing in Chrome. Whilst I can see in javascript console that some calls result in a 500 server error, I can't seem to find anyway of capturing this error in my jQuery code despite reading a number of similar SO threads. I understand that it indicates a server side error, but I'd still like to be able to capture such an error from my javascript.

I need to capture the error so that I can count the number of responses (successful or otherwise) and trigger another function when all call responses have been received.

Chrome console output:

GET http://myapp.com/api?callback=jQuery12345&params=restOfParams 500 (Internal Server Error)

My call:

  function makeCall() {
    var count = 0;
    var alldata = $('#inputset').val();
    var rows = alldata.split('\n');
    var countmatch = rows.length;
    for (i=0;i<rows.length;i++) {
      data["param"] = rows[i]["val"];
      $.ajax({
              url: apiUrl,
              type: 'GET',
              data: data,
              dataType: 'jsonp',
              error: function(){
                  alert('Error loading document');
                  count +=1;
              },
              success: function(responseJson) {
                            count +=1;
                            var res = responseJson.results;
                            if (count == countmatch) {
                              allDoneCallback(res);
                            }
                        },
             });
    }
}

I've tried some of the following:
Adding:

statusCode: {500: function() {alert('err');}}

to the call.

Using:

  $().ready(function(){
     $.ajaxSetup({
       error:function(x,e) {
             if(x.status==500) {
               alert('Internel Server Error.');
             }
           }
      });
   });

Would anyone have a suggestion regarding how I could catch the 500 response?

Thanks Oli

UPDATE:

Based on responses, my jquery code appears to be correct, but for some reason it would only catch certain 500 responses received from my app. This is possibly a problem with how App Engine returns the error(I don't know a lot about this), or how jquery handles errors with jsonp - this point is briefly discussed in the last paragraph of this article.

I got this to work by using jquery-isonp which caught all of the 500 status's thrown by the app.

Answer 1

It doesn't look like you're using jQuery's document.ready binding correctly. The $().ready(...) version is more-or-less deprecated. Try one of these instead:

$(document).ready(function() {
    $.ajaxSetup({
        error: function(x, e) {
            if (x.status == 500) {
                alert('Internel Server Error.');
            }
        }
    });
});

or the shorthand:

$(function() {
    $.ajaxSetup({
        error: function(x, e) {
            if (x.status == 500) {
                alert('Internel Server Error.');
            }
        }
    });
});

Answer 2

Solved the problem by upgrading jQuery from 1.9.1 to 2.1.1 — now it started calling .error() right on the server response (before it would ignore the 500 response and wait until timeout is over).

Limitation: jQuery 2.1.1 does not support IE8 and below (as IMO shouldn't you)

Answer 3

I had a similar problem, I was using jquery's promise functions of .done, .fail, .always, and if I encountered a 500 internal server error then it would not fire any of the functions (done, fail, always, error). very weird.

in the end I added a timeout into the .ajax options, when it hits the timeout it throws an error and also runs the .fail method.

searchify.myAjaxSearchTerms = $.ajax({
                        'url': url,
                        type: "GET",
                        'dataType': 'jsonp',
                        'jsonp': 'json.wrf',
                        'jsonpCallback': searchify.cbFunc,
                        timeout: 4000, //needed for 500 errors - will go to fail block on timeout
                        beforeSend: searchify.beforeSendAutocomplete

                    });
searchify.myAjaxSearchTerms.fail(function(XHR, status, error){
                        searchify.clearForm();
                        searchify.renderWarningForNoQuery('<div class="notify-bubble"><span class="icon" data-icon="8" aria-hidden="true"></span><span>Sorry. We had a problem performing that search...<br/>Please try again<br/>Enter a <strong>product name</strong>, <strong>catalogue number</strong> or <strong>keyword</strong></span></div>');
                    });