JavaScript Error Handling Examples

Introduction to JavaScript Error Handling

Error handling is a crucial aspect of programming that ensures your code can gracefully manage unexpected situations. In JavaScript, this is commonly achieved using try...catch statements, which allow developers to catch errors and execute fallback code without crashing the application. Here are three practical examples of JavaScript error handling to help you understand how to implement this functionality effectively.

Example 1: Basic Try-Catch for Synchronous Code

Context

This example demonstrates how to use a simple try...catch block to handle errors in synchronous code. It is particularly useful when working with functions that may throw exceptions.

function parseJSON(jsonString) {
    try {
        const result = JSON.parse(jsonString);
        console.log('Parsed JSON:', result);
    } catch (error) {
        console.error('Error parsing JSON:', error.message);
    }
}

parseJSON('{"name":"John"}'); // Valid JSON
parseJSON('{name:"John"}'); // Invalid JSON

Notes

• In this example, the first call to parseJSON passes valid JSON, while the second call triggers an error. The catch block handles the error gracefully and logs a message to the console.

Example 2: Asynchronous Error Handling with Promises

Context

This example illustrates how to handle errors in asynchronous code using Promises. It is common in scenarios where you are fetching data from an API.

function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (url === 'https://api.example.com/data') {
                resolve({ data: 'Sample data' });
            } else {
                reject(new Error('Invalid URL')); // Simulated error
            }
        }, 1000);
    });
}

fetchData('https://api.example.com/data')
    .then(response => {
        console.log('Data received:', response.data);
    })
    .catch(error => {
        console.error('Error fetching data:', error.message);
    });

fetchData('https://invalid-url.com') // This will trigger the catch
    .catch(error => {
        console.error('Error fetching data:', error.message);
    });

Notes

• The fetchData function simulates an API call that can either resolve with data or reject with an error. The catch method is used to handle any errors that occur during the fetching process.

Example 3: Using Error Class for Custom Errors

Context

In this example, we create a custom error class to provide more context about the errors that occur in our application. This is useful for larger applications where understanding the type and source of an error is critical.

class CustomError extends Error {
    constructor(message, errorCode) {
        super(message);
        this.name = this.constructor.name;
        this.errorCode = errorCode;
    }
}

function riskyOperation() {
    throw new CustomError('Something went wrong!', 1001);
}

try {
    riskyOperation();
} catch (error) {
    if (error instanceof CustomError) {
        console.error(`Custom Error: \({error.message} (Code: }\(error.errorCode})`);
    } else {
        console.error('General Error:', error.message);
    }
}

Notes

• This example defines a CustomError class that enhances the standard error object with additional properties. The riskyOperation function throws a custom error, which can be caught and handled differently based on its type. This approach provides better error handling capabilities in complex applications.