How to detect if your server is down when making jQuery Ajax calls

If you developed an ajax rich web application, maybe even a single page interface, you want to make sure that the user gets notified if the server is not reachable anymore. This happens either if the it goes down or the client loses its network connection. Depending on your code the application can run for a while and the user is confused about missing interactivity.

So how do you detect this? jQuery offers an error callback if something with the call goes wrong.

window.setInterval(function() {
$.ajax({
   type: 'GET',
      url: 'http://www.myapp.com/heartbeat',
      success: function(data, textStatus, XMLHttpRequest) {},
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert('Failure');
      }
  });
}, 2000);

Unfortunately this does not work for a server which is down and if you are using a debugger like Firebug you will see that these calls have the status aborted. It turns out that if the server goes away jQuery will still execute the success callback. So how do you know that the server died?

I changed the response of the heartbeat query to contain some simple string like ‘alive’. In the success callback I just check if the data contains this string. If it does not, I know that I do have a problem and I need to make sure that the user can’t do anything anymore.

I use the jQuery plugin uiBlock to block every interaction and show a nice little message. Check out the uiBlock demos.

var uiBlocked = false;

window.setInterval(function() {
    $.ajax({
      cache: false,
      type: 'GET',
      url: '/mywebapp/alive.txt',
      timeout: 1000,
      success: function(data, textStatus, XMLHttpRequest) {
        if (data != 'alive') {
          if (uiBlocked == false) {
            uiBlocked = true;
            $.blockUI({
              message: "I'm trying to connect to the server.",
              css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
              } });
          }
        } else {
          if (uiBlocked == true) {
            uiBlocked = false;
            $.unblockUI();
          }
        }
      }
    })

  }, 2000);

This code will check the server every 2 seconds and will block the UI when the server is not reachable and will come back up if the connection is alive again. Depending on your scenario (intranet/internet) you can change the interval for checking the connection.

This took me a couple of hours to get to this point and I thought it might be worth sharing. It seems a bit hacky but it works. What do you think?