fbpx
April 2, 2020
JavaScript error handling

Introduction to JavaScript Error Handling

In this tutorial we will be discussing about JavaScript error handling which entails the types of errors you can find when coding in JavaScript and how to handle them. In our previous tutorial we discussed about JavaScript regular expressions where we looked at the use of the search () and replace () strings. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: JAVASCRIPT RegExp | Introduction to JavaScript Regular Expressions

JAVASCRIPT ERROR HANDLING

When coding in javascript or any other programming language, there are three types of errors you can come across and they include:

  • runtime error
  • logical error
  • syntax error

RUNTIME ERROR

This error which is also called the exception error usually occur at the execution of a code. For example you can have a complete looking code with the right syntax but it contains a method that does not exist. such situation will lead to a runtime error been experienced at the execution of the code.

LOGICAL ERROR

The logical error occurs based on fault in the logic used in designing or structuring the code. This error is not due to runtime and syntax errors. Most times the code gives an output on execution but the output isn’t what is expected of the code. This means that there is a mistake in the logic that drives the code to give a desired output.

SYNTAX ERROR

A syntax error can easily occur due to a missing part of a code. For example we can experience a syntax error in JavaScript when the semi colon that ends a code is missing. This error is mostly detected on code interpretation and it only affects the codes on the same thread and doesn’t affect other codes.

JAVASCRIPT TRY, CATCH AND FINALLY STATEMENT

The try, catch and finally statement are used in JavaScript to handle exceptions. The try statement holds codes that are always run at first, the catch statement holds codes that are run when an error exception is encountered while the finally statement holds colds that are always run at the end.

SYNTAX SHOWN BELOW

<script type = "text/javascript" name="javascript">
   
      try {
         // Code to run
         
      } 
      
      catch ( e ) {
         // Code to run if an error exception occurs
        
      }
      
      [ finally {
         // Code that will always run
        
      }]
   
</script>

EXAMPLE USING THE TRY AND CATCH STATEMENT

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        function _click(){
           var a = 6;
           try {
               alert('the number is:'+ a);
               
           } catch (error) {
            alert('error encountered');
           }

        }
    </script>
   
    <title> try and catch statement   </title>
</head>
<body>

    <input type="button" value="click me" onclick="_click()">
</body>
</html>

RESULT

try and catch statement

EXAMPLE USING THE TRY.. CATCH AND FINALLY STATEMENT

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        function _clicked(){
           var a = 6;
           try {
               alert('the number is:'+ a);          
           } catch (error) {
            alert('error encountered');
           }
           finally {
               alert('this block must run');    
           }
        }
    </script>
    <title> try...catch...finally statement   </title>
</head>
<body>
    <input type="button" value="click me" onclick="_clicked()">
</body>
</html>

RESULT

try…catch…finally statement

THE THROW STATEMENT

We can as well use a throw statement in handling errors in JavaScript. This throw statement allows developers to create custom errors that work perfectly with the catch statement. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript">
    function on_clickd(){
        var a=0;
        var b=9;

        try{
            if(a==0){
                throw('divide by 0 error')
            }
            else{
                alert('a is not equal to 4')
            }
        }
        catch(e){
            alert("Error: " + e );

        }
    }  
    </script>
   
    <title>try, throw and catch statement</title>
</head>
<body>
    <input type="button" value="click me" onclick="on_clickd()">
    
</body>
</html>

RESULT

try, throw and catch statement

ERROR HANDLING USING THE onerror() METHOD

The onerror() method can be used to handle errors in JavaScript. This displays the error message window when an error is encountered on the web page.

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript">
    window.onerror = function(){
        alert('An error encountered')
    }
    </script>
   
    <title>the onerror method</title>
</head>
<body>
    <input type="button" value="click me" onclick="on_click_d()">
    
</body>
</html>

RESULT

the onerror method

NEXT TUTORIAL: JAVASCRIPT FORM VALIDATION

Leave a Reply

Your email address will not be published. Required fields are marked *