How to determine and record latency of a remote server in the browser

Question

Related to: How to determine latency of a remote server through the browser

I am trying to understand the feasibility of collecting external server http response status codes.

For context: I am loading a javascript library to page which is written to capture DOM element values and then assemble a GET request to an external server to pass these values for collection. Google Analytics is a perfect example of this, the ga.js library scopes data values from the page/browser and makes an image request with a lot of querystring name/value pairs and/or cookie values to a tracking pixel on an external server. This is a common activity and is generally understood.

What I am trying to record is the response/acknowledgement of the external collection server(for reduced processing and or data collection overhead, this could be limited to only occurrences where the response is NOT a 200). My understanding is that the response code is only available in HTTP headers. I do not even know if it is possible to capture the header responses in this manner. I am unclear on how to capture or otherwise record those response codes and make them available in the browser so that a subsequent collection routine, likely a javascript library, could collect these codes in conjunction with the outbound server domain(i.e. HOST: google-analytics.com STATUS: 413 Request Entity Too Large) and also send these collected values into an external collection environment.

As an additional "nice to have" it would also be beneficial to have timings collected as well but I realize this is a distinctly separate issue. Start a timer when the request is made, stop it when the request is acknowledged with a status code returned to the browser, send that number with the data: (HOST: google-analytics.com STATUS: 413 Request Entity Too Large TIME: 283ms).

Answer 1

If you are using ajax to make your request to the remote server, and the remote server's responses, you can get the status code from the XmlHTTPRequest object. After the request is complete, the status property gives you the http status code.

You can use something like jquery to simplify things.

Warning: this example code is untested

 var startTime = new Date().value;

 $.get('http://example.com/some/path', { param1:'value1', param2:'value2'})
    .done(function(data, status, jqxhr) {
      var endTime = new Date().value;
      var elapsedMS = endTime - startTime;
      // handle your success things here
    })
    .error(function(jqXHR, textStatus, errorThrown ) {
      var endTime = new Date().value;
      var elapsedMS = endTime - startTime;
      // handle your failure here
      if (typeof console != 'undefined') {
        console.log('your url', jqXHR.status, textStatus, errorThrown);
      }
    })
    ;

Note: Some cross-domain ajax requests are blocked. The remote server has to expressly set response headers to allow these sorts of requests.