Javascript is a powerful tool in the web programmers toolbox however, it's also one of our greatest headaches. Dealing with browser inconsistencies is always a source of great pain. You test on multiple platforms, find everyone you know with a mac running safari and think you have your code locked down however it rarely always works out this way. Being able to detect javascript errors in the wild can be a great resource for you to really see how your code is performing on a day to day basis. Mozilla and IE support a powerful event handler called "onerror" used like window.onerror = function(){};

You can create a custom function at the top of all your scripts that will record any parsing or exception errors generated. You can create your function to accept 3 parameters, the message of the error, the URL of the error and the Line number of the error. Creating this function is as simple as so:





Now the end user really doesn't care which line an error occurred on but the powerful part is being able to get this information back to the developers. Using AJAX technologies you can easily record a log of all js errors on your site so you can take appropriate action to fix these issues. Not only can you include msg, line and error URL, but you can also send any other information javascript can capture such as referring page and the type of browser the client is using.

I'm going to use my standard AJAX class I use in my applications. I'm not a big fan of overhyped, oversized, slow AJAX frameworks that take a very simple concept and turn it into a serialized mess so I just use my trusty 97 line js class which can be found here [url]http://www.litfuel.net/tutorials/js_errors/class_xmlhttp.js[/url]. I'm not going to go over ajax as I'm sure there are many other places you can get the basics. Basically this script just allows you to create an XMLHTTP object and pass POST parameters and a callback function.

To use the object you simple write:

// post data you want to send to the server
var POSTData = 'msg=' + msg ;

// create the actual xmlhttprequest object and pass the URL of the PHP page you want to call
var s = new XMLHTTP("error_server.php?");

// post data to the server and assign processReqChange as the function to call back when the data is posted
var xmlDoc = s.call(POSTData, processReqChange);


Putting these two things together you can now log all of your JS error msgs behind the scenes and create an offline viewer that you and your other programmers can sift through. I prefer to err on the side of performance so the goal is just to log some quick info to the server and set up a cron job to email that data each night to the developers.



FILE 1 - Our main HTML File index.html













So what we're doing here is first including our XMLHTTPRequest class to instantiate our JS Object, then including the onerror functionality that will log the data to our server on every webpage. You can find the js_error_logger.js file here: [url]http://www.litfuel.net/tutorials/js_errors/js_error_logger.js[/url]

js_error_logger.js file:

window.onerror = function(msg, err_url, line) {
// create the post data string
var POSTData = 'msg=' + msg + '&err_url=' + err_url + '&line=' + line + '&browser=' + navigator.userAgent;
var s = new XMLHTTP("error_server.php?");
var xmlDoc = s.call(POSTData, processReqChange);
}


So lets step through this to find out whats going on:

window.onerror = function(msg, err_url, line) {


we're saying that for the window object, when there is an error call this function and pass in an error message, the URL and line number it occured on.


var POSTData = 'msg=' + msg + '&err_url=' + err_url + '&line=' + line + '&browser=' + navigator.userAgent;


Now we're creating some data we're POST'ing to the PHP server script. We're also including the Browser that the user is using as well.


var s = new XMLHTTP("error_server.php?");
var xmlDoc = s.call(POSTData, processReqChange);


now we instatiate our xmlhttp object and call it with our POST data and assigning the call back function. I'm not going to use the callback function as this time because I want it to appear to be behind the scenes but you could also alert the user that the error was logged.

The PHP script is as simple as pie:


// SERIALIZE THE POST DATA TO A FILE TO BE READ LATER ON
file_put_contents('js_errors.txt', serialize($_POST)."|", FILE_APPEND);
?>


We're just serializing the POST data and appending it to our js_errors.txt file. This is the fastest and simplest way to log the data without affecting user performance. The errors file can be parsed offline without affecting server performance too much.

To create a viewer for this file you can do this:

$js_file = explode('|', file_get_contents('js_errors.txt'));
foreach($js_file as $errors)
{
$js_errors = unserialize($errors);
echo '
JS ERROR:
';
echo "MSG: {$js_errors['msg']}
";
echo "LINE: {$js_errors['line']}
";
echo "URL: {$js_errors['err_url']}
";
echo "BROWSER: {$js_errors['browser']}
";

}
?>


And what prints out is:
JS ERROR:
MSG: Object expected
LINE: 16
URL: http://localhost/misc/js_error_ajax/index.htm
BROWSER: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 3.1)

You can easily modify this as a cron job that emails this data to the developers each day.

Anyway, thats it. A simple example of using AJAX to make javascript debugging on remote systems easier. Enjoy

Ready for More?

Follow Me @jimplush