How to Catch Errors in JavaScript

When developers are programming HTML with JavaScript, a number of errors can creep up. The basic idea behind error trapping is to try one or more tasks to determine whether they’ll work as anticipated.

How to use the try...catch block

When a line of code generates an error, the code catches the error, examines it, and attempts to fix the problem (or at least fail gracefully). The combination of error trapping and catching is called error handling. To handle errors, you use the try...catch block shown in the following code.

<script language="JavaScript">
   // Generate an error.
   allert("Display a message");
   // Write the error information onscreen.
   document.write("<p>The Error Type is: " + + "</p>");
   document.write("<p>The Error Message is: " +
     Err.message + "</p>");

In this case, the developer has made a typo that causes the program to access a nonexistent function, allert(). The try part of the block attempts to execute the function, but because the function doesn’t exist, the try block fails.

At this point, the catch block takes over. Notice that the catch block accepts a single parameter, which is always going to be an Error object. The capabilities of the Error object vary by browser because each vendor has implemented it in a slightly different way. However, you always receive an error type and message. You can use these features to diagnose the error type and possibly recover from it.


The error trapping is extremely accurate in this case. It tells you precisely what is wrong with the code. You can’t always depend on the error handling to work this well. A good guideline is to make the try block as small as possible when working with code to ensure you can find the error with greater ease and also to obtain better error information.

The Error object in JavaScript

The Error object, like every other JavaScript object, supports some basic properties and methods that work across all browsers.

Although it’s safe to use generic properties and methods in your production application, use vendor-specific properties and methods only as an aid for debugging the application. The following list describes the generic Error object properties:

  • constructor: Displays a string showing the prototype used to define the object. In this case, you see “function Error() { [native code] }”.

  • message: Provides a message that describes the error. The quality of the message depends on which browser you use and the kind of error generated.

  • name: Provides the name of an error type that you can use to narrow down the area in which the error occurred.

  • prototype: Provides the means for adding both properties and methods to an object.

The Error object also provides a number of standard methods. As with properties, vendors provide a number of non-standard methods you can employ during the debugging phase of your application. The following list describes the standard methods provided by the Error object:

  • toSource(): Outputs the source of an error as a string that you can use when re-throwing an error.

  • toString(): Outputs a string that describes the Error object.

  • valueOf(): Outputs the native value of the error, normally the error message.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.