Uncaught (in promise)

Question

I know the problem is usual. I'm using es6 promises, and I have multiple layers. On runtime, when I don't catch a promise, I have Uncaught (in promise) in my console. But the fact is that I do catch it lower in my code.

Fast simplified example :

LoginApi.js

var loginDaoCall = loginDao.login(username, password);

loginDaoCall
    .then(function (res) {
        store.dispatch(loginSuccess());
        log.log("[loginApi.login] END");
    })
    .catch(function (err) {
        store.dispatch(loginFail());
        errorUtils.dispatchErrorWithTimeout(errorLogin);
        log.log(err);
    });

return loginDaoCall;

loginContainer.js

loginApi.login(user, password).then(() => {
    // Change here instead of in render so the user can go back to login page
    this.props.history.push(baseUrlRouter + "test");
}); // <- Error here cause I don't CATCH the promise, but I do catch it in my loginapi.js

I know that I could catch doing nothing, but eh. I could also do the history push thing in my API layer, but it is not its responsibility.

How can I avoid the error in my console? Is there a way? I'm even thinking about leaving it like this.

Pursy

is it an error or a warning? – Utu

It is showed as an error, but it is a warning as it doesn't break anything. I hate having warning/error in my console not coming from me. It is not justified as it's not bad practice imho – Pursy

maybe your own code? errorUtils.dispatchErrorWithTimeout(errorLogin); log.log(err); – Utu

No, thing is, it is an "unhandled rejection", if I catch the rejected promise in my loginContainer, I have no error message. It is an console.error coming from es6-promises. – Pursy

and theres no error thrown in your catch? what error is it? – Utu

Yes there is an error, but its specific to my code. My loginDao reject something (an object actually) when the authentication fails. edit :Uncaught (in promise) Object {code: -32001, message: "Invalid login/password"} – Pursy

Answer 1

Your problem is that you were returning the rejected loginDaoCall, not the promise where the error was already handled. loginApi.login(user, password) did indeed return a rejected promise, and even while that was handled in another branch, the promise returned by the further .then() does also get rejected and was not handled.

You might want to do something like

// LoginApi.js
return loginDao.login(username, password).then(function (res) {
    store.dispatch(loginSuccess());
    log.log("[loginApi.login] END");
    return true;
}, function (err) {
    store.dispatch(loginFail());
    errorUtils.dispatchErrorWithTimeout(errorLogin);
    log.log(err);
    return false;
}); // never supposed to reject

// loginContainer.js
loginApi.login(user, password).then(success => {
    if (success) {
        // Change here instead of in render so the user can go back to login page
        this.props.history.push(baseUrlRouter + "test");
    }
});

Goiter

Actually just returning the loginDaoCall works fine. I dont really get what's different as it is the looked like it was the same instance, but probably not. – Pursy

Answer 2

It sounds like you have an error in your catch block. When the error is thrown there is no 2nd catch block to catch the error in the 1st catch block.

To fix it ...

.then(function (res) {
    // some code that throws an error
})
.catch(function (err) {
    // some code that throws an error
})
.catch(function (err) {
    // This will fix your error since you are now handling the error thrown by your first catch block
    console.log(err.message)
});

Composite

Answer 3

This answer is for those who are using async and await along with try and catch, it's crucial to include the await keyword before the promise-returning call that might throw an error. In the example provided by the OP, the function in question is loginDao.login(...).

async function foo() {
  try {
    await yourAsyncFunctionThatErrorsOut() 
    // ^^ This await keyword is necessary to catch the error
    // thrown by your promise-returning call yourAsyncFunctionThatErrorsOut()

  } catch (error) {
    console.log(error)
  }
}

Chavannes