🪤 Try/Catch Blocks and Error Objects

The Safety Net

By default, an uncaught error in JavaScript stops the current call stack dead. In the browser it dumps a red message to the console and abandons whatever the user was doing; in Node.js it can crash the entire process. A try/catch block is how you intercept that error, decide what to do, and keep the program alive.

💡 A useful analogy: Error handling is the safety net under a trapeze act. The performer is skilled and rarely falls — the net isn't there because you expect failure, it's there because failure must be anticipated. Good code plans for the fall.

Notice the shape: the catch block runs only on failure, but the finally block runs every time — success or failure. That guarantee is what makes finally so useful for cleanup.

Anatomy of Try/Catch/Finally

The statement has three parts. Only try plus one of catch/finally is required, but you'll usually see all three together.

try {
  // 1. TRY — code that might throw
  const user = JSON.parse(rawInput);
  render(user);
} catch (error) {
  // 2. CATCH — runs only if the try block throws
  console.error('Could not load user:', error.message);
  showFallbackUI();
} finally {
  // 3. FINALLY — always runs, error or not
  hideSpinner();
}

Since ES2019 the binding is even optional — if you don't need the error object, you can write catch {}:

function isValidJson(text) {
  try {
    JSON.parse(text);
    return true;
  } catch {          // no parameter needed
    return false;
  }
}

Working With the Error Object

Whatever gets thrown lands in the catch parameter. When it's a proper Error (as it should be), it carries the three properties you met in the previous lesson.

try {
  throw new Error('Something bad happened');
} catch (error) {
  console.log(error.name);    // "Error"
  console.log(error.message); // "Something bad happened"
  console.log(error.stack);   // multi-line trace of how we got here
}

Because every built-in error is a subclass of Error, you can branch on the exact type with instanceof and respond differently to each:

try {
  riskyOperation();
} catch (error) {
  if (error instanceof TypeError) {
    handleTypeError(error);
  } else if (error instanceof RangeError) {
    handleRangeError(error);
  } else {
    // Unknown error — don't pretend to handle it
    console.error('Unexpected:', error);
    throw error; // re-throw so a higher layer can decide
  }
}

Throwing and Re-throwing

throw is how you raise an error deliberately — usually to reject invalid input early ("fail fast"). Combined with a custom error class, it makes your intent unmistakable.

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

function validateForm(form) {
  if (!form.name)        throw new ValidationError('Name is required', 'name');
  if (!form.email?.includes('@')) throw new ValidationError('Valid email required', 'email');
  if (form.password.length < 8)   throw new ValidationError('Password too short', 'password');
  return true;
}

try {
  validateForm({ name: 'Ray', email: 'ray@x.com', password: '123' });
} catch (error) {
  if (error instanceof ValidationError) {
    highlightField(error.field);           // we know exactly which field
    showMessage(error.message);
  } else {
    throw error;                           // anything else is not ours
  }
}

async function fetchUser(id) {
  try {
    return await api.get(`/users/${id}`);
  } catch (error) {
    error.userId = id;              // enrich with context
    error.context = 'fetchUser';
    throw error;                    // let the caller handle it
  }
}

Handling Async Errors

This is where most beginners get burned. A try/catch only catches errors thrown synchronously inside it. A plain, un-awaited Promise that rejects will slip right past the block. The fix is async/await, which lets you use ordinary try/catch around asynchronous code.

// ✅ async/await — reads top-to-bottom, catches rejections too
async function loadProfile(id) {
  showSpinner();
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`); // fetch does NOT throw on 404/500
    return await res.json();
  } catch (error) {
    console.error('Profile load failed:', error);
    showMessage('Could not load your profile. Please try again.');
    return null;
  } finally {
    hideSpinner();               // runs whether we succeeded or failed
  }
}

If you're using raw Promises instead of await, attach a .catch() to the chain — a try/catch around the chain won't work:

fetch('/api/profile')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(displayProfile)
  .catch(error => {                // catches rejections from anywhere above
    console.error('Failed:', error);
    showErrorMessage();
  })
  .finally(hideSpinner);

Battle-tested Patterns

Three patterns cover the vast majority of real error-handling needs.

1. Fallback values

When a failure just means "use a sensible default," catch it and return the default instead of crashing.

function getConfig(key) {
  try {
    const cfg = JSON.parse(localStorage.getItem('appConfig') || '{}');
    return cfg[key] ?? DEFAULTS[key];
  } catch (error) {
    console.warn('Config unreadable, using defaults:', error.message);
    return DEFAULTS[key];
  }
}

2. Retry with exponential backoff

Network calls fail transiently. Retrying a few times — waiting a little longer between attempts — recovers from blips without bothering the user. This is a great use of a while loop that keeps trying until it succeeds or exhausts its attempts.

async function fetchWithRetry(url, maxRetries = 3) {
  let attempt = 0;
  while (attempt < maxRetries) {
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return await res.json();          // success — leave the loop
    } catch (error) {
      attempt++;
      if (attempt >= maxRetries) throw error; // out of chances — give up
      const wait = 1000 * 2 ** (attempt - 1); // 1s, 2s, 4s...
      console.warn(`Attempt ${attempt} failed, retrying in ${wait}ms`);
      await new Promise(r => setTimeout(r, wait));
    }
  }
}

3. Guaranteed cleanup with finally

Any resource you open — a spinner, a database connection, a file handle — should be released in finally so it happens even when the body throws or returns early.

async function withConnection(work) {
  const conn = await pool.connect();
  try {
    return await work(conn);
  } finally {
    conn.release();   // always returned to the pool
  }
}

Best Practices: Do & Don't

Hands-on Exercise

function calculateAverage(numbers) {
  const sum = numbers.reduce((acc, val) => acc + val, 0);
  return sum / numbers.length;
}

function calculateAverage(numbers) {
  if (!Array.isArray(numbers)) {
    throw new TypeError('Expected an array of numbers');
  }
  if (numbers.length === 0) {
    throw new RangeError('Cannot average an empty array');
  }
  if (!numbers.every(n => typeof n === 'number' && !Number.isNaN(n))) {
    throw new TypeError('Every element must be a valid number');
  }
  const sum = numbers.reduce((acc, val) => acc + val, 0);
  return sum / numbers.length;
}

// Caller stays clean:
try {
  console.log(calculateAverage([4, 8, 15, 16, 23, 42]));
} catch (error) {
  console.error(`${error.name}: ${error.message}`);
}

async function loadData(url, maxRetries = 3) {
  showSpinner();
  try {
    let attempt = 0;
    while (attempt < maxRetries) {
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return await res.json();
      } catch (error) {
        attempt++;
        if (attempt >= maxRetries) {
          console.warn('All attempts failed:', error.message);
          return null;
        }
        await new Promise(r => setTimeout(r, 1000 * 2 ** (attempt - 1)));
      }
    }
  } finally {
    hideSpinner();
  }
}

Summary & Quiz

📚 Further Reading

• MDN — try...catch statement
• JavaScript.info — Error handling, "try...catch"
• MDN — Using the Fetch API (and why to check ok)

🚀 What's Next?

You can now catch and recover from errors — but what about the bugs that don't throw at all? Next we'll pick up the debugging tools and strategies that let you hunt down the silent, logical bugs that try/catch can't reach.