Error Handling in JavaScript

Errors are inevitable — a network call fails, a user enters invalid input, a value is unexpectedly null. JavaScript provides try/catch/finally for handling exceptions gracefully instead of letting them crash the whole program, along with the built-in Error object (and subclasses) for describing what went wrong.

Writing deliberate error handling — rather than just hoping errors don't happen — is what separates fragile scripts from resilient applications.

Why it matters

Errors will happen: bad input, failed requests, unexpected data. Code that does not handle them shows the user a blank or frozen page. Handling them well means catching what you can recover from, reporting the rest clearly, and never swallowing an error silently so that the problem becomes invisible.

try, catch, and finally

Code that might throw goes inside a try block. If an exception occurs, execution immediately jumps to the matching catch (error) { ... } block, skipping the rest of the try block. The optional finally block runs afterward no matter what happened — whether the try succeeded, an error was caught, or even if the catch block itself re-threw — making it the right place for cleanup like closing a connection or hiding a spinner.

Throwing Custom Error Objects

You can throw any value with throw, but convention (and good debugging) means throwing Error objects, which capture a message, a name, and a stack trace. For domain-specific failures, it's common to create custom error classes that extend Error, so calling code can distinguish error types (e.g. ValidationError vs NetworkError) using instanceof.

Error Boundaries as a Concept

An "error boundary" is a deliberate point in an application where errors are caught and handled gracefully instead of letting them propagate all the way up and crash the app or leave the UI in a broken state. In frameworks like React, this is a literal component type; conceptually, in any JavaScript app, it means wrapping risky operations (rendering, async calls, third-party code) in try/catch at strategic boundaries, logging or reporting the error, and showing a fallback rather than a blank or frozen screen.

Examples

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

function setAge(age) {
  if (age < 0) {
    throw new ValidationError('Age cannot be negative');
  }
  return age;
}

try {
  setAge(-5);
} catch (err) {
  if (err instanceof ValidationError) {
    console.error('Validation problem:', err.message);
  } else {
    console.error('Unexpected error:', err.message);
  }
} finally {
  console.log('Validation attempt complete.');
}

Validation problem: Age cannot be negative
Validation attempt complete.

async function withErrorBoundary(operation, fallbackValue) {
  try {
    return await operation();
  } catch (err) {
    console.error('Caught at boundary:', err.message);
    return fallbackValue; // app keeps running with a safe default
  }
}

async function loadSettings() {
  throw new Error('Settings service unreachable');
}

withErrorBoundary(loadSettings, { theme: 'default' }).then((settings) =>
  console.log('Using settings:', settings)
);

Caught at boundary: Settings service unreachable
Using settings: { theme: 'default' }

Exercise

Define a ValidationError class that extends Error and sets its name. Write parseAge, which converts text to a number and throws a ValidationError with the message age must be a number when the text is not numeric. The code below catches the error and always prints done at the end.

Expected output: 25, ValidationError: age must be a number, done (one per line)

// TODO: class ValidationError extends Error, with name "ValidationError"

function parseAge(text) {
  // TODO: return the number, or throw a ValidationError if it is not a number
}

try {
  console.log(parseAge("25"));
  console.log(parseAge("abc"));
} catch (error) {
  console.log(error.name + ": " + error.message);
} finally {
  console.log("done");
}

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

function parseAge(text) {
  const age = Number(text);
  if (Number.isNaN(age)) {
    throw new ValidationError("age must be a number");
  }
  return age;
}

try {
  console.log(parseAge("25"));
  console.log(parseAge("abc"));
} catch (error) {
  console.log(error.name + ": " + error.message);
} finally {
  console.log("done");
}

Quick quiz

Interview questions