What is Error Handling?

Error handling in JavaScript is a crucial aspect of building robust and reliable applications. It allows developers to handle runtime errors gracefully and provide feedback to users or recover from unexpected issues.

The try...catch Statement in Synchronous and Asynchronous Code

The try...catch statement is primarily used to handle errors in synchronous code. For asynchronous operations, such as working with promises or callbacks, you need to combine it with async/await or handle the error explicitly within the asynchronous context. Errors inside a setTimeout or a promise, for example, will not be caught directly by try...catch.

Here is an example illustrating how try...catch works with synchronous code and why it doesn’t catch errors in asynchronous callbacks like setTimeout.

try {
  // Synchronous code
  console.log("Starting the operation...");
  console.log(age)
} catch (error) {
  console.error("Caught in try...catch:", error.message);
  // Caught in try...catch: age is not defined
}

// Asynchronous example with setTimeout
try {
  setTimeout(() => {
    // This error is not caught by the outer try...catch
    console.log(age)
  }, 1000);
} catch (error) {
  console.error("This will NOT be executed:", error.message);
}

In this example:

• In synchronous above example error will throw in try block is caught successfully by the catch block i.e., age is not defined.
• The error inside the setTimeout function is not caught by the outer try...catch, because the setTimeout callback runs asynchronously, outside the scope of the try block.

Handling Errors Explicitly in Asynchronous Context

When working with asynchronous code, such as setTimeout, errors need to be handled within the asynchronous context itself because the code inside setTimeout executes outside the scope of the surrounding try...catch.

To handle errors explicitly within the asynchronous context, you can wrap the logic inside a try...catch block directly in the callback function.

// Handling errors explicitly in setTimeout
setTimeout(() => {
  try {
    // Code that may throw an error
    console.log(age)
  } catch (error) {
    // Handle the error explicitly within the callback
    console.error("Caught inside setTimeout:", error.message);
  }
}, 1000);

In this example, the error thrown inside the setTimeout callback is explicitly caught and handled within the callback using a try...catch block. This ensures the error is properly managed even though the callback is asynchronous.

Handling with async-await

To handle errors in asynchronous code, you need to explicitly catch them within the callback or use async/await with try...catch. Here’s an updated example that handles asynchronous errors properly:

// Handling errors in asynchronous code with try...catch
const asyncOperation = async () => {
  try {
    console.log("Starting async operation...");
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error("An error occurred in async code!"));
      }, 1000);
    });
  } catch (error) {
    console.error("Caught in async try...catch:", error.message);
  }
};

asyncOperation();

In this example:

• The asynchronous operation is wrapped in an async function.
• Errors are properly caught using try...catch because the await keyword pauses the function execution, allowing the catch block to handle the error.

Remember, error handling for asynchronous code requires careful consideration. Combining try...catch with async/await is an effective strategy to manage asynchronous errors and maintain code readability.

Custom Errors

You can use the throw statement to create and throw custom errors. This is useful when you want to enforce specific conditions in your code.

function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero is not allowed.");
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.error(error.message);
}

The finally Block

The finally block is optional and runs regardless of whether an error occurred or not. It is often used for cleanup tasks.

try {
  console.log("Executing code");
} catch (error) {
  console.error("Error:", error.message);
} finally {
  console.log("Cleanup code");
}

Best Practices for Error Handling

• Always provide meaningful error messages.
• Use specific error types to make debugging easier.
• Log errors for monitoring and debugging purposes.
• Avoid exposing sensitive error details to users.
• Handle both synchronous and asynchronous errors appropriately.

By understanding and implementing these error-handling techniques, you can build more resilient and user-friendly applications in JavaScript.