In Angular a Promise with a finally()-Block does not reject properly

Question

I have a problem in an angular 7 application. When I have a promise with a finally block, Errors are not thrown! They get swallowed without noticing, When I remove the finally-block it behaves like expected.

Here are some examples: With vanillaJS (no Angular Framework), it works like I expect it to work: As soon as you run the code, it prints my console.logs to the console and throws an "Uncaught (in promise)" error. Also see screenshot.

Promise.resolve()
    .then(() => {
        console.log('then');
        return Promise.reject('This is an error. Please show up in the console, thank you.');
    })
    .finally(() => {
        console.log('finally');
    });

Screenshot vanillaJS enter image description here

Here we have the same code in Angular. See Stackblitz for reference: https://stackblitz.com/edit/angular-iv7cq2

When I remove the "finally", it throws the error like i expect it to do. With the "finally" it just swallows the error.

Screenshot Angular

enter image description here

Why is that? Where do I have to modify my code, so that Promises with finally-blocks also throw errors?

Your vanilla code snippet does not throw the error, in my case. http://prntscr.com/n6tjlm — briosheje, Apr 03 '19 at 09:22
The issue is that Angular seems to be overriding `Promise.prototype.finally` with retarded code - actually, the Promises in that page are not **native** at all — Jaromanda X, Apr 03 '19 at 09:22
see https://stackoverflow.com/questions/52391762/what-is-a-zoneawarepromise/52392055 for more information about Angular's ZoneAwarePromise rubbish — Jaromanda X, Apr 03 '19 at 09:28

score 2 · Accepted Answer · answered Jul 03 '19 at 13:43

You can catch and rethrow the error after finally.

Result: Unhandled Promise rejection

Promise.resolve()
    .then(() => {
        console.log('then');
        return Promise.reject('This is an error. Please show up in the console, thank you.');
    })
    .finally(() => {
        console.log('finally');
    }).catch(err => {
        throw err;
    });

score 1 · Answer 2 · answered Apr 03 '19 at 09:31

from this_link you can get an idea that finally swallows the error : because

If finally is present, it specifies a ‘cleanup’ handler. The try clause is executed, including any except and else clauses. If an exception occurs in any of the clauses and is not handled, the exception is temporarily saved. The finally clause is executed. If there is a saved exception, it is re-raised at the end of the finally clause. If the finally clause raises another exception or executes a return or break statement, the saved exception is discarded:

I work on python mostly and above is taken from this python doc as it happens same in all language: but if u want error to be raised and handled then u can use this syntax:

return Promise.resolve()
    .then(() => {
        console.log('then');
        return Promise.reject('This is an error. Please show up in the console, thank you.');
    }).catch ((error) =>{
        console.log('error');

    }).finally(() => {
        console.log('finally');
    });

Thank you for your answer. In your snipped I indeed have the error in the catch block. However I need the error to be thrown, because I have a custom error handler, that logs errors to the backend. In your snippet the error does not get to the error handler (because it's catched). Unfortunately rethrowing in the catch block also does not work. — Michael B, Apr 10 '19 at 12:42

In Angular a Promise with a finally()-Block does not reject properly

2 Answers2