Using the onerror Event HandlerThe onerror event handler is built in to the window object. (As we saw in Chapter 1, the window object corresponds to the browser window itself, and it contains the document object.) Using the onerror event handler, you can specify a function the browser should call if there's been an error in your code. This event handler appeared in the Netscape Navigator 3.0 and the Internet Explorer 4.0, as you see in Table 3.16. Table 3.16. The onerror Event Handler
How do you connect a function to the onerror event handler? You just use the onerror property of the window object. For example, I can connect a function I'll name handleError to the onerror event as follows : <HTML> <HEAD> <TITLE>Handling an Error</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- window.onerror = handleError // --> </SCRIPT> </HEAD> . . . </HTML> When an error occurs, the browser will now try to call the handleError function, so we better write such a function. This function is automatically passed an error message, the URL of the web page that caused the error, and the line number in the script of the error itself, so here's how I set up the handleError function: <HTML> <HEAD> <TITLE>Handling an Error</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function handleError(message, URL, lineNumber) { . . . } window.onerror = handleError // --> </SCRIPT> </HEAD> . . . </HTML> We can display the error's information in an alert box using the alert method like this. Note the term "\n" here, which is a newline character that causes the text in the alert box to skip to the next line. (Using "\n" to skip to the next line is standard not just in JavaScript, but in languages such as C++ and Java as well. I use this term here because an alert box is designed to display text, not HTML; if we were displaying this text in a browser rather than an alert box, we would have to use the HTML <BR> tag to skip to the next line.) We can use the alert method to display the error's information in an alert box as follows: <HTML> <HEAD> <TITLE>Handling an Error</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function handleError(message, URL, lineNumber) { alert("Error " + message + "\n" + "in file " + URL + "\n" + "at line " + lineNumber + ".\n") return true } window.onerror = handleError // --> </SCRIPT> </HEAD> . . . </HTML> Note that this error handler returns a value of true, which tells the browser we've handled the error. (This means the browser won't display an error icon or error dialog box.) Tip If you don't want to handle an error in an onerror event handling function, just return a value of false, and the browser will take over, as it would have as if there were no onerror event handling function. Now when there's an error, an alert box will appear with all the details. So how do we cause an error? One way is to perform an illegal JavaScript operation, such as assigning a variable a value that you haven't yet defined. I'll do that here with a function named causeError that holds the statement var myData = undefinedVariable , where we haven't yet created the variable undefinedVariable (which means JavaScript won't know how to work with it). When the user clicks a button with the caption Create an Error, this statement will be executed, causing an error: (Listing 03-19.html on the web site)<HTML> <HEAD> <TITLE>Handling an Error</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function causeError() { var myData = undefinedVariable } function handleError(message, URL, lineNumber) { alert("Error " + message + "\n" + "in file " + URL + "\n" + "at line " + lineNumber + ".\n") return true } window.onerror = handleError // --> </SCRIPT> </HEAD> <BODY> <H1>Handling an Error</H1> <FORM> <INPUT TYPE="BUTTON" VALUE="Create an Error" onclick="causeError()"> </FORM> </BODY> </HTML> You can see the results in Figure 3.16. When the user clicks the button, the script causes an error, and an alert box appears describing the error. Figure 3.16. Working with errors. In this way, you can get information about the error, and even try to handle it in code if you like. However, the newer way of doing this is to use a try catch statement, following the lead of languages such as C++ and Java. In fact, Netscape Navigator 6.0 no longer passes the error message, URL, and line number values to the onerror handler (so the preceding example doesn't display any values in the alert box)perhaps in an attempt to switch to the try catch way of doing things. I'll take a look at try catch now. |