JavaScript Error Handling

Step 1: What are Errors?

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:

TypeError

Occurs when a value is not the expected type.

null.toString();       // TypeError: Cannot read properties of null
(42).toUpperCase();    // TypeError: not a function

ReferenceError

Occurs when referencing a variable that doesn't exist.

console.log(myVar);   // ReferenceError: myVar is not defined
undeclaredFn();        // ReferenceError: undeclaredFn is not defined

SyntaxError

Occurs when code has invalid syntax (caught at parse time, or via eval/JSON.parse).

JSON.parse("{bad}");   // SyntaxError: Unexpected token b
eval("if(");           // SyntaxError: Unexpected end of input

RangeError

Occurs when a value is outside its allowed range.

new Array(-1);         // RangeError: Invalid array length
(1.5).toFixed(200);    // RangeError: toFixed() digits argument

URIError

Occurs when URI encoding/decoding functions receive invalid input.

decodeURIComponent('%');  // URIError: URI malformed

Key Terms

throw Manually trigger an error: throw new Error("message") catch Intercept a thrown error and handle it gracefully stack trace The chain of function calls that led to the error error.message Human-readable description of what went wrong error.name The type of error (e.g., "TypeError", "RangeError")

Step 2: try / catch / finally

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.

Operation:

Remove try/catch (see uncaught error)

Code Being Executed

Output

                    // Select an operation and click "Run"
                

Step 3: Error Types in Action

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

Click a button above to trigger an error and see its details here.

Step 4: Custom Errors

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.

Build Your ValidationError

Error Name

Field Name

Validation Rule

Test Value

Generated Class Code

Step 5: Defensive Programming

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:

Active Patterns

Guard Clauses

Return early if arguments are invalid: if (!user) return null;

Default Values

Provide fallbacks: function greet(name = "Guest")

Optional Chaining (?.)

Safely access nested properties: user?.address?.city

Nullish Coalescing (??)

Fallback only for null/undefined: value ?? "default"

Input Validation

Check types explicitly: if (typeof x !== "number") throw ...

Safety Score:

5/5

Test with Bad Inputs

Function Code

Output

                        // Click a bad input button to test
                    

Step 6: Knowledge Check

1. What type of error does JSON.parse("not json") throw?

TypeError SyntaxError ReferenceError

2. When does the finally block execute?

Only when an error is caught Only when no error occurs Always, whether an error occurs or not

3. What is the correct way to create a custom error class?

class MyError extends Error { constructor(msg) { super(msg); this.name = "MyError"; } } function MyError(msg) { return new Error(msg); } const MyError = Error.create("MyError")