Race condition when using withLatestFrom as part of my pipeable operator - node.js

Question

I have the following code that suffers from a race condition. Sometimes I can see the results, sometimes I cannot:
const op1 = ()=>{
const filesObs = from(['a','b','c']).pipe(delay(200))
return (obs)=>{
return obs
.pipe(delay(100))
.pipe(withLatestFrom(filesObs))
}
}
from([1,2,3,4,5]).pipe(op1()).subscribe(console.log);
As it is I don't see anything printed. But If I increase the 2nd delay to 300 I see the expected values:
[ 1, 'c' ]
[ 2, 'c' ]
[ 3, 'c' ]
[ 4, 'c' ]
[ 5, 'c' ]
Is there a way to always see the result by using observeOn or subscribeOn somewhere on my code or should I follow another best practice?

Answer 1

First of all this is not an issue specific to withLatestFrom being inside an operator.
The code below that is not used inside an operator also does not print anything (faces the same issue):
const filesObs = from(['a','b','c']).pipe(delay(200));
from([1,2,3,4,5]).pipe(delay(100),withLatestFrom(filesObs)).subscribe(console.log);
According to the provided desired output in the question we need to get the last element of the letters stream and pair it with each value from the numbers stream. But what withLatestFrom() will get is the last emitted element at each point in time. To justify this, consider adding some delay between the emitted elements of the letters stream (1st line).
//adding a delay on each of the emitted letters.
const filesObs = from(['a','b','c']).pipe(concatMap((v)=>of(v).pipe(delay(50))))
from([1,2,3,4,5]).pipe(delay(100),withLatestFrom(filesObs)).subscribe(console.log);
[ 1, 'a' ]
[ 2, 'a' ]
[ 3, 'a' ]
[ 4, 'a' ]
[ 5, 'a' ]
As you can see the above is not the desired output.
Also, I am not sure if it is an rxjs bug, but withLatestFrom() will skip the value if there is nothing emitted yet on the observable arguement. See below how it skips the first number (because at the moment it is emits it, nothing has been emitted yet on filesObs).
const filesObs = from(['a','b','c']).pipe(concatMap((v)=>of(v).pipe(delay(50))))
//Now adding a delay on each of the emitted numbers.
from([1,2,3,4,5]).pipe(concatMap((v)=>of(v).pipe(delay(25)))).pipe(withLatestFrom(filesObs)).subscribe(console.log);
[ 2, 'a' ]
[ 3, 'a' ]
[ 4, 'b' ]
[ 5, 'b' ]
solution
One solution to the problem is to get the last() element of the letters stream and repeat() it. Then map each number with the first() element of filesObs, which will now always be the last one ('c'):
const filesObs = from(['a','b','c']).pipe(delay(200), last(), repeat())
from([1,2,3,4,5]).pipe(delay(100)).pipe(mergeMap(v=>filesObs.pipe(first(),map(v2=>[v2,v])))).subscribe(console.log);
And the same inside an operator:
const op1 = ()=>{
const filesObs = from(['a','b','c']).pipe(delay(200), last(), repeat())
return (obs)=>{
return obs
.pipe(delay(100))
.pipe(mergeMap(v=>filesObs.pipe(first(),map(v2=>[v2,v]))))
}
}
from([1,2,3,4,5]).pipe(op1()).subscribe(console.log);
Both of the above will output the below value, independent to the delay values:
[ 'c', 1 ]
[ 'c', 2 ]
[ 'c', 3 ]
[ 'c', 4 ]
[ 'c', 5 ]