Raygun4js gets bigger error messages & jQuery support

By Hilary Cook | Posted Apr 22, 2013 | 2 min. (410 words)

I’m pleased to announce two new improvements to the JavaScript error provider for Raygun.io: Larger error messages and support for jQuery Ajax errors.

Larger Error Message Support

Previously the provider was bundling up all of the error message information into a string and attaching that to the query string of an image tag’s source URL in order to send the error information to the Raygun endpoint. It was simple and worked well until we had a large (or even medium!) amount of error data to transmit.

Worse yet, Internet Explorer restricts the total length of a URL to ~2000 characters, which can easily be exceeded with even an average sized error.

In order to work around this and continue to support a large number of browsers we have modified this to now use a Cross-Origin Resource Sharing (CORS) request. This has the advantage that we can use a POST request which has significantly higher size limits. In order to achieve this we had to use the following JS objects: a regular XMLHttpRequest and XDomainRequest for IE8 & IE9. Because we need to know which of these the browser supports we test for the following property of XMLHttpRequest: withCredentials

xhr = new window.XMLHttpRequest();
if ("withCredentials" in xhr) {
  // XHR for Chrome/Firefox/Opera/Safari.
  xhr.open(method, url, true);
}

Otherwise we test for the existence of window.XDomainRequest with the following code, this is used for IE8 & IE9 as IE10 supports CORS requests with XMLHttpRequest:

if (window.XDomainRequest) {
  // XDomainRequest for IE.
  xhr = new window.XDomainRequest();
  xhr.open(method, url);
}

You can see these changes in this commit on GitHub

jQuery AJAX error hooks

The other improvement we have added is for jQuery users. If jQuery is loaded before you include the raygun4js provider then we will add a hook for the ajaxError function so that we will alert Raygun to any AJAX errors that occur using jQuery. We do this using the ajaxError hook on document, as you can see below:

$(document).ajaxError(processJQueryAjaxError);
function processJQueryAjaxError(event, jqXHR, ajaxSettings, thrownError) {
  Raygun.send(thrownError || event.type, {
  status: jqXHR.status,
  statusText: jqXHR.statusText,
  type: ajaxSettings.type,
  url: ajaxSettings.url,
  contentType: ajaxSettings.contentType });
}