Skip to main content

Command Palette

Search for a command to run...

Error Handling in JavaScript: Writing Safer and More Reliable Code

Updated
4 min readView as Markdown

Introduction

When writing JavaScript applications, errors are inevitable. Whether it's a user entering invalid input, a failed API request, or unexpected runtime behavior, errors can occur at any time. The way you handle these errors determines whether your application crashes or continues to run smoothly.

In this blog, we will explore how error handling works in JavaScript and how you can use it to build robust and user-friendly applications.


What Are Errors in JavaScript?

Errors in JavaScript are issues that disrupt the normal flow of program execution. These typically occur during runtime and can stop your application if not handled properly.

Common Types of Errors:

  • Syntax Errors – Mistakes in code structure (e.g., missing brackets)

  • Reference Errors – Using variables that are not defined

  • Type Errors – Performing operations on incompatible data types

Example of a Runtime Error:

let user = null;
console.log(user.name); // TypeError: Cannot read properties of null

In this example, the program crashes because we tried to access a property on null.


Using try and catch Blocks

JavaScript provides the try...catch statement to handle errors gracefully.

Syntax:

try {
  // Code that may throw an error
} catch (error) {
  // Code to handle the error
}

Example:

try {
  let data = JSON.parse('invalid json');
} catch (error) {
  console.log("Something went wrong:", error.message);
}

Here, instead of crashing, the error is caught and handled properly.


The finally Block

The finally block always executes, regardless of whether an error occurred or not. It is useful for cleanup tasks.

Syntax:

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

Example:

try {
  console.log("Trying something...");
} catch (error) {
  console.log("Error occurred");
} finally {
  console.log("Execution finished");
}

Even if no error occurs, the finally block will run.


Throwing Custom Errors

JavaScript allows you to create and throw your own errors using the throw keyword.

Example:

function withdraw(amount) {
  if (amount > 1000) {
    throw new Error("Withdrawal limit exceeded");
  }
  return "Withdrawal successful";
}

try {
  withdraw(2000);
} catch (error) {
  console.log(error.message);
}

Custom errors help you enforce rules and make debugging easier.


Why Error Handling Matters

Error handling is not just about preventing crashes—it improves the overall quality of your application.

Key Benefits:

  • Prevents application crashes

  • Improves user experience

  • Helps in debugging

  • Makes code more maintainable

  • Ensures graceful failure


Graceful Failure Explained

Graceful failure means your application continues to function even when something goes wrong.

Without Error Handling:

  • App crashes

  • Poor user experience

With Error Handling:

  • Show friendly error messages

  • Continue execution where possible

  • Log issues for debugging


Error Handling Flow (Conceptual)

Here’s how execution works:

  1. Code inside try runs

  2. If an error occurs → control moves to catch

  3. Whether error occurs or not → finally executes

Flow:

Try → (Error?) → Catch → Finally
          ↓
       No Error
          ↓
       Finally

Debugging Benefits

Error handling provides valuable debugging information:

  • Error messages

  • Stack traces

  • Exact location of failure

This makes it easier to identify and fix issues quickly.


Conclusion

Error handling is an essential part of writing reliable JavaScript code. By using try, catch, finally, and custom errors, you can ensure your application behaves predictably even in unexpected situations.

Instead of letting your app crash, handle errors smartly and provide a better experience for users.