Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to debug JavaScript Errors by Type

In this article we will see the process to debug errors by type using javascript.

We all are aware about the four major error types that are present in programming. These are compile errors, logic errors, input/validation errors, and runtime errors. As far as the error catching in code is concerned, it is usually restricted to validation as well as the run type errors. There is no such code construct yet available or built that could handle the logic errors at runtime. However for the syntax errors, we have an interpreted language such as JavaScript that won’t be catching those until and unless the script is loaded into and browser reads it. There can be situations when one can catch syntax errors and in today’s article, we will discuss on the syntax error and the two other error types.

A look at the JavaScript Error Types

Below bullet points lists the six primary java script errors mentioned in the JavaScript specification:

  • EvalError: This is raised at the time when the eval() functions is not used in a correct manner.
  • RangeError: This error is meant to be raised when a numeric variable exceeds its permissible range.
  • ReferenceError: This is raised when an invalid reference is made use of.
  • SyntaxError: This is raised when a syntax error is occurred during parsing JavaScript code.
  • TypeError: This is meant to be flagged up we have a type of a variable which is not as expected.
  • URIError: The flag will be raised in this case in the situation when the encodeURI() or decodeURI() functions are not used in a correct manner.

Introduction to Error.name Property

What is the advantage of having all the different error types? The benefit is that once can identify more accurately about the error one is dealing with which is achieved making use of Error.name property. This is for the reason that JavaScript's loose typing is not meant to support indicating the type you want to catch.

catch(ArrayIndexOutOfBoundsException e) {}

As far as javascript is concerned, one is required to make use of an “if” statement within a single "catch" block:

Listing 1: Represents the “catch” block in javascript

try {
	execute this block
} catch (err) {
	if (error.name === 'RangeError')
  {
  	do this
  }
  else if (error.name === 'ReferenceError')
  {
  	do this
  }
  else
  {
  	do this for more generic errors
  }
}

One could make use of a switch statement as well when verifying for several error types at once instead of ifs. This is for the reason that the same error name property is evaluated each and every time.

Let us take a look at the example that generates and captures a SyntaxError. The implementation or the execution of a code is linked to a button click event making use of the eval() function. Though we have an EvalError type as well, it does not take place for the reason that the eval() is used correctly; it is all about the code that is doubtful where in you can notice the missing closing quote ["]. This error type is thrown exclusively from the eval() method since we have syntax errors that will make the code execution to stop immediately which indicates that this can be caught in development and testing.

Listing 2: CaptureSyntaxError function

function captureSyntaxError() {
  try {
  	eval('alert("Hello world)');
  } 
	catch(error) {
		if (error.name === 'SyntaxError') {
  		alert("caught a " + error.name + ": " + error.message);
			//handle that error type
		}
		else {
			alert("caught a " + error.name + ": " + error.message);
			//handle generic errors here
		}
	}
}

Let us know around the EvalError as well, so the “if” statement has been replaced by a switch. An EvalError is very rare for the reason that the only way to encounter it is to make use of the eval in any way other than a direct method call. One can treat it like an object using the new keyword:

var y = new eval();

Setting it to a variable ought to throw an EvalError:

eval = 'test';

There will not be much of EvalError you will be encountering as far as Internet Explorer 8 and Firefox 4+ is concerned. Both these browsers treat the first example as a TypeError. Also they don't mind setting eval to the one you desire.

Listing 3: Shows the Evalerror capture

function captureEvalError() {
  try {
  	var sum = eval('function test(( { return 1 + 1; }');
    alert("NO ERROR CAUGHT: Your browser doesn't seem to mind that we just set eval to the letter 'x'!");
	} catch(error) {
  	switch (error.name) {
  		case 'SyntaxError':
  			alert("caught a " + error.name + ": " + error.message);
  			//handle error…
  			break;
  		case 'EvalError':
  			alert("caught a " + error.name + ": " + error.message);
  			//handle error…
  			break;
  		default:
  			alert("caught a " + error.name + ": " + error.message);
  			//handle all other error types here…
  			break;
  	}
  } 
}

The last but obviously not the least of all is the reference errors. They are most common of all which are caused by pointing a variable that has not been declared initially. For example:

var tmp = x; //no x variable declared!

As far as Internet Explorer 8 is concerned, this browser does not handle these correctly either and throws a TypeError instead.

Listing 4: Representing the Reference error capture

function captureReferenceError() {
  try {
  var sum = x + y;
    alert(sum);
	} catch(error) {
  	switch (error.name) {
  		case 'SyntaxError':
  			alert("caught a " + error.name + ": " + error.message);
  			//handle error…
  			break;
  		case 'EvalError':
  			alert("caught a " + error.name + ": " + error.message);
  			//handle error…
  			break;
        case 'ReferenceError':
  			alert("caught a " + error.name + ": " + error.message);
  			//handle error…
  			break;
  		default:
  			alert("caught a " + error.name + ": " + error.message);
  			//handle all other error types here…
  			break;
  	}
  } 
}

I hope you liked the article, see you next time.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login