Observable closed on error

Question

I have an issue with Observable in Angular 2.

I subscribe my component to an observable, then when my service has new value, my component is notified.
Problem is when the observer push an error, like an HTTP error, my observable is closed, so my component is no more notified.

Question
How can I do to make my component continue listening my service even when I have an error ?

Example
Here an example

Here my code :

Component

constructor(private appService: AppService) {
    //I subscribe my component to an observable
    this.appService.commentsObservable.subscribe((comments) => {
        console.log(comments);
    }, (err) => {
        console.log(err);
    });
}

getComments() {
    //I ask the service to pull some comments
    this.appService.getComments()
}

Service

private commentsObserver: Observer<any>;
commentsObservable: Observable<any>;

constructor() {
    this.commentsObservable = new Observable((observer) => {
        this.commentsObserver = observer;
    });
}

getComments() {
    setTimeout(() => {
        //You will see the result displayed by the component
        this.commentsObserver.next([]);
    }, 0);

    setTimeout(() => {
        //You will see the result displayed by the component
        this.commentsObserver.next([]);
    }, 500);

    setTimeout(() => {
        //You will see the error displayed by the component
        this.commentsObserver.error({_body: 'Nice errroorr'});
    }, 1000);

    setTimeout(() => {
        //You won't see this one, why ?
        this.commentsObserver.next([]); 
    }, 1500);
}

Estus Flask Estus Flask · Accepted Answer · 2016-12-27T01:13:04

This is the expected behaviour. According to the documentation,

In an Observable Execution, zero to infinite Next notifications may be delivered. If either an Error or Complete notification is delivered, then nothing else can be delivered afterwards.

For the code above, it may be

this.appService
// error is caught, but the observable is completed anyway
.catch((err) => {
    console.error(err)
    return Observable.empty();
})
// re-subscribe to completed observable
.repeat()
.subscribe((comments) => console.log(comments));

But considering the expected behaviour, it is unpractical to use RxJS error handling to supply a continuous observable with non-critical error values. Instead, it may be changed to

setTimeout(() => {
    //You will see the error displayed by the component
    this.commentsObserver.next(new Error('Nice errroorr'));
}, 1000);

and

this.appService.commentsObservable.subscribe((comments) => {
    if (comments instanceof Error)
        console.error(comments);
    else
        console.log(comments);
});

The approach may vary depending on the actual case.

Observable closed on error

1 Answers