Categories:
Partners
Web Hosting
We've partnered with HostGator for reliable, affordable hosting starting at $3.95/mon. Use coupon code "javascriptkit25" for 25% off any package.

Creating custom JavaScript error dialog boxes

Time for a little fun. In this closing section, lets see how to create a custom error boxe that replace the default one in the event of a js error. This box, unlike the default box, pops up only once, even if there are multiple errors on the page:

<html>
<head>

<style type="text/css">
.errordialog{
position:absolute; width:100%; border-bottom:1px solid black; background:lightyellow; left:0; top:0; padding: 3px 0; text-indent: 5px; font: normal 11px Verdana;
}
</style>

<script type="text/javascript">

var errordialog=function(msg, url, linenumber){
var dialog=document.createElement("div")
dialog.className='errordialog'
dialog.innerHTML='&nbsp;<b style="color:red">JavaScript Error: </b>' + msg +' at line number ' + linenumber +'. Please inform webmaster.'
document.body.appendChild(dialog)
return true
}

window.onerror=function(msg, url, linenumber){
return errordialog(msg, url, linenumber)
}
</script>

<body>

<script type="text/javascript">
document.write('hi there'
</script>

</body>
</html>

Click here to for an actual demo of this simple custom error dialog.

If you're more ambitious, you can actually create a custom error box that, when closed, sends the information regarding the errors (error message, line number etc) to you, providing you with an easy way to debug your scripts with the help of your surfers. The idea is to store all the error information into an array, and connect the form button inside the error window to your usual form submission script, so all the error info is submitted to you when the error box is closed.

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.