CODEWITHSUNDEEP
angularhttprxjs
Sven Jäger
Sven Jäger

Reputation: 133

Finalize is not called after error in Angular 8 app

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?

Upvotes: 4

Views: 4718

Answers (3)

Andrii Zelenskyi
Andrii Zelenskyi

Reputation: 316

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!

Upvotes: 7

Sven Jäger
Sven Jäger

Reputation: 133

I made it myself. I just changed the catchError-clause and the finalize-clause.

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

But thanks for the help.

Upvotes: 0

Mark van Straten
Mark van Straten

Reputation: 9425

It is more idiomatic to RxJS to have your results be stored in the subscribe instead of storing intermediate values as 'side-effect' using tap or catchError. This is mainly because side-effects are more difficult to test in isolation.

this.employeesService.getEmployees$()
.pipe(
    take(1)
)
.subscribe(
    employees => {
        this.employees = employees;
        this.isOperationInProgress = false;
    },
    error => {
        this.error = error;
        this.isOperationInProgress = false;
    }
);

That beeing said; The reason why your finalize is not invoked is because the catchError should always return an Observable, not void.

Upvotes: 0

Related Questions