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=' <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.
- Tutorial introduction
- Using the onerror event to suppress JavaScript errors
- Getting additional details on an error
- Creating custom JavaScript error dialog boxes
