InformIT: Sams Teach Yourself JavaScript in 24 Hours

Creating Error Handlers

In some cases, there may be times when an error message is unavoidable, and in a large JavaScript application errors are bound to happen. Your scripts can respond to errors in a friendlier way using error handlers.

Using the `onerror` Property

You can set up an error handler by assigning a function to the onerror property of the window object. When an error occurs in a script in the document, the browser calls the function you specify instead of the normal error dialog. For example, these statements set up a function that displays a simple message when an error occurs:

function errmsg(message,url,line) {
   alert("There wasn't an error. Nothing to see here.");
   return true;
}
window.onerror=errmsg;

These statements define a function, errmsg, that handles errors by displaying a simple dialog. The last statement assigns the errmsg function to the window.onerror property.

The return true; statement tells the browser that this function has handled the error, and prevents the standard error dialog from being displayed. If you use return false; instead, the standard error dialog will be displayed after your function exits.

Displaying Information About the Error

When the browser calls your error-handling function, it passes three parameters: the error message, the URL of the document where the error happened, and the line number. The simple error handler in the previous example didn't use these values. You can create a more sophisticated handler that displays the information.

Listing 17.1 shows a complete example including an enhanced errmsg function. This version displays the error message, URL, and line number in a dialog box.

Example 17.1. Handling errors with a JavaScript function

<html><head>
<title>Error handling test</title>
<script language="JavaScript1.1" type="text/javascript1.1">
function errmsg(message,url,line) {
   amsg = "A JavaScript error has occurred. Please let us know about it.\n";
   amsg += "Error Message: " + message + "\n";
   amsg += "URL: " + url + "\n";
   amsg += "Line #: " + line;
   alert(amsg);
   return true;
}
window.onerror=errmsg;
</script>
</head>
<body>
<h1> Error handling test</h1>
<p>This page includes a JavaScript function to handle errors.
Test it by clicking the button below.</p>
<form>
   <input type="button" value="ERROR" onClick="garble">
</form>
</body>
</html>

This example includes a button with a nonsensical event handler. To test the error handler, click the button to generate an error. Figure 17.2 shows the example in action in Internet Explorer with the alert message displayed.

Figure 17.2 The error handler example in action.

Workshop: Debugging a Script | Next Section

Previous Section

Creating Error Handlers

Using the onerror Property

Displaying Information About the Error

Example 17.1. Handling errors with a JavaScript function

Using the `onerror` Property