JavaScript Error Handling - throw, try, and catch

try statement tests a block of code for errors.

catch statement handles the error.

throw statement creates custom errors.

finally statement executes after try and catch statements, regardless of the result.

JavaScript Errors

When the JavaScript engine executes JavaScript code, various types of errors can occur.

These errors might be syntax errors, usually caused by programmer mistakes or typos.

They might be spelling errors or missing features in the language (possibly due to browser differences).

They could also be errors resulting from incorrect output from the server or user.

Of course, there are many other unpredictable factors.

JavaScript Throwing Errors

When an error occurs, when something goes wrong, the JavaScript engine typically stops and generates an error message.

The technical term for this is: JavaScript will throw an error.

JavaScript try and catch

try statement allows us to define a block of code to be tested for errors while it is being executed.

catch statement allows us to define a block of code to be executed if an error occurs in the try block.

JavaScript statements try and catch go together.

Syntax

try {
    ...    // throw an exception
} catch(e) {
    ...    // catch and handle the exception
} finally {
    ...    // final handling
}

Example

In the following example, we intentionally misspelled a word in the code block of try.

The catch block will catch the error from the try block and execute code to handle it.

Example

var txt=""; 
function message() 
{ 
    try { 
        adddlert("Welcome guest!"); 
    } catch(err) { 
        txt="There is an error on this page.\n\n"; 
        txt+="Error description: " + err.message + "\n\n"; 
        txt+="Click OK to continue.\n\n"; 
        alert(txt); 
    } 
}

finally Statement

Example

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10) throw "is too big";
    if(x < 5) throw "is too small";
  }
  catch(err) {
    message.innerHTML = "Error: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

Throw Statement

The throw statement allows us to create custom errors.

The correct technical term is: create or throw an exception.

When used with try and catch, throw allows you to control program flow and generate custom error messages.

Syntax

The exception can be a JavaScript string, number, boolean, or object.

Example

This example checks the value of an input variable. If the value is incorrect, an exception (error) is thrown. The catch block catches this error and displays a custom error message:

Example

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "is empty";
        if(isNaN(x)) throw "is not a number";
        x = Number(x);
        if(x < 5)    throw "is too small";
        if(x > 10)   throw "is too big";
    }
    catch(err) {
        message.innerHTML = "Error: " + err;
    }
}

Note that if the getElementById function fails, the above example will also throw an error.