Finalize is not called after error in Angular 8 app

Question

I'm trying to build an angular-app in Angular 8, where I get from a backend an Observable and want to subscribe to it. This is my code I already have:

this.employeesService.getEmployees$()
      .pipe(
        tap(employees => {
          this.employees = employees;
          console.log(this.employees.length);
        }),
        catchError(err => this.error = err),
        finalize(() => {
          console.log(this.error);
          this.isOperationInProgress = false;
        })
      )
      .subscribe();

this.employeesService.getEmployees$()

This function returns an Observable, with which I want to make multiple things.

When I try to reach the backend, but its offline, I get nothing as a return-value of my function. So here's my problem:

When this happens, I try to call the finalize-function. But this function does not get called after an error.

Any ideas how to fix that?

Answer 1

thank you for your question.

The official definition of catchError() operator is:

Catches errors on the observable to be handled by returning a new observable or throwing an error.

Or in other words, the main idea of this operator is to return a new observable in case if some error has happened. I can provide a code example with business logic if you want.

The idea of the finalize() operator is to provide a possibility to start side-effects after Observable was completed. Because of the error or just complete.

So, in case if you want to show an error message when your BE service is unavailable your code should be something like:

this.isOperationInProgress = true;
// I do not recommend the '$' symbol for service methods. But, it's up to you
this.employeesService.getEmployees().pipe(
   tap(console.log),
   finalize(() => this.isOperationInProgress = false)
).subscribe(
    employees => this.employees = employees, 
    error => this.showErrorMesage(error.message)
)

If you are interested in more detailed explanations: Here is a great blog post about error handling.

I hope it was useful. I would like to hear any kind of feedback from you. Have a nice day!