Promise error handling in Javascript - Step-by-Step Execution

Concept Flow - Promise error handling

Create Promise

↓

Promise runs async task

↓

Task succeeds?

No→Reject with error

↓

Catch error handler

↓

Resolve with value

↓

Handle error

↓

Then handler runs

↓

End

This flow shows how a Promise runs an async task, then either resolves successfully or rejects with an error, which can be caught and handled.

Execution Sample

Javascript

const p = new Promise((resolve, reject) => {
  reject('Error happened');
});

p.then(value => console.log('Success:', value))
 .catch(err => console.log('Caught:', err));

This code creates a Promise that immediately rejects with an error, then catches and logs that error.

Execution Table

Step	Action	Promise State	Handler Called	Output
1	Create Promise	pending	none
2	Promise executor calls reject('Error happened')	rejected	none
3	Then handler skipped (promise rejected)	rejected	none
4	Catch handler called with error	rejected	catch	Caught: Error happened
5	End of promise chain	settled	none

💡 Promise is rejected, catch handler handles the error, chain ends.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
p (Promise)	pending	rejected	rejected	settled
error	undefined	'Error happened'	'Error happened'	'Error happened'

Key Moments - 2 Insights

Why does the then handler not run when the promise is rejected?

Because in the execution_table at step 3, the promise state is rejected, so the then handler is skipped and only the catch handler runs.

How does the catch handler receive the error?

At step 4 in the execution_table, the catch handler is called with the rejection reason 'Error happened' passed as the error argument.

Visual Quiz - 3 Questions

Look at the execution_table, what is the promise state after step 2?

A rejected

B resolved

C pending

D settled

💡 Hint

Check the 'Promise State' column at step 2 in the execution_table.

At which step does the catch handler run?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Handler Called' and 'Output' columns in the execution_table.

If the promise resolved instead of rejected, which handler would run?

A catch handler

B then handler

C both handlers

D no handler

💡 Hint

Refer to the concept_flow where success leads to then handler running.

Concept Snapshot

Promise error handling:
- Create a Promise with resolve and reject
- If async task fails, call reject(error)
- Use .catch() to handle errors
- .then() runs only on success
- Errors skip then and go to catch

Full Transcript

This visual trace shows how a JavaScript Promise handles errors. First, a Promise is created and starts pending. Then the executor calls reject with an error, changing the state to rejected. Because the Promise is rejected, the then handler is skipped and does not run. Instead, the catch handler runs and receives the error, logging it. Finally, the Promise chain ends. This shows that catch is used to handle errors from rejected Promises, while then only runs on success.

Practice

1. What is the main purpose of the .catch() method when working with JavaScript Promises?

easy

A. To create a new promise

B. To handle errors or rejected promises

C. To execute code after a promise resolves successfully

D. To cancel a running promise

Solution

1. Step 1: Understand the role of .catch() in Promises

   The .catch() method is designed to handle errors or rejected promises in asynchronous code.

2. Step 2: Differentiate from other methods

   .then() handles successful resolution, while .catch() specifically catches errors.

3. Final Answer:

   To handle errors or rejected promises -> Option B

4. Quick Check:

   .catch() handles errors [OK]

Hint: Remember: .catch() is for errors, .then() is for success [OK]

Common Mistakes:

• Confusing .catch() with .then()
• Thinking .catch() cancels promises
• Believing .catch() creates new promises

2. Which of the following is the correct syntax to catch errors from a promise named myPromise?

easy

A. myPromise.catch(error => console.log(error));

B. myPromise.then(error => console.log(error));

C. myPromise.error(error => console.log(error));

D. myPromise.handleError(error => console.log(error));

Solution

1. Step 1: Identify the correct method for error handling

   The correct method to catch errors from a promise is .catch().

2. Step 2: Check the syntax correctness

   The syntax myPromise.catch(error => console.log(error)); correctly attaches an error handler.

3. Final Answer:

   myPromise.catch(error => console.log(error)); -> Option A

4. Quick Check:

   Use .catch() for errors [OK]

Hint: Use .catch() after promise to handle errors [OK]

Common Mistakes:

• Using .then() to catch errors
• Using non-existent methods like .error()
• Incorrect arrow function syntax

3. What will be the output of the following code?

const p = new Promise((resolve, reject) => {
  reject('Failed');
});

p.then(result => console.log('Success:', result))
 .catch(error => console.log('Error:', error));

medium

A. Success: Failed

B. SyntaxError

C. No output

D. Error: Failed

Solution

1. Step 1: Analyze the promise rejection

   The promise immediately rejects with the message 'Failed'.

2. Step 2: Trace the .then() and .catch() handlers

   The .then() is skipped because the promise is rejected; .catch() runs and logs 'Error: Failed'.

3. Final Answer:

   Error: Failed -> Option D

4. Quick Check:

   Rejected promise triggers .catch() [OK]

Hint: Rejected promises skip .then() and go to .catch() [OK]

Common Mistakes:

• Expecting .then() to run on rejection
• Thinking no output occurs on rejection
• Confusing reject with resolve

4. Identify the error in this code snippet and choose the correct fix:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));

// What is wrong here?

medium

A. Should use .error() instead of .catch()

B. Missing return in first .then() to pass parsed JSON

C. No error, code is correct

D. fetch() does not return a promise

Solution

1. Step 1: Review the promise chain syntax

   The code correctly chains .then() to parse JSON and then log data.

2. Step 2: Confirm error handling

   The .catch() properly handles any errors from fetch or JSON parsing.

3. Final Answer:

   No error, code is correct -> Option C

4. Quick Check:

   Proper chaining with .catch() [OK]

Hint: fetch returns promise; .then() chaining is correct [OK]

Common Mistakes:

• Thinking .then() needs explicit return (arrow with braces)
• Using .error() instead of .catch()
• Believing fetch is not promise-based

5. You want to handle errors in a promise chain but also continue processing even if an error occurs. Which pattern correctly achieves this?

fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => {
    console.log('Error:', error);
    return {};
  })
  .then(data => console.log('Data:', data));

hard

A. This pattern catches errors and returns a default value to continue processing

B. This pattern stops execution after an error and does not continue

C. Errors are not caught because .catch() is after .then()

D. This pattern causes an infinite loop

Solution

1. Step 1: Understand the error handling flow

   The .catch() catches any errors from the fetch or JSON parsing.

2. Step 2: Analyze the return inside .catch()

   Returning an empty object {} allows the next .then() to receive a value and continue processing.

3. Final Answer:

   This pattern catches errors and returns a default value to continue processing -> Option A

4. Quick Check:

   Return in .catch() continues chain [OK]

Hint: Return a value in .catch() to keep promise chain going [OK]

Common Mistakes:

• Assuming .catch() stops the chain without return
• Not returning a value inside .catch()
• Thinking .catch() after .then() won't catch errors