JavaScript

Exception Handling in JavaScript: Catching User Input

In a previous article, Alejandro Gervasio explained some key concepts related to working with primary error types, and how they are raised by JavaScript interpreters. This article will focus on developing specific sample code for trapping most of the primary error types according to data entered by users.

If working with multiple exception handlers is still a pretty foreign concept to you, let’s refresh what you’ve learned until now, by taking a quick look at the script developed in the previous tutorial. As you probably remember, it was a simple link generator, which implemented multiple handlers. The whole example looked like this:

As you can see, the above script simply generates some links on the fly by using some DOM methods, and works with several error handlers to manipulate three specific primary error types: reference, range and type errors. Notice how the whole “addLinks()” function includes the familiar “try” block, which as I described before, is helpful for trapping raised errors within the corresponding “catch” block.

Now, with all the hard work for handling errors placed inside a catch statement, I was able to trigger deliberately some primary error types, by replacing portions of code with erroneous instructions. With reference to this concept, a simple way to trigger a reference error is by replacing the below line:

var as=document.createElement('a');

with the following one:

var a=document.createElement('a');

After running the script, the JavaScript interpreter complains loudly by throwing a reference error, which is nicely caught by the program, as you can see below:

The following exception was thrown by the script :Incorrect reference! Error name :ReferenceError Error message :as is not defined

Or, if this example isn’t illustrative enough, I can go further by triggering a type error, taking out this line:

True to form, the script happily traps a type error, by outputting the following message:

The following exception was thrown by the script :Variable type is not correct! Error name :TypeError Error message :links[i].replace is not a function

As you can see, some primary error types are easily handled by the above example, which means that this ability should be taken into account when developing programs that implement a strong interaction through a user interface. So far, I’ve demonstrated how potential errors can be raised by introducing bad code within an existing function, but…is it possible to handle errors introduced either by well-intended or malicious users? Fortunately, the answer is affirmative, even when user input should always be verified through server-side mechanisms.

With reference to handling errors, which might be triggered by external input, the next step consists of writing a few examples that show roughly how user-triggered errors can be trapped trough the proper exception handlers. Thus, keep reading to find out how this is done.