jQuery error logging

As I may be doing alot of development in jQuery in the up and coming future, I decided to start by writing an exception throwing and logging plugin.

Here’s where I am so far, I’ve created an error throwing plugin which will take several parameters; an exception name, a message and a number of debugging objects (like a XML object or a JavaScript object).

You would use it like so:

$.throwError({
  name    : 'MyException',
  message : 'You simply can\'t do that!',
  object  : $(this),
  xml     : $('#mungElement')
});

…or… it would be better to have a method for each plugin to create the above:

var handleError = function(message, debugInfo) {
  var error = {
    name    : 'MyPluginError',
    message : message
  };
  error = $.extend(error, debugInfo);
  $.throwError(error);
};
 
if (!thisWillWork) {
  handleError('You simply can\'t do that!', {xml: this});
}

Then, I have a logging plugin which can be used for catching these errors:

try {
  $('#ticker').ticker();
} catch(e) {
  $.log.error(e);
}

The ‘$.log.error’ method checks if a ‘console’ is available and then records the error as a traced exception with the given debug objects displayed. If the console is not available, it will then use the alert function.

I intend on extending this functionality so that the error will be displayed in a nicely formatted popup (if the console isn’t available).

Obviously we don’t want this to be displayed on production so another feature will be to separate environments. Does anyone have any suggestions on how to do this? I was thinking putting another query string on the URL, for instance: http://mysite.com/mung.html?_js_dev=1

Source code for the plugins:

(function($) {
  $.log = {};
 
  $.log.debug = function(message) {
 
    if (window.console && window.console.firebug) {
      console.debug(message);
    } else {
      alert("Debug Message: " + message);
    }
 
  };
 
  $.log.info = function(message) {
 
    if (window.console && window.console.firebug) {
      console.info(message);
    } else {
      alert("Info: " + message);
    }
 
  };
 
  $.log.warn = function(message) {
 
    if (window.console && window.console.firebug) {
      console.warn(message);
    } else {
      alert("WARNING: " + message);
    }
 
  };
 
  $.log.error = function(e) {
 
    if (window.console && window.console.firebug) {
      switch (typeof e) {
        case "boolean":
        case "number":
        case "string":
          console.error(e);
          break;
        case "object":
          console.group(e.name);
          console.error(e.message);
          if (e.object) {
            console.dir(e.object);
          }
          if (e.xml) {
            console.dirxml(e.xml);
          }
          console.trace();
          console.groupEnd();
          break;
        default:
          $.log.warn("Problem logging error. Unknown error type: '" + typeof e + "'");
          console.error(e);
      }
    } else {
      var message = "FATAL ERROR!: ";
      switch (typeof e) {
        case "boolean":
        case "number":
        case "string":
          alert(message + e);
          break;
        case "object":
          alert(message + e.name);
          break;
        default:
          $.log.warn("Problem logging error. Unknown error type: '" + typeof e + "'");
          alert(message + e);
      }
    }
 
  };
 
  $.throwError = function(info) {
 
    var error = new Error(info.message);
 
    if (info.name) {
      error.name = info.name;
    } else {
      error.name = 'Error';
    }
 
    if (info.object) {
      error.object = info.object;
    }
 
    if (info.xml) {
      error.xml = info.xml;
    }
 
    throw error;
 
  };
})(jQuery);

One Comment to “jQuery error logging”

  1. YUI errorLogging | Inspire Labs

    [...] As we have decided to start using the YUI javascript framework, I rewrote the logging tool I did for jQuery. [...]


Leave a Reply

You must be logged in to post a comment.