Error Dialog is a curtesy of WebFX
See Original Here

[Tell A Friend]

I've been getting lot of questions about how the custom error dialog was made and since we are badly needing new material I decided to add an article about error handling.

Error Handling

There are basically two ways of catching errors in a web page. One has been available since Netscape Navigator 3 and the other one is available in IE5 and Mozilla 1.0 (or whatever it is going to be called). In Mozilla this is a part of Javascript 1.4 and in IE it is a part of the JScript engine version 5.

window.onerror

This is the old standard solution to catching errors. The event onerror is fired whenever there is a script error in the page. When this event is fired the event handler is called with three arguments and these are: msg (Plain text error message), url (the url of the page that caused the error) and ln (the line on which the error occurred. To cancel the default error dialog you also need to set the return value to true. (In IE4+ you can do this with window.event.returnValue as well.)

function handleError(msg, url, ln) {
   // Do you custom code here
   return true;
}

window.onerror = handleError;

One big problem here is that you cannot resume the execution easily after an error.

Try - Catch

With IE5 (and Mozilla) you can use, the Java like, try - catch statements. These allow you to handle the exceptions (errors cause exceptions) in your code. You can have nested try - catch statements and you can even fire your own exceptions. Those of you who have been programming Java will find the following code very similar.

try {
   // Do some code here...
}
catch(oException) {
   // and handle exception here. Note that oException
   // is the reference to the exception object
}

In case of a script error the exception object has the following properties to describe the error: oException.msg, oException.url, oException.ln.

Throw

To create your own exception you use the throw statement. This keyword is followed by one object which is the object that is later bound the argument in the catch statement. I'll give you an example.

try {
   // ...
   try {
      if (something)
	     throw "Something went wrong";
	  // if no error then we continue
   }
   catch(oException) {
      throw oException; // If we don't want to process the erro
	                    // we should pass it along
   }
}
catch(oException) {
   alert(oException);
}

Try this (IE5/Moz only)

Error Dialog

When you are creating a custom error dialog the first way to catch errors is much more useful since this works in "all" browsers (and IE4 results in syntax error if you include any try/throw/catch statements) and it catches all errors in all function on the page.

The basic idea of the dialog is to open up a new window and display the error message in it. The code for this is placed in an external js file and is included to all pages at your web site. This is done by adding:

<script type="text/javascript" src="error.js"></script>

...to all pages (for WebFX this is done with a javascript include inside the includeHeading.js)

I also wanted all script errors to be displayed in the same window and be able to go back to previous errors. To achieve this I saved all errors as an expando property on the window.document object.

document._error_messages = new Array();
var w;

function doError(msg,url,ln) {
   var _error_obj = {msg : msg, url : url, ln : ln};
   // The above is a short syntax for var tmp = new Object(); tmp.url = url; ...

   // Then add this new object to the end of the _error_messages
   document._error_messages[document._error_messages.length] = _error_obj;

Then one defines the actual HTML to display. This is done in the js as one long string. This improves the speed for displaying the dialog. To jump between error messages one only needs to increase/decrease a counter describing the number of the currently showing error message and read the data on that position of the _error_messages array. Below is the script block used in the error dialog string:

<script>
window.onload=new Function('showError()');
var nr=0;
function next() {
   nr=Math.min(window.opener.document._error_messages.length-1,nr+1);
   showError();
}

function previous() {
   nr=Math.max(0,nr-1);
   showError();
}

function showError() {
   errorArray = window.opener.document._error_messages;
   if (errorArray.length != 0 && nr >= 0 && nr < errorArray.length) {
      url.innerText = errorArray[nr].url;
      msg.innerText = errorArray[nr].msg;
      ln.innerText = errorArray[nr].ln;
   }
}
</script>

To hide/display the error message the window is resized with window.resizeTo(nW,nH).

Now all that is left is the logic behind opening and populating the window. The first thing to do here is to check if the window already exists. This is checked by checking a global reference to the window. If the window is already opened we don't need to do anything (except adding to the _error_message array) but if no window has been opened we need to open up a new window and write the string to it:

if (!w || w.closed) {
   w = window.open("","_webxf_error_win","width=390,height=190");
   var d = w.document;
   d.open();
   d.write(str);
   d.close();
   w.focus();
}

Try this