Browse DevX
Sign up for e-mail newsletters from DevX


Eliminate Irritating JavaScript Errors : Page 3

No one likes those irritating JavaScript error messages, but to eliminate them you must add client-side error handling to your scripts, or, risk losing your audience.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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
In JavaScript 1.1 Netscape introduced the error event and the onerror event handler. The error event gives you the ability to handle image and document load errors. To use the onerror event, you must provide a function to handle the errors. Then you simply call your function with the onerror event handler. (See Figure 3)

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 <body> 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.

The value returned by onerror determines whether the browser displays a standard error message. If you return true, the browser does not display a message. If you return false, the browser displays the standard error message in the JavaScript console.

Another way to catch errors is to use the onerror event. The JavaScript engine raises the onerror event whenever an error occurs, so you can use it to set a global error trap. The code in Listing 4 sets the onerror event handler so it points to a function called handleErrors. With the onerror event handler set, the script engine executes the handleErrors function whenever any error occurs. The function returns true to suppress the standard error message. Try it now. 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.

Michael A. Sanchez is an independent Web developer for DevX Inc., JT West Corp., and Vantage Point Mortgage. Reach him at msanchez@runtimewebdev.com.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date