Error Handling in JavaScript: try, catch, finally

While writing a Javascript code, no matter how carefully you have written the code but once the user input a invalid data and the API fails, the application might crash at runtime due to some edge case or unexpected behaviour.

That's why the error handling is important skills for every Javascript developer. Good error handling makes applications more stable, easier to debug, and much more user-friendly.

In this article we will understand how error works in Javascript and learn more about how to tackle those scenarios using try, catch and finally.

What Are Errors in JavaScript?

Errors are problems that occur while the code is running. These problems can stop the normal execution of the program.

For example:

console.log(userName);

// ReferenceError: userName is not defined

Here, JavaScript throws an error because of the variable does not exist.

Another example:

const user = null;

console.log(user.name);

// TypeError: Cannot read properties of null

These are called runtime errors because they happen while the program is running.

Common Types of JavaScript Errors

1. ReferenceError
   Occurs when a variable does not exist.

   console.log(age);
   

2. TypeError
   Occurs when a value is used incorrectly.

   const num = 10;
   
   num.toUpperCase();
   

   Numbers do not have toUpperCase().

3. SyntaxError
   Occurs when JavaScript syntax is invalid.

   if(true {
       console.log("Hello");
   }
   

   Missing closing bracket.

Why Error Handling Matters

Imagine a shopping website where a single error can crash the entire website. Once crashed, the user will immediately leaves the website without purchasing.

To handle this, developer has to handle the error gracefully. This means:

• Showing a meaningful message

• Prevent app crashes

• If once part of website is crashed, should be handled that it will not crash entire website

• For developers, make debugging easier. Error handling also helps developers quickly identify problems during development.

Without proper error handling, debugging large applications becomes extremely difficult.

Using try and catch in JavaScript

JavaScript provides try and catch blocks to safely handle errors.

Basic syntax:

try { 
// risky code 
} catch(error) { 
// handle error 
}

The code inside try block will get execute first. If any error occurs, the execution of try block code immediately stops and the control move to the catch block.

The error object now contains the error that occurred in the try block.

Example:

try {
  const user = null;

  console.log(user.name);
} catch(error) {
  console.log("Something went wrong");
  console.log(error.message);
}

// Output
// Something went wrong
// Cannot read properties of null

Instead of crashing the application, the error is handled properly.

Understanding Graceful Failure

Graceful failure means handling errors in a controlled way.

• Displaying the message "App Crashed!" to the user is a bad practice.

• "Unable to load your profile. Please try again later." - Displaying a custom message like this is a good user experience. The user should never see the technical errors.

That’s why developers use error handling to improve user experience.

Understanding Error Object

Inside catch, JavaScript provides an error object.

Example:

try { 
    console.log(data);
} catch(error) {
    console.log(error);
}

The error object contains useful information like:

1. name

2. message

3. stack

Example:

console.log(error.name); 
// ReferenceError

console.log(error.message);
// data is not defined

This information is very useful while debugging applications.

The finally Block

Sometimes we want code to run in both cases, whether an error occurs or not.

That’s where finally is used.

Syntax:

try {
    // code 
} catch(error) {
    // handle error 
} finally {
    // always runs
} 

Example:

try {
    console.log("Trying...");
    riskyFunction(); 
} catch(error) {
    console.log("Error handled"); 
} finally {
    console.log("Execution completed");
}

// Trying...
// Error handled
// Execution completed

The finally block always runs.

Where is finally useful

The finally block is commonly used for:

1. Closing database connections

2. Stopping loaders/spinners

3. Cleaning resources

4. Resetting states

Example:

try {
    console.log("Fetching data...");
} catch(error) {
    console.log("API failed");
} finally {
    console.log("Hide loading spinner");
}

Even if the API fails, the loading spinner will still stop.

Throwing Custom Errors

JavaScript also allows developers to create their own errors using throw. This is useful when we want to validate data manually.

Example" of throw const age = -5;

try {
    if(age < 0) {
        throw new Error("Age cannot be negative"); 
    }
    console.log("Valid age"); 
} catch(error) {
    console.log(error.message); 
}

Output:

Age cannot be negative

Here, we manually created a custom error.

Why Custom Errors Are Useful

Custom errors help developers:

1. Validate user input

2. Create meaningful messages

3. Improve debugging

4. Control application flow

For example:

throw new Error("Password must contain 8 characters");

This message is much clearer than a generic error.

Conclusion

Errors are a normal part of programming. What matters is how we handle them.

JavaScript provides powerful tools like:

try catch finally throw

These features help developers build reliable and user-friendly applications.

Good error handling prevents crashes, improves debugging, and creates a smoother experience for users.

Instead of fearing errors, developers should learn how to handle them gracefully. That’s what makes applications truly production-ready.