Catching runtime errors in Javascript - Deep Dive

Overview - Catching runtime errors

What is it?

Catching runtime errors means handling problems that happen while a program is running, like trying to use a value that doesn't exist or dividing by zero. Instead of letting the program crash, you catch these errors and decide what to do next. This helps keep the program running smoothly and gives users helpful messages. In JavaScript, this is often done using try and catch blocks.

Why it matters

Without catching runtime errors, programs can stop suddenly and confuse users or cause data loss. Catching errors lets developers control what happens when things go wrong, making software more reliable and user-friendly. It also helps find and fix bugs faster by showing clear error information.

Where it fits

Before learning to catch runtime errors, you should understand basic JavaScript syntax, variables, and functions. After mastering error catching, you can learn about creating custom errors, asynchronous error handling with promises and async/await, and debugging tools.

Mental Model

Core Idea

Catching runtime errors is like setting up a safety net that catches problems during program execution so the program can recover or respond gracefully.

Think of it like...

Imagine walking on a tightrope with a safety net below. If you slip, the net catches you so you don’t fall hard. Similarly, try-catch blocks catch errors so the program doesn’t crash.

┌─────────────┐
│  try block  │
│  (code runs)│
└──────┬──────┘
       │
       ▼
┌─────────────┐
│  error?     │───No──▶ Continue normally
│  (runtime)  │
└──────┬──────┘
       │Yes
       ▼
┌─────────────┐
│ catch block │
│ (handle err)│
└─────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding runtime errors

Concept: Learn what runtime errors are and why they happen during program execution.

Runtime errors occur when the program tries to do something invalid while running, like accessing a missing variable or calling a function incorrectly. For example, trying to read a property of undefined causes a runtime error.

Result

The program stops and shows an error message if runtime errors are not handled.

Knowing what runtime errors are helps you realize why programs can suddenly stop and why handling them is important.

2

Foundation

Basic try-catch syntax in JavaScript

Concept: Introduce the try-catch block to catch errors and prevent crashes.

Use try { /* code */ } catch (error) { /* handle error */ } to run code safely. If an error happens inside try, catch runs with the error info. Example: try { let result = 10 / 0; console.log(result); } catch (e) { console.log('Error caught:', e.message); }

Result

The program prints the result or catches and logs the error without crashing.

Understanding try-catch lets you control what happens when errors occur instead of letting the program crash.

3

Intermediate

Using finally for cleanup

Concept: Learn the finally block that runs code after try and catch, no matter what.

finally { /* code */ } runs after try and catch blocks finish, whether an error happened or not. Use it to clean up resources like closing files or stopping timers. Example: try { console.log('Trying'); throw new Error('Oops'); } catch (e) { console.log('Caught:', e.message); } finally { console.log('Always runs'); }

Result

Output shows try message, catch message, then finally message every time.

Knowing finally helps ensure important cleanup code runs regardless of errors, improving program stability.

4

Intermediate

Accessing error details in catch

🤔Before reading on: Do you think the catch block receives the exact error object or just a message string? Commit to your answer.

Concept: Catch receives the full error object, which contains useful details like message and stack trace.

Inside catch(error), error is an object with properties like message (error description) and stack (where error happened). You can use these to log or display detailed info. Example: try { null.f(); } catch (error) { console.log('Message:', error.message); console.log('Stack:', error.stack); }

Result

The console shows the error message and stack trace, helping debug the problem.

Understanding that catch gets the full error object lets you provide better error reports and debugging info.

5

Intermediate

Throwing custom errors

🤔Before reading on: Can you throw any value as an error in JavaScript, or only Error objects? Commit to your answer.

Concept: You can throw any value, but using Error objects is best practice for consistency and useful info.

Use throw new Error('message') to create and throw custom errors. This helps identify and handle specific problems. Example: function checkAge(age) { if (age < 18) { throw new Error('Too young'); } return 'Allowed'; } try { console.log(checkAge(15)); } catch (e) { console.log('Error:', e.message); }

Result

The catch block prints 'Error: Too young' instead of crashing.

Knowing how to throw custom errors lets you signal specific problems clearly and handle them properly.

6

Advanced

Catching errors in asynchronous code

🤔Before reading on: Do you think try-catch works the same way with asynchronous functions using promises? Commit to your answer.

Concept: Try-catch only catches errors in synchronous code; for promises, use .catch() or async/await with try-catch.

Promises handle errors differently. Use promise.catch() or async functions with try-catch. Example with promises: fetch('url') .then(response => response.json()) .catch(error => console.log('Caught:', error)); Example with async/await: async function getData() { try { let res = await fetch('url'); let data = await res.json(); } catch (e) { console.log('Error:', e.message); } }

Result

Errors in asynchronous code are caught and handled without crashing the program.

Understanding asynchronous error handling prevents common bugs and crashes in modern JavaScript apps.

7

Expert

Error propagation and rethrowing

🤔Before reading on: If you catch an error but want it to be handled later, do you think you should rethrow it or just ignore it? Commit to your answer.

Concept: You can catch an error to log or modify it, then rethrow it to let higher-level code handle it too.

