jQuery: catch ajax exceptions

Question

Many failed jQuery ajax requests are polluting my console with errors. Looking at the code which produces these console errors (jQuery 1.7.2, line 8240)

                // Do send the request
                // This may raise an exception which is actually
                // handled in jQuery.ajax (so no try/catch here)
                xhr.send( ( s.hasContent && s.data ) || null );

I notice the comment explains why there is no try/catch there. However, even though I have an explicit error callback function in my jQuery.ajax request, I'm still not having those errors handled by jQuery.ajax.

How can I handle jQuery ajax errors in such a way that error messages do not appear in the console?

Edit: Below is my code snippet that does the ajax request, and the precise error message (in Chrome):

$.ajax({
    dataType: 'xml',
    url: "./python/perfdata.xml?sid=" + (new Date()),
    success: function (data) {
        var protocols = $("Protocols", data).children();

        parseData(protocols);
    },
    error: function (error) {
        setTimeout(getData, 200);
    }
});

And here is the Chrome error message:

GET
http://zeus/dashboard/python/perfdata.xml?sid=Thu%20May%2024%202012%2016:09:38%20GMT+0100%20(GMT%20Daylight%20Time)
jquery.js:8240

Solution 1

You can try this (in chrome works well) if for testing, by overriding the function "send":

$(function() {

    var xhr = null;

    if (window.XMLHttpRequest) {
        xhr = window.XMLHttpRequest;
    }
    else if(window.ActiveXObject('Microsoft.XMLHTTP')){
        // I do not know if this works
        xhr = window.ActiveXObject('Microsoft.XMLHTTP');
    }

    var send = xhr.prototype.send;
    xhr.prototype.send = function(data) {
        try{
            //TODO: comment the next line
            console.log('pre send', data);
            send.call(this, data);
            //TODO: comment the next line
            console.log('pos send');
        }
        catch(e) {
            //TODO: comment the next line
            console.log('err send', e);
        }
    };

    $.ajax({
        dataType: 'xml',
        url: "./python/perfdata.xml?sid=" + (new Date()).getTime(),
        success: function (data) {
            var protocols = $("Protocols", data).children();

            parseData(protocols);
        },
        error: function (error) {
            setTimeout(getData, 200);
        }
    });
});

​ test

Solution 2

You can use a custom function to do so

 $(document).ajaxError(ajaxErrorHandler); 

and set whatever you need to do in that handler

var ajaxErrorHandler = function () {
        //do something
    }

Solution 3

did you try?

  $.ajaxSetup({
    timeout:10000,
    beforeSend: function(xhr) {
      //
    },
    complete:function(xhr,status) {
      //
    },      
    error: function(xhr, status, err) {
      switch (status){
      case 'timeout': {}
      case 'parseerror': {}
      case 'abort': {}
      case 'error': {}
      default: {}
      }
    }
  });

Solution 4

I was getting 500 internal server error and when it was point me to the line xhr.send( ( s.hasContent && s.data ) || null );

But when I checked apache logs ( for internal server error ) error was something else in some other code.

Please check that once too.

View more solutions

Comments

[bfavaretto]

Did you try adding a try/catch block around the $.ajax call? I'm not sure what that error means, but looks like it happens when trying to issue the request, and I think .ajaxError only works with errors on the response.