Using the Throw, Try, and Catch Statements
Microsoft JScript version 5, which ships with Internet Explorer 5+, introduced the throw, try and catch statements. The try and catch statements give you the ability to handle runtime errors during their execution with little to no performance loss. JScript 5 also introduced the Error object. JScript throws instances of the Error object whenever an error occurs in your code. The try statement lets you invoke and “try” to execute a function or code block. When there are no errors the code executes; otherwise, you can catch the error object in a “catch” block, and handle the error in a more user-friendly manner.
|Author Note: With the ECMAScript standards in version 2, you can use either the try/catch or the onerror event to trap and handle your errors. Netscape Navigator 6 and Internet Explorer 5+ support them both. Note that these methods will not work in browsers earlier than version 5; however, for IE-only clients you can use client-side VBScript which has an “On Error Resume Next” statement to prevent automatic error message displays.|
The error object has two properties: number and description. The number property contains a two-byte integer. To get the “real” error number, you must mask this integer with 0xffff using the bit manipulation operator (the ampersand & character). The description property returns a string containing a description of the error.Generating an Exception
Figure 1 shows the results of running the HTML page in Internet Explorer. Clicking the View Message button causes an error and forces the browser to display the error message.
Although the dialog is not exactly the same, viewing the HTML page in with Netscape 6 produces a similar error message. (See Figure 2)
Handling Exceptions with Try/Catch
To solve the problem, you can wrap your script inside the try and catch statements so you can take more appropriate action, such as writing the errors to a flat file or database for tracking or monitoring, (requires another round trip to the server or more advanced techniques such as the IE WebService Behavior or XMLHTTPRequest), writing a custom message to the client window with options for the user, or even redirecting to a new page.
The custom message shown in Listing 2 displays the error number and error description for educational purposes (see Figure 3), but in real world situations I recommend not displaying these properties. They are of no use to your audience. Instead, you can use an alternate to the alert method?the confirm method?which not only displays a message, but also lets the user click an OK or a Cancel button, and returns true (for OK) or false (for Cancel). For more customized or complex error pages, the best option is to redirect users to a custom error page.Displaying Custom Error Messages
A more interactive way to handle an error is to give your audience an option to continue viewing the page or return to the preceding page or to some other appropriate location. Listing 3 uses the confirm method to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go somewhere else. If the confirm method returns false, the user clicked Cancel as opposed to OK, and the code redirects the user. If the confirm method returns true, the code does nothing. Try it now.
Trapping Errors with an onerror Event Handler
Unlike other events, the onerror event automatically receives 3 parameters:
- errorMessage?the error message associated with the current error
- url?the URL of the page in which the error has occurred
- line?the line number at which your error has taken place
|Author note: onerror works in both Netscape and Internet Explorer, but be aware that Internet Explorer does not handle the onerror attribute of the tag correctly. Also, in Netscape (but not IE) the window object has an onerror property that?if set to null?prevents the display of all runtime errors, but that’s not the best way to handle errors.|
Figure 4 shows the result of catching the error with the onerror event and handling it in a way that improves the user experience. Again, in a real world situation I do not recommend displaying the technical error information.
Once again, with the ECMAScript standards in version 2, you can use either the try/catch or the onerror event to trap and handle your errors. Netscape Navigator 6 and Internet Explorer 5+ support them both. Whichever method you choose, always trap for errors, and handle them in a non-intrusive manner.