Monday 11 April 2011

JavaScript: catch the error!

   


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!

2 comments:

  1. > 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!"); ).

    That's not a syntax error. It's a runtime error. :)

    ReplyDelete
    Replies
    1. OH! Wow, that was cool! I'm not totally sure you're right...
      There are two types of JavaScript error:

      Syntax Error: Occurs when there is a mistake in the way the code is written; for example, a typo or missing character.
      Runtime error: Occurs when the script is unable to complete its instructions; for example, if a specified object cannot be found.

      In any case... it's an error! ;)

      Delete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.