Promise error handling in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Promise chain?

Consider the following JavaScript code. What will be printed to the console?

Javascript

Promise.resolve(5)
  .then(value => {
    console.log(value);
    return value * 2;
  })
  .then(value => {
    throw new Error('Oops');
  })
  .catch(error => {
    console.log('Error caught:', error.message);
    return 10;
  })
  .then(value => {
    console.log('Final value:', value);
  });

A Error caught: Oops\nFinal value: 10

B 5\nError caught: Oops\nFinal value: 10

C 5\nFinal value: 10

D 5\nError caught: Oops

💡 Hint

Remember that a catch block handles errors and the chain continues after catch.

The first then logs 5 and returns 10. The second then throws an error. The catch catches it and logs the error message, then returns 10. The final then logs 'Final value: 10'.

❓ Predict Output

intermediate

What happens if a Promise rejects without a catch?

What will be the output or error when running this code?

Javascript

Promise.reject('Failed')
  .then(() => {
    console.log('Success');
  });

A SyntaxError

B Success

C No output

D Uncaught (in promise) Failed

💡 Hint

Think about what happens when a rejection is not handled.

The Promise rejects but there is no catch to handle it, so the error is unhandled and logged as 'Uncaught (in promise) Failed'.

❓ Predict Output

advanced

What is the output of this async function with try/catch?

Analyze the following code and select the correct console output.

Javascript

async function test() {
  try {
    await Promise.reject('Error!');
  } catch (e) {
    console.log('Caught:', e);
  }
  console.log('Done');
}
test();

A Caught: Error!\nDone

B Done\nCaught: Error!

C Uncaught (in promise) Error!

D SyntaxError

💡 Hint

Remember that try/catch works with await inside async functions.

The await rejects, so control goes to catch which logs the error. Then the function continues and logs 'Done'.

❓ Predict Output

advanced

Which option correctly handles errors in this Promise chain?

Given this code, which option will print 'Error handled' when the Promise rejects?

Javascript

function getData() {
  return new Promise((resolve, reject) => {
    reject('Network error');
  });
}

getData()
  .then(data => console.log('Data:', data))
  // Error handling here
  ;

A .finally(() => console.log('Error handled'))

B .then(error => console.log('Error handled'))

C .catch(error => console.log('Error handled'))

D .then(() => {}, error => console.log('Error handled'))

💡 Hint

Which method catches rejected Promises?

The catch method handles rejected Promises. Option C looks similar but the second argument to then is less common and can cause confusion.

🧠 Conceptual

expert

What is the output of this complex Promise error handling?

What will be printed to the console when this code runs?

Javascript

Promise.resolve('Start')
  .then(value => {
    console.log(value);
    return Promise.reject('Fail');
  })
  .catch(error => {
    console.log('Caught:', error);
    return 'Recovered';
  })
  .then(value => {
    console.log(value);
    throw new Error('Crash');
  })
  .catch(error => {
    console.log('Final catch:', error.message);
  });

A Start\nCaught: Fail\nRecovered\nFinal catch: Crash

B Start\nCaught: Fail\nFinal catch: Crash

C Start\nRecovered\nFinal catch: Crash

D Start\nCaught: Fail\nRecovered

💡 Hint

Follow the chain carefully, noting where errors are caught and what is returned.

The first then logs 'Start' and rejects with 'Fail'. The first catch logs 'Caught: Fail' and returns 'Recovered'. The next then logs 'Recovered' and throws 'Crash'. The final catch logs 'Final catch: Crash'.

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