Misc

Error handling is an essential part of writing robust JavaScript code.

It allows you to gracefully manage unexpected issues, such as invalid input, failed network requests, or runtime errors, and helps prevent your program from crashing.

JavaScript provides various mechanisms for error handling, including try…catch blocks, throw statements, and custom error objects.

This tutorial will cover the different methods and techniques for handling errors in JavaScript, including practical code examples.

1. The try…catch Statement

The try…catch statement is the primary mechanism for handling exceptions in JavaScript. It allows you to catch runtime errors in the try block and handle them in the catch block.

Syntax

try {
  // Code that may throw an error
} catch (error) {
  // Code to handle the error
} finally {
  // Code that will always run, regardless of whether an error occurred
}

1.1 Basic try…catch Example

Example 1: Using try…catch

try {
  // Intentionally causing an error
  const result = 10 / x; // 'x' is not defined
} catch (error) {
  console.error('An error occurred:', error.message);
}

Output:

An error occurred: x is not defined

Explanation: The try block contains code that may throw an error. When the error (x is not defined) occurs, the catch block is executed, which logs the error message.

1.2 Using finally Block

The finally block contains code that will execute whether an error occurred or not. It's useful for cleanup operations.

Example 2: Using finally Block

try {
  const data = JSON.parse('{"name": "Alice"}');
  console.log(data.name);
} catch (error) {
  console.error('Invalid JSON:', error.message);
} finally {
  console.log('Finished parsing JSON.');
}

Output:

Alice
Finished parsing JSON.

Explanation: Regardless of whether an error is thrown, the finally block executes, ensuring that the cleanup code (e.g., closing connections, logging) runs.

2. Throwing Errors with throw

You can throw custom errors using the throw statement. This is useful when you want to handle specific conditions that are not necessarily runtime errors.

Example 3: Throwing a Custom Error

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:', error.message);
}

Output:

Error: Division by zero is not allowed.

Explanation: The throw statement creates a custom error with a message. When the condition (b === 0) is met, the error is thrown and caught in the catch block.

3. Custom Error Objects

JavaScript allows you to create custom error objects by extending the built-in Error class. This is helpful for defining more specific error types in your application.

Example 4: Creating a Custom Error Class

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

function validateAge(age) {
  if (age < 0) {
    throw new ValidationError('Age cannot be negative.');
  }
  return 'Age is valid.';
}

try {
  console.log(validateAge(-5));
} catch (error) {
  if (error instanceof ValidationError) {
    console.error('Validation Error:', error.message);
  } else {
    console.error('Unknown Error:', error.message);
  }
}

Output:

Validation Error: Age cannot be negative.

Explanation: A custom error class (ValidationError) is created by extending the built-in Error class. The custom error is thrown in the validateAge function and caught in the catch block, where it's identified using instanceof.

4. Catching Specific Errors

You can use conditional statements inside the catch block to handle different types of errors separately.

Example 5: Catching Specific Errors

function processData(data) {
  try {
    if (typeof data !== 'string') {
      throw new TypeError('Data must be a string.');
    }
    const result = JSON.parse(data);
    console.log(result);
  } catch (error) {
    if (error instanceof SyntaxError) {
      console.error('Invalid JSON format:', error.message);
    } else if (error instanceof TypeError) {
      console.error('Type Error:', error.message);
    } else {
      console.error('Unknown Error:', error.message);
    }
  }
}

processData(123); // Throws a TypeError
processData('{"name": "Alice"}'); // Successfully parses the JSON
processData('Invalid JSON'); // Throws a SyntaxError

Output:

Type Error: Data must be a string.
{name: "Alice"}
Invalid JSON format: Unexpected token I in JSON at position 0

Explanation: The catch block uses instanceof to handle different types of errors separately, ensuring appropriate error messages are logged.

5. Re-throwing Errors

You can re-throw an error inside a catch block if you want to pass it to a higher-level error handler.

Example 6: Re-throwing an Error

function parseJSON(data) {
  try {
    return JSON.parse(data);
  } catch (error) {
    console.error('Parsing error:', error.message);
    throw error; // Re-throws the error
  }
}

try {
  parseJSON('Invalid JSON');
} catch (error) {
  console.error('Caught re-thrown error:', error.message);
}

Output:

Parsing error: Unexpected token I in JSON at position 0
Caught re-thrown error: Unexpected token I in JSON at position 0

Explanation: The error is first caught and logged in the parseJSON function, then re-thrown to be caught again in the outer try…catch block.

6. Using try…catch with Asynchronous Code

While try…catch works for synchronous code, handling errors in asynchronous code (e.g., setTimeout, promises) requires a different approach.

Example 7: Error Handling with Promises using catch()

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Failed to fetch data.'));
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Error:', error.message);
  });

Output:

Error: Failed to fetch data.

Explanation: The catch() method is used to handle errors from the promise returned by fetchData.

Example 8: Error Handling in Asynchronous Functions with async/await and try…catch

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Async Error:', error.message);
  }
}

getData();

Output:

Async Error: Failed to fetch data.

Explanation: When using async/await, you can wrap the asynchronous code in a try…catch block to handle errors.

7. Best Practices for Error Handling

Always Use try…catch for Risky Code: Wrap any code that might throw errors in a try…catch block to prevent unexpected crashes.
Throw Meaningful Errors: Use custom error messages to make it clear what went wrong.
Catch Specific Errors: Use instanceof in the catch block to handle different types of errors separately.
Use finally for Cleanup: Utilize the finally block to execute cleanup code, like closing files or network connections, regardless of success or failure.
Handle Errors in Asynchronous Code: Use .catch() for promises and try…catch inside async functions to handle errors effectively.

Conclusion

JavaScript's error handling mechanisms, including try…catch, throw, and custom error objects, provide a powerful way to handle and manage exceptions in your code.

By incorporating robust error handling practices, you can write code that is more reliable, maintainable, and user-friendly.

Experiment with the examples in this tutorial to get a solid understanding of JavaScript error handling and implement it effectively in your projects!