Inside catch, use throw error; to pass the error up the call stack. Example: function level1() { try { level2(); } catch (e) { console.log('Level1 caught:', e.message); } } function level2() { try { throw new Error('Problem'); } catch (e) { console.log('Level2 caught:', e.message); throw e; // rethrow } } level1();

Result

Output shows Level2 caught message, then Level1 caught message, demonstrating error propagation.

Knowing how to rethrow errors lets you add handling at multiple levels without losing error info.

Under the Hood

When JavaScript runs code inside a try block, it monitors for exceptions (runtime errors). If an error occurs, the engine immediately stops executing the try block and looks for the nearest catch block. The error object is passed to catch, which runs its code. After catch finishes, if a finally block exists, it runs next. This mechanism uses the call stack and exception handling internally to manage control flow during errors.

Why designed this way?

This design separates normal code from error handling, making programs cleaner and easier to read. It avoids cluttering code with checks everywhere. Early languages lacked structured error handling, leading to messy code and crashes. JavaScript adopted try-catch to provide a clear, flexible way to handle errors and keep programs running.

┌───────────────┐
│   try block   │
│ (normal code) │
└───────┬───────┘
        │
        ▼
  ┌─────────────┐
  │ Runtime Err │
  └──────┬──────┘
         │
         ▼
  ┌─────────────┐
  │  catch(err) │
  │ (handle err)│
  └──────┬──────┘
         │
         ▼
  ┌─────────────┐
  │  finally{}  │
  │ (always run)│
  └─────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does a catch block catch syntax errors in your code? Commit to yes or no before reading on.

Common Belief: Catch blocks catch all errors, including syntax errors.

Reality: Catch only handles runtime errors. Syntax errors happen before running and cause the program not to start.

Why it matters: Expecting catch to handle syntax errors leads to confusion when the program fails to run at all.

Quick: If you throw a string instead of an Error object, will catch still work the same? Commit to yes or no.

Common Belief: You must throw Error objects; throwing other types breaks catch.

Reality: You can throw any value, including strings or numbers, and catch will receive it, but Error objects provide better info.

Why it matters: Throwing non-Error values can make debugging harder because they lack stack traces and standard properties.

Quick: Does try-catch catch errors inside asynchronous callbacks automatically? Commit to yes or no.

Common Belief: Try-catch catches errors inside all code blocks, including asynchronous callbacks.

Reality: Try-catch only catches errors in synchronous code. Errors in async callbacks or promises must be handled differently.

Why it matters: Misunderstanding this causes uncaught errors and crashes in asynchronous JavaScript code.

Quick: If you catch an error but do not rethrow it, does the error stop propagating? Commit to yes or no.

Common Belief: Catching an error always stops it from going further.

Reality: If you want the error to propagate, you must explicitly rethrow it inside catch.

Why it matters: Not rethrowing when needed can hide errors and cause bugs to go unnoticed.

Expert Zone

1

Errors thrown inside a catch block itself can cause unhandled exceptions if not carefully managed.

2

Using error subclasses allows more precise error handling by type, improving code clarity and control flow.

3

Performance can be affected if try-catch blocks are used inside tight loops; modern engines optimize but it's best to avoid unnecessary try-catch.

When NOT to use

Avoid using try-catch for normal control flow or validation; use conditional checks instead. For asynchronous code, prefer promise.catch() or async/await with try-catch. In performance-critical code, minimize try-catch usage to reduce overhead.

Production Patterns

In production, errors are caught and logged with detailed context for debugging. Global error handlers catch uncaught exceptions to prevent crashes. Custom error classes differentiate error types. Asynchronous error handling uses async/await with try-catch for clean code. Finally blocks ensure resource cleanup like closing connections.

Connections

Exception handling in other languages

Catching runtime errors in JavaScript is similar to try-catch in languages like Java or Python.

Understanding JavaScript error catching helps grasp error handling patterns across many programming languages.

Fault tolerance in engineering

Both involve designing systems to continue working despite failures or errors.

Knowing how software catches errors connects to how engineers build machines that keep running safely when parts fail.

Crisis management in organizations

Catching runtime errors is like having plans to handle unexpected problems in a company.

Learning error handling in code parallels how organizations prepare for and respond to crises to minimize damage.

Common Pitfalls

#1 Ignoring errors by leaving catch blocks empty

Wrong approach:

try {
JSON.parse('bad json');
} catch (e) {
// nothing here
}

Correct approach:

try {
JSON.parse('bad json');
} catch (e) {
console.error('Parsing failed:', e.message);
}

Root cause:

Beginners may think catching errors means ignoring them, but silent failures hide problems and make debugging hard.

#2 Using try-catch for normal checks instead of error handling

Wrong approach:

try {
if (user.age < 18) throw 'Too young';
} catch (e) {
console.log(e);
}

Correct approach:

if (user.age < 18) {
console.log('Too young');
}

Root cause:

Misunderstanding that try-catch is for unexpected errors, not regular conditions, leads to confusing code.

#3 Not handling errors in asynchronous code properly

Wrong approach:

try {
setTimeout(() => {
throw new Error('Fail');
}, 1000);
} catch (e) {
console.log('Caught:', e);
}

Correct approach:

setTimeout(() => {
try {
throw new Error('Fail');
} catch (e) {
console.log('Caught:', e.message);
}
}, 1000);

Root cause:

Assuming try-catch works across async boundaries causes uncaught errors and crashes.

Key Takeaways

Catching runtime errors lets programs handle unexpected problems without crashing, improving reliability.

Try-catch blocks separate normal code from error handling, making programs clearer and easier to maintain.

The catch block receives a full error object with useful details for debugging and reporting.

Asynchronous code requires special error handling patterns like promise.catch() or async/await with try-catch.

Proper error handling includes logging, cleanup with finally, and sometimes rethrowing errors to propagate them.