Why does assigning an observer to a subject in the subscribe break sometimes? - rxjs

Question

Imagine the following simple case:
you get some data from a source, resulting in an observable, lets call it obs$
you need to transform it (frex a simple synchronous sort) and hand the result some kind of subject, lets call it subject$$
You now have several ways to implement it. The simplest might look like:
obs$
.pipe(
takeUntil(this.#destroy$$)
)
.subscribe(
result => {
this.subject$$.next(result.dSomething())
});
Works like a charm. A bit later you write some more similar functions, and thus would like to separate the transformation from the assignment. Basically you move the doSomething from the subscribe to a map in the pipe. This could look like:
obs$
.pipe(
takeUntil(this.#destroy$$),
map(result => result.dSomething())
)
.subscribe(res => { this.subject$$.next(res) });
Works fine as well. Though the assignment now looks a bit clunky, surely there is a better way to do this? You might be tempted to go for something like:
obs$
.pipe(
takeUntil(this.#destroy$$),
map(result => result.dSomething())
)
.subscribe(this.subject$$.next);
But quickly find that this fails, as you've got no access to your outer scopes this. The suggested solution looks like this:
obs$
.pipe(
takeUntil(this.#destroy$$),
map(result => result.dSomething())
)
.subscribe(this.subject$$);
Which works just fine in many cases.
Imagine my surprise, when all of a sudden I stumbled into a waterfall of errors:
EmptyError: no elements in sequence
showing up in four completely unrelated places, bubbling up through the code, without an obvious place to even try catch it.
Now following the white rabbit, I searched for far to long until I finally managed to discover the place of origin. Still it doesn't make any sense to me.
Why is the observer "disconnecting" for a moment when there is no activity that could result in a complete? Funnily enough, the subject is catching back up shortly afterwards, so this is not completely breaking the assignment.
Of course, I can always use the slightly more verbose assignment, but understanding why this fails only in some cases would really help avoid those.

Answer 1

Its very hard to suggest anything because I don't know what part of your code and what RxJS chain gives you the EmptyError.
However, I'm suspicious that the problem comes from .subscribe(this.subject$$) because this is not the same as .subscribe(res => this.subject$$.next(res));
All Subjects behave like Observables and observers at the same time. Observers implement this interface that handles all three notification types. If you use .subscribe(this.subject$$) you're passing also error and complete notifications from the source Observable to subject$$ and this is very like your problem. When obs$ completes, the complete notification is passed to subject$$ that completes as well and since it's a Subject it will never ever emit any next again and to all its new observers it'll just pass complete notification and that's it. So this might explain why you're seeing EmptyError somewhere else in you chains that use subject$$.
With .subscribe(res => this.subject$$.next(res)); you're only passing next notifications and complete or error notifications are ignored.