Error Handling and Throwing Custom Errors in JavaScript

Writing robust and maintainable JavaScript means being prepared for things to go wrong. Unexpected situations, bugs, or invalid inputs can cause errors that if unhandled, may break your application. That’s why error handling is a fundamental skill for any JavaScript developer.

In this post, we’ll explore the basics of error handling in JavaScript, how to throw custom errors, and best practices to keep your code resilient.

What is Error Handling?

Error handling is the process of anticipating and responding to runtime errors gracefully, allowing your program to recover or fail intelligently without crashing outright.

JavaScript has built-in error objects like Error, TypeError, ReferenceError, and more, which represent different kinds of runtime problems. When an error occurs, it is "thrown" and if not caught, it stops the program execution.

The Try…Catch…Finally Statement

The primary mechanism to handle errors is the try...catch block:

js
try {
  // Code that might throw an error
  let result = riskyOperation();
  console.log(result);
} catch (error) {
  // Handle the error
  console.error('An error occurred:', error.message);
} finally {
  // Code that always runs (cleanup, logging, etc.)
  console.log('Execution finished');
}

• try runs the code that may throw an error.
• If an error is thrown, execution jumps to the catch block where you can respond.
• The finally block runs regardless of an error occurring or not, useful for cleanup tasks.

Throwing Your Own Errors: Custom Errors

Sometimes, built-in errors don’t fully describe the problem or you want to enforce specific validation rules. You can create and throw custom errors by extending the Error class.

Creating a Custom Error Class

js
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError'; // Custom error name
  }
}

function checkAge(age) {
  if (age < 18) {
    throw new ValidationError('Age must be at least 18');
  }
  return true;
}

try {
  checkAge(15);
} catch (error) {
  if (error instanceof ValidationError) {
    console.error('Validation failed:', error.message);
  } else {
    console.error('Unexpected error:', error);
  }
}

By naming and distinguishing your custom errors, you enable targeted error handling.

Error Handling with Asynchronous Code

Handling errors in asynchronous code differs slightly:

- For Promises, use .catch():

js
fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => console.error('Fetch failed:', error));

- For async/await, wrap in try...catch:

js
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Best Practices for Error Handling

• Use specific error types: Leverage built-in errors and create custom classes to clearly convey the problem.
• Don’t swallow errors silently: Always handle errors meaningfully or propagate them; avoid empty catch blocks.
• Centralize error logging: Consider logging errors to a server or monitoring system for diagnostics.
• Keep try blocks minimal: Only include code that might throw errors inside try to avoid catching unrelated exceptions.
• Clean up with finally: Use the finally block for resource release or actions that must run after try/catch.
• Handle async errors: Don’t forget error handling in promises and async/await to avoid unhandled promise rejections.

Final Thoughts

Proper error handling is key to building dependable JavaScript applications. Knowing how to catch errors, manage them responsibly, and create meaningful custom errors allows you to improve debugging, deliver better user experiences, and maintain code health.

Stay tuned for more insights as you continue your journey into the world of web development!

Check out theYouTubePlaylist for great JavaScript content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud