Error Handling

Errors are inevitable in real applications — networks fail, users provide invalid input, APIs return unexpected data, and code has bugs. The difference between a professional application and a fragile one is how it handles errors. JavaScript provides try/catch/finally for synchronous error handling, the Error object hierarchy for structured errors, and patterns for propagating and handling errors in async code. In this lesson you will build a solid mental model for error handling that applies from simple scripts to production applications.

Error Handling Constructs #

Built-in Error Types #

Error Object Properties #

Basic Example #

// ── Basic try/catch/finally ───────────────────────────────────────────────
function divideNumbers(a, b) {
    try {
        if (typeof a !== 'number' || typeof b !== 'number') {
            throw new TypeError('Both arguments must be numbers');
        }
        if (b === 0) {
            throw new RangeError('Cannot divide by zero');
        }
        return a / b;
    } catch (err) {
        console.error(`[${err.name}] ${err.message}`);
        return null;
    } finally {
        console.log('divideNumbers() completed');  // always runs
    }
}

console.log(divideNumbers(10, 2));    //  5       + 'completed'
console.log(divideNumbers(10, 0));    // null     + '[RangeError]...' + 'completed'
console.log(divideNumbers('a', 2));   // null     + '[TypeError]...'  + 'completed'

// ── Custom Error classes ──────────────────────────────────────────────────
class ValidationError extends Error {
    constructor(field, message) {
        super(message);
        this.name      = 'ValidationError';
        this.field     = field;
        this.timestamp = new Date().toISOString();
    }
}

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

// ── instanceof to handle different error types ────────────────────────────
function processUserInput(data) {
    try {
        if (!data.email?.includes('@')) {
            throw new ValidationError('email', 'Must be a valid email address');
        }
        if (!data.age || data.age < 13) {
            throw new ValidationError('age', 'Must be 13 or older');
        }
        // Simulate network call
        if (data.forceError) {
            throw new NetworkError('Service unavailable', 503);
        }
        return { success: true, message: 'User processed successfully' };

    } catch (err) {
        if (err instanceof ValidationError) {
            // Validation errors are user's fault — show friendly message
            return { success: false, field: err.field, message: err.message };
        }
        if (err instanceof NetworkError) {
            // Network errors are transient — suggest retry
            return { success: false, message: `Server error ${err.statusCode} — please try again` };
        }
        // Unknown error — re-throw for outer error handler
        throw err;
    }
}

console.log(processUserInput({ email: 'alice@example.com', age: 25 }));
// { success: true, message: 'User processed successfully' }

console.log(processUserInput({ email: 'notanemail', age: 25 }));
// { success: false, field: 'email', message: 'Must be a valid email address' }

console.log(processUserInput({ email: 'b@b.com', age: 25, forceError: true }));
// { success: false, message: 'Server error 503 — please try again' }

// ── JSON.parse error handling ─────────────────────────────────────────────
function safeJsonParse(str, fallback = null) {
    try {
        return JSON.parse(str);
    } catch {
        return fallback;   // silently return fallback for invalid JSON
    }
}

console.log(safeJsonParse('{"name":"Bob"}'));   // { name: 'Bob' }
console.log(safeJsonParse('invalid json'));     // null
console.log(safeJsonParse('', []));            // []

How It Works #

Step 1 — throw Exits the Current Block Immediately #

When throw executes, JavaScript stops running the current function and unwinds the call stack — moving up through calling functions — until it finds a catch block. If no catch is found, the error becomes an unhandled exception. Anything after the throw in the same block is never reached.

Step 2 — catch Receives the Thrown Value #

Whatever value you pass to throw — an Error object, a string, a number — becomes the err parameter in catch (err). Because any value can be thrown, always check err instanceof Error before accessing err.message if you cannot guarantee what was thrown.

Step 3 — Custom Errors Enable instanceof Checks #

By extending Error, custom error classes get the full Error API (message, stack) plus your own properties (field, statusCode). The instanceof check in catch lets you handle each error type differently — show a form validation message for ValidationError, offer a retry for NetworkError, and re-throw anything unexpected.

Step 4 — Re-throwing Unknown Errors #

The pattern if (err instanceof KnownError) { handle } else { throw err; } is a best practice. Your catch block should only handle errors it knows about. Rethrowing unexpected errors lets an outer error handler or a global error listener deal with them — rather than silently swallowing bugs you did not anticipate.

Step 5 — finally for Guaranteed Cleanup #

Database connections, file handles, loading spinners, and network request cancellation tokens all need to be cleaned up whether the operation succeeded or failed. Putting cleanup in finally guarantees it runs — even if catch re-throws the error or try contains a return.

Real-World Example: API Client with Error Handling #

// api-client.js

class ApiError extends Error {
    constructor(message, status, body) {
        super(message);
        this.name   = 'ApiError';
        this.status = status;
        this.body   = body;
    }
}

async function apiFetch(url, options = {}) {
    let response;

    try {
        response = await fetch(url, {
            headers: { 'Content-Type': 'application/json', ...options.headers },
            ...options,
        });

        const body = await response.json().catch(() => ({}));

        if (!response.ok) {
            throw new ApiError(
                body.message ?? `Request failed with status ${response.status}`,
                response.status,
                body
            );
        }

        return body;

    } catch (err) {
        if (err instanceof ApiError) {
            // Known HTTP error — handle by status
            if (err.status === 401) {
                redirectToLogin();
                return null;
            }
            if (err.status === 429) {
                console.warn('Rate limited — retry after delay');
            }
            throw err;  // re-throw for caller to handle
        }

        // Network error (fetch itself failed — no internet, DNS failure)
        throw new NetworkError(`Network request failed: ${err.message}`, 0);

    } finally {
        // Could hide a loading spinner here
        // hideLoader();
    }
}

// Usage with async/await error handling
async function loadUserProfile(userId) {
    try {
        const user = await apiFetch(`/api/users/${userId}`);
        return user;
    } catch (err) {
        if (err instanceof ApiError && err.status === 404) {
            return null;  // user not found is not an error for the caller
        }
        throw err;  // everything else propagates up
    }
}

Common Mistakes #

Mistake 1 — Empty catch block silently swallows errors #

❌ Wrong — errors disappear with no trace:

try {
    riskyOperation();
} catch (err) {
    // nothing here — error is gone forever
}

✅ Correct — always at minimum log the error:

try {
    riskyOperation();
} catch (err) {
    console.error('riskyOperation failed:', err);
    // handle or rethrow
}

Mistake 2 — Throwing a string instead of an Error object #

❌ Wrong — string has no stack trace, no name, no useful debug info:

throw 'Something went wrong';
// catch (err) — err is just a string, no err.stack available

✅ Correct — throw an Error object for full debug information:

throw new Error('Something went wrong');
// catch (err) — err.message, err.stack, err.name all available

Mistake 3 — Wrapping entire function in try/catch unnecessarily #

❌ Wrong — catches errors from unrelated code too broadly:

try {
    validateInput(data);   // synchronous — can't throw async errors anyway
    processData(data);
    saveToDatabase(data);  // only THIS needs try/catch
    updateUI(data);
} catch (err) { }

✅ Correct — wrap only the operation that can fail:

validateInput(data);
processData(data);
try {
    await saveToDatabase(data);
} catch (err) {
    console.error('Database save failed:', err);
    throw err;
}
updateUI(data);

▶ Try It Yourself

Quick Reference #