Automatic Javascript Bug Reporting Using AJAX

Mon, 24th Dec, '07


I spend a considerable time debugging errors, and being a Web developer spans debugging CSS, JS and server end files as well. Often I find myself rolling up and down scrollbars on MySQL manual pages.

It annoys me no end to find that a user is seeing Javascript errors. And since Javascript being something that browsers have been trusted with, they had a field day unsupporting it. So it is very common to find that what you think is OK on browser1 is NOT_OK on browser2. And worse still, this incompatibility is reported by someone who is seeing a webpage on a live setup, a user or someone who least expects a nasty bug or something.

Now try this, save this as something.html on your server:

<html>
<head>
<title>Auto JS Bug Reporting Demo</title>
<script type=”text/javascript”>
var msg = null;
var opdiv;
var oRequest;

// ooooo, ajax. ooooooo …
if(window.XMLHttpRequest)
oRequest = new XMLHttpRequest();
else if(window.ActiveXObject)
oRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

onerror = handleErrors;
function handleErrors(errorMessage, url, line)
{
msg = “[URL:” url “, line no.: ” line “] ERROR: ” errorMessage;
sendAReq(“err=” msg, ‘errdiv’);
return true;
}

function sendAReq(sendStr, odiv)
// a generic function to send away any data to the server
// specifically ‘handleerror.php’ in this case
// what the server replies is handled by showcontent()
{
opdiv = odiv;
oRequest.open(“POST”, “handleerror.php”, true); //this is where the stuff is going
oRequest.onreadystatechange = showcontent;
oRequest.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
oRequest.send(sendStr);
}

function showcontent()
{
if(oRequest.readyState == 4)
{
// if the output is ready, print it to the div as set by the caller function
// in this case, the opdiv, the output div, was set to ‘errdiv’ in handleErrors(…)
if(oRequest.status == 200)
document.getElementById(opdiv).innerHTML = oRequest.responseText;
else
document.getElementById(opdiv).innerHTML = “<font color=#FF3300 > Try Again Later </font>”;
}
}
</script>
</head>

<body onload=”javascript:wow();”>
<div id=”testdiv”>
I am a div. Press this button to cause an error.<br>
<input type=”button” onclick=”javascript:sendAReq(‘err=hello, ‘errdiv’);” value=”GET some FUN”>
</div>
<div id=”errdiv”>
</div>
</body>
</html>

So this file has two Javascript errors. One is in the body onload function, which calls a nonexistent function, wow() . And the other is caused in the onclick event of the only input button on this page.

So this page is easy in the way that …

[1] It assigns handleErrors as the default error handler in the line onerror=handleErrors ;

[2] It puts together a error report in handleErrors and then calls sendAReq with the report string and the name of the output div, in this case being ‘errdiv’.

[3] sendAReq sends the error report to handleerror.php and sets the output div dutifully to ‘errdiv’ in the first line itself. The output div we keep referring to here is the div to which the server will send the output. Oh … so you looking for handleerror.php??


<?php
function logerr($errmsg)
{
//write your own handling code here, store it in a file or store it in a DB, whatever
$errfilename = ‘jsbugs.txt’;
if (is_writable($errfilename))
{
if (!$handle = fopen($errfilename, ‘a’))
{
exit;
}
if (fwrite($handle, $errmsg.’\r\n’) === FALSE)
{
exit;
}
fclose($handle);
}
}
logerr($_REQUEST[‘err’]);
echo “I got this: “.$_REQUEST[‘err’];
?>

[4] So handleerror.php gets the error report Javascript compiled and stores it in a file named jsbugs.txt. make sure you have a file created already named jsbugs.txt with write permissions before you run this script. Should you want to do more fancy things, you can store the User-Agent string, timestamp and a lot more things in a database maybe. I leave that to you.

So now, you are ready with something.html about to be fetched in your browser, and handleerror.php copied in the web root directory and jsbugs.txt in the same directory as well, with write permissions.

Now get something.html and you should see your jsbugs.txt file piling up with cute strings, which may later turn up to be sleep-stealing, girlfriend-eating monsters.

Advertisements

3 Responses to “Automatic Javascript Bug Reporting Using AJAX”

  1. Suhas Dhoke Says:

    Nice trick.

  2. Hakan Says:

    Exactly what I was thinking of! Except, I would want to promptly know that some part of my website has crashed. So, I’ll send these error messages to my email instead of storing them on the server.

  3. krahulg Says:

    @Hakan just whatever fits you. i will make two more interesting posts in a day or two about ajax form submission and something else. just fyi, in case it interests you.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: