Javascript Error Handling

try / catch / finally / throw

Javascript error handling can be helpful to help debug code. It’s a great tool to pickup and be consistent with. This may not be the most fun post, but arguably one of the most important to know.

I’m going to walk through 2 separate examples for how to use JS errors.

TRY / CATCH / FINALLY

First, lets talk about the syntax. I like to think of the set up like an if / else if / else statement.

try {

// Block of code to test
} catch(e) {

// Block of code to handle errors
// If there was an error they are put into an object
// In the case above: 'e' is an object that has multiple
// properties we can pull values off and use.
} finally { // This will always run regardless if there is an error or not}
  • try: Where we run code and if there’s an error. Then move to catch
  • catch(e): When an error occurs it’s called an ‘exception.’ This argument ‘e’ can be named anything.
  • *e .error — this provides us w/ the result of the error
  • *e.name — type of error
  • *e.message — explanation of message
  • *e.stack — full stack trace back to error
  • *e.filename — name of the file the error is in
  • *e.linenumber — line the error occurs on
  • finally: This will always run no matter if there is or isn’t an error.

In the following example we’ll purposely not declare my name which should cause an exception.

// We do not declare the variable rob anywhere below. 
// This will cause our error.
try { document.write('My name is: ' + rob + '<br><br>');
document.write('We should not see this and skip directly to the
catch part of the code <br><br>');
} catch(exception) { document.write('The result of this is: <b>'+
exception.error + '</b><br><br>');

document.write('The type of error is a(n): <b>' +
exception.name + '</b><br><br>');

document.write('Our message is: <b>' +
exception.message + '</b><br><br>');

document.write('Peep the end, we can find the error
the line is on: <br><b>' + exception.stack + '</b><br><br>');
} finally { document.write('This line will always run regardless of code'); }
Image for post
Image for post

THROW

In this example we’ll work with the throw. This allows us to create custom messages based on a specific error.

var a = 5;
var b = 6;
try { if ((a + b) > 10) {
throw new Error('Sorry, your answer is over 10,
please try again.');
}
document.write('We should not see this and skip directly
to the catch part of the code <br><br>');
} catch(exception) { document.write('Message: <b>' + exception.message +
"</b><br><br>");
document.write('Name: <b>' + exception.name + "</b><br><br>");
// This case will always return 'error'
} finally { document.write('This line will always run regardless of code');}

This will return the below to the website:

Image for post
Image for post

JS error handing in a nutshell, not too bad!

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store