JavaScript: catch the error!

Tweet

Who knows about try... catch statement? Who use it?
I know that code have to be clean, working and thoroughly tested, however everybody should know about the possibility of managing syntax errors in JavaScript.
How terrible is when the JavaScript alert box popups with a runtime error (a nightmare for every programmer!) in front of our web visitor asking for "Do you wish to debug?"? Debug what?! Have I got a virus? Run, run, run away! And the visitor actually runs away (often scared) from your wonderful web site to never return, in fear of misterious threats.
So, why not use the try... catch statement?

Introduction

The mentioned statement is very easy to use. I believe that in most cases it is just a matter of being lazy and developers don't want to waste time adding a few more lines to their functions. I must admit I am lazy too in this matter, but I keep forcing myself to try and catch everytime I can.
The logic behind the statement is simple: whenever you have a function or a block of code, you should put a try block containing the snippet and a catch block that actually contains the code to be run in case of errors.

try
    {
      //your snippet
     }
catch (err)
     {
      // handle the thrown error
     }

The only thing you must remember is that you have to write the try... catch statement in lowercase, otherwise it will throw a syntax error... and you don't want that to happen!

Examples

Now, let's see an example. We write a function opening an alert box, but with an error in it, just to see the effect.

<script type="text/javascript">
var error_msg="";
function show_alert()
{
try
  {
  aaaaalert("Welcome guest!");
  }
catch(err)
  {
  error_msg="There was an error on this page.\n\n";
  error_msg+="Error description: " + err.description + "\n\n";
  error_msg+="Click OK to continue.\n\n";
  alert(error_msg);
  }
}
</script>
<input type="button" value="Click me!" onclick="show_alert()" />

As you may have noticed, there's a syntax error in our show_alert function. Specifically the alert command has too many a ( aaaaalert("Welcome guest!"); ).
Let's see it in action.



Ok! If you click the button, you will see an alert box stating there was an error.
In a previous post, we saw JavaScript pop up box. If you remember, we discussed about alert, confirm and prompt. In the previous example, we can change the error pop up (which is an alert), with a confirm and let the user decide what to do: "Click ok to continue or cancel to go to the homepage" could be a good solution.

catch(err)
  {
  error_msg  ="There was an error on this page.\n\n";
  error_msg  +="Click OK to continue viewing this page,\n";
  error_msg+="or Cancel to return to the home page.\n\n";
  if(!confirm(error_msg))
    {
    document.location.href="http://thewebthought.blogspot.com/";
    }
  }

Just change the catch(err) block with the above code. And that's it!
Happy coding!