JavaScript, CSS, HTML and Random Technical Stuff…

A couple of weeks ago I attended a presentation on Enterprise Javascript Error Handling by Nicholas Zakas. This was during the Front-End Engineering Summit at Yahoo!. During the presentation he showed a cool way of logging Javascript errors on server side. Using this technique you can suppress all the Javascript errors on browser side and log the errors in error log on the server. He just went over the idea with a small code snippet. I decided to try it out and then write this page.

There are two parts to the process, first suppressing Javascript errors and second, logging the errors on server side. The first part makes use of window.onerror which is an error handler for error events. The idea is assigning a custom function reference to this error handler. This function will call another function to log the error on server side and returns true. When the function assigned to window.onerror returns true it prevents firing a default event handler and suppresses the error. Here is the javascript source code for the first step:

<br /> window.onerror = function (msg, url, line) {<br /> logJSErrors({ message : msg,<br /> lineNumber : line,<br /> fileName : url,<br /> browserInfo : window.navigator.userAgent<br /> });</p> <p> return (isDebug === 1) ? false : true;<br /> }<br />

onerror event handler is assigned to a function with three parameters– msg which is an actual error message, url is page url, and line is the line number where error occurred. This function calls logJSErrors function and passes an object literal to it. Passed object literal has four properties. First three are msg, url, line and fourth one is navgator object. We are passing navigator object just to be able to log the browser information. Second line of the function returns true or false. isDebug is a global variable which decides if we want to return true or false. This is an optional feature. We can have this only if we want to provide a debug mode. When you are in debug mode, above function returns false that means it wont suppress the errors and errors can be seen in browser.

Now the second step is writing a javascript function which does the job of logging the errors on server side. Here is the code for that:

<br /> function logJSErrors(errObj) {<br /> var img = new Image();<br /> img.src = “log.php?m=” + encodeURIComponent(errObj.message) +<br /> “&ln=” + encodeURIComponent(errObj.lineNumber) +<br /> “&url=” + encodeURIComponent(errObj.fileName) +<br /> “&browser=” + encodeURIComponent(errObj.browserInfo);<br /> }<br />

First line creates an instance of an Image object. The src property of this newly created image is set to a php script (log.php) which actually logs the error information on server side. Input parameter of this function is an object literal with error information. All properties of the passed-in error object are passed to php script via url parameters.

Now following is the source code for log.php:

<br /> <?php</p> <p> $error = "[".date('D M d H:i:s Y', time())."] [JS Error]\n "; // error timestamp<br /> $error .= isset($_REQUEST['m']) ? "Message: ".$_REQUEST['m']."\n" : "";<br /> $error .= isset($_REQUEST['url']) ? " URL: ".$_REQUEST['url']."\n" : "";<br /> $error .= isset($_REQUEST['ln']) ? " Line Number: ".$_REQUEST['ln']."\n" : "";<br /> $error .= isset($_REQUEST['browser']) ? " Browser Info: ".$_REQUEST['browser']."\n" : "";<br /> $error .= "\n";</p> <p> $error_log = "errors.txt";</p> <p> if(is_writable($error_log)) {<br /> if ($handle = fopen($error_log, 'a')) {<br /> fwrite($handle, $error);<br /> fclose($handle);<br /> }<br /> }</p> <p>?><br />

log.php collects all the error information that was sent to it via url parameters, creates a string and writes it to the errors.txt file.

Finally, here is the example php script which makes use of all the above explained functions. This file has following things:

• function that overrides default behavior of window.onerror
• logJSError()
• Example function which intentionally generates error. (used for testing)

<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></p> <p><script> <?php if(isset($_REQUEST['debug'])) { echo "isDebug = ".$_REQUEST['debug'].";\n"; } else { echo "isDebug = 0;\n"; } ?> function logJSErrors(errObj) { var img = new Image; img.src = "log.php?m=" + encodeURIComponent(errObj.message) + "&ln=" + encodeURIComponent(errObj.lineNumber) + "&url=" + encodeURIComponent(errObj.fileName) + "&browser=" + encodeURIComponent(errObj.browserInfo); }</p> <p>window.onerror = function (msg, url, line) { logJSErrors({ message : msg, lineNumber : line, fileName : url, browserInfo : window.navigator.userAgent });</p> <p> return (isDebug === 1) ? false : true; }</p> <p>// This function will generate an error since there is no "myEl" present in this document function changeBgColor(){ document.getElementById("myEl").backgroundColor = "red"; } changeBgColor();</p> <p></script></p> <p></head><br /> <body><br /> done! check the error log to view JS error details.<br /> </body><br /> </html><br />

When you load this file in browser it will generate JavaScript error but that error wont be shown in the browser instead it will be logged in the error log (in this case errors.txt). If ?debug=1 is passed to this php script then it will log the errors but wont suppress them since debug = 1 triggers debug mode.