Error Handling in Javascript

Error handling is a crucial part of any programming language, and JavaScript is no exception. Errors can happen at any time in your code due to incorrect input, unforeseen issues, or bugs. A well-structured error-handling strategy makes your application more robust and user-friendly.

This guide breaks down the essentials of handling errors in JavaScript, using examples to make concepts easy to understand.

Types of Errors in JavaScript

JavaScript errors can broadly be classified into:

1. Syntax Errors: Mistakes in code syntax.
   Example:

   console.log("Hello World; // Missing closing quote

2. Runtime Errors: Errors that occur while the program is running.
   Example:

   console.log(nonExistentVariable); // Variable is not defined

3. Logical Errors: Errors in the logic of the program.
   Example:

   const total = 100 - 20 + 10; // Wrong logic for intended operation

Try-Catch Block

The try-catch block is the foundation of error handling in JavaScript. It allows you to handle runtime errors gracefully.

Basic Syntax

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

Example

try {
    const result = 10 / 0;
    console.log(result);
    console.log(undefinedVariable); // Throws an error
} catch (error) {
    console.log("An error occurred:", error.message);
}

Throwing Custom Errors

You can use the throw keyword to create custom errors in JavaScript.

Example

function divide(a, b) {
    if (b === 0) {
        throw new Error("Cannot divide by zero");
    }
    return a / b;
}
 
try {
    console.log(divide(10, 0));
} catch (error) {
    console.log(error.message);
}

Finally Block

The finally block is executed regardless of whether an error occurred or not. It’s useful for cleanup operations.

Example

try {
    console.log("Trying something risky...");
    throw new Error("Oops, something went wrong!");
} catch (error) {
    console.log("Caught an error:", error.message);
} finally {
    console.log("Finally block executed!");
}

Using try-catch with Async/Await

Handling errors in asynchronous code can be tricky, but combining try-catch with async/await makes it more manageable.

Example

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.log("Failed to fetch data:", error.message);
    }
}
 
fetchData();

Handling Promises with .catch()

For promises, the .catch() method captures errors.

Example

fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.log("Error fetching data:", error.message));

Debugging Tips

1. Use Console Statements: console.log() or console.error() can help you debug issues.
2. Enable Strict Mode: Use "use strict"; to catch common errors.
3. Test Edge Cases: Always test your code with unexpected inputs.
4. Error Logging: Use external services or log errors for future analysis.

Practice Code Snippet for You