How to keep an Observable alive after Error in Angular?

What’s an Observable?

Observable is just a function that accepts an Observer as an input and applies one of the three methods on it.

Let’s take a look into an example

Let’s take a look into these three methods:
1.next() (Required):next method will be called by the Observable whenever a new value is emitted .
2.error() (Optional):error method will be called by the Observable whenever an error occurs
3.complete() (Optional:complete method will be called whenever the observable is done and there is no more values to emit

Observable and Observer sign a contract through the subscription which dictates which method will be invoked among next(),error(),complete().

Wondering why next is required but error and complete are optional??

Let’s say the observable wraps a click listener on a button then next() method will be called whenever the click event is fired but error() and complete() will never be executed because its not possible to say when it will be finished for instance user could always click the button and click event will never throw an error.

In contrast when an Observable wraps an Http request one among the two is bound to happen.

1. Server returns the correct response: next() method will be executed followed by Complete().
2. Server returns an error(could be 404/500):error() method will be executed.

So, Takeaway is ,Observer Dies after error() method or complete() method is called or when you unsubscribe to an observable.

What if we want to keep them alive?

Scenario:

Polling an HTTP endpoint on an interval. This is a common task in web applications, and one that RxJS tends to handle really well.

we are making an ajax call every 10 seconds i.e. polling ,

let’s understand what’s happening step by step:

1. The interval fires.
2. switchMap() creates a brand new ajax observable.
3. We get a response.
4. it passes through catchError() because it does not care about next handler.
5. next() handler is called.

let’s assume in next request a 404 error is encountered.

let’s understand what’s gonna happen this time step by step:

1. The interval fires.
2. switchMap() creates a brand new ajax observable.
3. We get an Error.
4. Error handler for interval Observable as well as ajax Observable created by switchMap() are called and they are closed.
5. catchError() is called and it returns an empty Observable which completes right away.
6. and whole thing is Done!

Then how to keep an Observable alive?

By shielding the main observer chain.

How to isolate the main observer chain?

By chaining the catchError() operator with switchMap().

Angular Isolate Observable Chain - StackBlitz

1. The interval fires.
2. switchMap() creates a brand new ajax Observable and this time with catchError()
3. When error occurs that error is going to catchError and it maps to an empty Observable which finishes right away.
4. interval() Observable is still alive
5. switchMap() does not care if inner Observable has completed it will only complete when outer Observable has completed.
6. Even though inner Observable chain dies,outer Observable chain stays alive because error handler has not been called for outer Observable chain.
7. If not an error next() handler is called
8. Step-1 to Step 7.

So in a nutshell:

Creating a new Observable chain would result in shielding the main Observable chain.

Any RxJs Operator which would prevent error should be chained to newly created Observable Example:retry()