Node.js: Unhandled promise rejection - UnhandledPromiseRejectionWarning

Question

I have a Node.js app. This app has a button that starts a process. The steps in that process return promises. I'm trying to chain these promises together. For some reason, I'm receiving an UnhandledPromiseRejectionWarning. However, in my mind, I've set this up correctly. My code looks like this:

var myButton = document.getElementById('myButton');
if (myButton) {
  console.log('here');
  myButton.addEventListener('click', executeAction('0'));
}

function executeAction(input) {      
  let param1 = 'A';
  let promise = new Promise(function(resolve, reject) {
    try {
      executeStep1()
        .then(result => executeStep2(param1, result, input))
        .then(result => function(result) {
           console.log('All done');
           resolve(result);
        })
        .catch(err => reject(err))
      ;
    } catch (ex) {
      reject(ex);
    }
  });
  return promise;     
}

function executeStep1() {
  let promise = new Promise(function(resolve, reject) {        
    try {
      setTimeout(function() {
        resolve('[something]');
      }, 3000);
    } catch (ex) {
      reject();
    }
  });
  return promise;
}

function executeStep2(p1, p2, p3) {
  let promise = new Promise(function(resolve, reject) {        
    try {
      setTimeout(function() {
        console.log('step 2 has executed');
        resolve('awesome!')
      }, 3000);
    } catch (ex) {
      reject(ex);
    }  
  });
  return promise;
}

I've confirmed that the executeStep2 function runs to completion. I'm basing this in the fact that I can see "step 2 has executed" in the console window. However, to my surprise, I never see "All done" printed in the console window. Instead, I see the UnhandledPromiseRejectionWarning mentioned above. I don't understand two things about this result:

1. Why am I not seeing "All done" in the console? Shouldn't that function get executed after executeStep2 has resolved?
2. Where is the rejection coming from? I don't see anything that's rejecting this.

Thank you very much for your help!

Answer 1

executeStep1()
    .then(result => executeStep2(param1, result, input))
    .then(result => { // no function(result) here
       console.log('All done');
       resolve(result);
    })
    .catch(err => reject(err))
  ;

Answer 2

The error is generated from when you call the function(s) that uses promises:

myButton.addEventListener('click', executeAction('0'));

You need to catch rejections there also.

myButton.addEventListener('click', executeAction('0')
    .catch((error) => console.log('ERROR', error));

The rejections are caught inside the functions, but not in the outer scope because executeAction('0') returns a promise, or it would but you are using it as a non-async function, so its creating a promise and then returning a pending promise without waiting for it to be resolved. That looks like what's causing the rejection, and its also not handled for the above reason.

This will fix it:

function executeAction(input) {      
  let param1 = 'A';
  return new Promise(function(resolve, reject) {
    try {
      executeStep1()
        .then(result => executeStep2(param1, result, input))
        .then(result => function(result) {
           console.log('All done');
           resolve(result);
        })
        .catch(err => reject(err))
      ;
    } catch (ex) {
      reject(ex);
    }
  });
}

You should look into async/await. It can clean this code up significantly.

    async function getSomething() {
      try {
        // throw 'Test error detected.'
        return 'test'
      }
      catch (e) {
        throw e
      }
    }
    
    async function testing() {
      try {
        const sample = await getSomething()
        return sample
      } catch (e) {
        throw e
      }
    }
    
    testing()
      .then((data) => console.log(data))
      .catch((err) => console.log(err))

Run this above example, and then uncomment the throw. Use this pattern for maximum winning. Exceptions should be thrown to the surface level where the functions are called, displayed, used, rendered, etc. Functions should simply throw the error out.

This allows you to use error handling middleware, higher-order functions, listeners, logging, etc.