Handle 500 errors in JSON (jQuery)

Question

This JSON request:

$.ajax({
    url:jSONurl+'?orderID='+thisOrderID+'&variationID='+thisVariationID+'&quantity='+thisQuantity+'&callback=?',
    async: false,
    type: 'POST',
    dataType: 'json',
    success: function(data) {
        if (data.response == 'success'){
            //show the tick. allow the booking to go through
            $('#loadingSML'+thisVariationID).hide();
            $('#tick'+thisVariationID).show();
        }else{
            //show the cross. Do not allow the booking to be made
            $('#loadingSML'+thisVariationID).hide();
            $('#cross'+thisVariationID).hide();
            $('#unableToReserveError').slideDown();
            //disable the form
            $('#OrderForm_OrderForm input').attr('disabled','disabled');
        }
    },
    error: function(data){
        alert('error');
    }
})

In certain circumstances will bring back a 500 error in the form of:

jQuery17205593111887289146_1338951277057({"message":"Availability exhausted","status":500});

This however is still useful to me and I need to be able to be able to handle this correctly.

For some reason though, when this 500 error is returned, my error function is not called and I just get a "NetworkError: 500 Internal Server Error" error in firebug.

How can I handle this?

Is Firebug grabbing the error and halting things before jQuery can even see it?! — Mike DeSimone, Jun 06 '12 at 03:29
Why do you have `async: false`? From the jQuery docs: "As of jQuery 1.8, the use of async: false is deprecated." — Mike DeSimone, Jun 06 '12 at 03:41
I was executing the ajax call from within an $.each which was causing all kinds of issues. I have since reworked this to a better method and have not yet removed the async:false — Fraser, Jun 06 '12 at 03:45
Try it without the `async: false`. Just delete it; default is `true`. It may be that the code for calling the `error` function doesn't work for `async: false` due to a platform or browser bug. — Mike DeSimone, Jun 06 '12 at 03:50
Oh, and the issue you might have been seeing with `each` is that you can usually only have two AJAX transactions active at a time. — Mike DeSimone, Jun 06 '12 at 03:51
Have removed the async:false but still having the same issue unfortunately :( — Fraser, Jun 06 '12 at 03:55

score 40 · Accepted Answer · answered Jun 06 '12 at 03:55

40

Did you try statuscode callback like

 $.ajax({
    statusCode: {
        500: function() {
          alert("Script exhausted");
        }
      }
   });

answered Jun 06 '12 at 03:55

Prasenjit Kumar Nag

13,391
3
45
57

3

Vince recommended this too. I gave it a try but I am still getting the error and jQuery is not entering the function. – Fraser Jun 06 '12 at 03:58

score 10 · Answer 2 · answered Feb 18 '16 at 16:27

If you are using POST you can use something like this:

$.post('account/check-notifications')
    .done(function(data) {
        // success function
    })
    .fail(function(jqXHR){
        if(jqXHR.status==500 || jqXHR.status==0){
            // internal server error or internet connection broke  
        }
    });

score 6 · Answer 3 · answered Jun 06 '12 at 03:22

I think you could catch it by adding this:

$.ajax({
    statusCode: {
      500: function() {
      alert("error");
       }
    },
    url:jSONurl+'?orderID='+thisOrderID+'&variationID='+thisVariationID+'&quantity='+thisQuantity+'&callback=?',
    async: false,
    type: 'POST',
    dataType: 'json',
    success: function(data) {
        if (data.response == 'success'){
            //show the tick. allow the booking to go through
            $('#loadingSML'+thisVariationID).hide();
            $('#tick'+thisVariationID).show();
        }else{
            //show the cross. Do not allow the booking to be made
            $('#loadingSML'+thisVariationID).hide();
            $('#cross'+thisVariationID).hide();
            $('#unableToReserveError').slideDown();
            //disable the form
            $('#OrderForm_OrderForm input').attr('disabled','disabled');
        }
    },
    error: function(data){
        alert('error');
    }
})

Unfortunately that still gives me the same 500 error in Firebug and doesn't enter the function — Fraser, Jun 06 '12 at 03:27

emispowder · Answer 4 · 2013-04-04T22:14:59.207

Check out the jqXHR Object docs. You could use the fail method to capture any errors.

Something like the following for your case:

$.post(jSONurl+'?orderID='+thisOrderID+'&variationID='+thisVariationID+'&quantity='+thisQuantity+'&callback=?')
.done(function(data){
        if (data.response == 'success'){
            //show the tick. allow the booking to go through
            $('#loadingSML'+thisVariationID).hide();
            $('#tick'+thisVariationID).show();
        }else{
            //show the cross. Do not allow the booking to be made
            $('#loadingSML'+thisVariationID).hide();
            $('#cross'+thisVariationID).hide();
            $('#unableToReserveError').slideDown();
            //disable the form
            $('#OrderForm_OrderForm input').attr('disabled','disabled');
        }
      }, "json")
.fail(function(jqXHR, textStatus, errorThrown){
      alert("Got some error: " + errorThrown);
      });

I would also look into passing a json data string via post instead of attaching query variables:

$.post(jSONurl, $.toJSON({orderID: thisOrderID, variationID: thisVariationID, quantity: thisQuantity, callback: false}))

Fraser · Answer 5 · 2014-07-30T09:05:36.950

I removed the dataType:json from the ajax call and I was able to catch the error. In these situations I do not need the content of the returned jSON luckily; only to know that there is an error being returned so this will suffice for now. Firebug still has a hissy fit but I am at least able to perform some actions when there is an error

$.ajax({
            url:'http://example.com/jsonservice/LiftieWeb/reserve?token=62e52d30e1aa70831c3f09780e8593f8&orderID='+thisOrderID+'&variationID='+reserveList+'&quantity='+thisQuantity+'&callback=?',
            type: 'POST',
            success: function(data) {
                if (data.response == 'Success'){
                    //show the tick. allow the booking to go through
                    $('#loadingSML'+thisVariationID).hide();
                    $('#tick'+thisVariationID).show();
                }else{
                    //show the cross. Do not allow the booking to be made
                    $('#loadingSML'+thisVariationID).hide();
                    $('#cross'+thisVariationID).hide();
                    $('#unableToReserveError').slideDown();
                    //disable the form
                    $('#OrderForm_OrderForm input').attr('disabled','disabled');
                }
            },
            error: function(data){
                alert('error');
            }
        })

This is a solution for you, but not a solution when we need JSON. Anyone has a real solution? — jerone, Aug 24 '12 at 16:24

Handle 500 errors in JSON (jQuery)

5 Answers5

Linked