JavaScript Error Handling

When JavaScript encounters a problem it cannot recover from, it creates an Error object and throws it. Errors halt execution unless they are caught.

There are two broad categories:

• Syntax Errors — detected at parse time before any code runs (e.g., missing brackets)
• Runtime Errors — occur while the program is executing (e.g., calling an undefined function)

JavaScript has several built-in error types:

The try/catch statement lets you attempt risky code and handle any errors that occur. The optional finally block always runs, whether an error occurred or not.

try {
  // risky code here
} catch (error) {
  // handle the error
  console.log(error.message);
} finally {
  // always runs (cleanup, etc.)
}

Select an operation below and click Run to see it caught. Toggle the checkbox to see what happens without try/catch.

Click each button to trigger a specific error type. Watch the error name, message, and stack trace appear below, color-coded by type.

You can create custom error classes by extending the built-in Error class. This is useful for domain-specific validation, API error handling, and structured error reporting.

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

Build your own ValidationError below. Define the field name, a validation rule, and then test it with input values.

Defensive programming means writing code that anticipates and gracefully handles unexpected inputs. Instead of waiting for errors, you prevent them.

Toggle each pattern on or off, then feed the function bad inputs to see which patterns prevent crashes: