fromEvent/fromEventPattern - removal not happening on unsubscribe if its pipe has startWith - rxjs

Question

I was using fromEvent but I switched to fromEventPattern so I can console.log to troubleshoot. I see that when I unsubscribe(), only the first fromEventPattern remove method is called. Does anyone know why the remove handlers of the the window.remveEventListener('online') and offline are not getting called?
If I remove the startWith(window.navigator.onLine) from the the .pipe it works, but I need the the startWith(window.navigator.onLine) for at least one of them.
Here is my pipeline:
pipeline$ = combineLatest(
merge(
fromEventPattern(
handler => {
console.log('adding io.socket.disconnect');
io.socket.on('disconnect', handler);
},
handler => {
console.log('removing io.socket.disconnect');
io.socket.off('disconnect', handler);
},
).pipe(
mapTo(false),
tap(() => this.setState({ isConnected: false })),
),
this.isConnectedSubject.pipe(
tap(isConnected => this.setState({ isConnected })),
startWith(io.socket.isConnected())
)
),
merge(
fromEventPattern(
handler => {
console.log('adding window.online');
window.addEventListener('online', handler, false);
},
handler => {
console.log('removing window.online');
window.removeEventListener('online', handler, false);
}
).pipe(
tap(() => console.log('online')),
mapTo(true),
tap(() => this.setState({ isOnline: true })),
startWith(window.navigator.onLine)
),
fromEventPattern(
handler => {
console.log('adding window.offline');
window.addEventListener('offline', handler, false);
},
handler => {
console.log('removing window.offline');
window.removeEventListener('offline', handler, false);
}
).pipe(
tap(() => console.log('offline')),
mapTo(false),
tap(() => this.setState({ isOnline: false })),
startWith(window.navigator.onLine)
)
)
).pipe(
switchMap(([ isConnected, isOnline, ...rest ]) => {
console.log('isConnected:', isConnected, 'isOnline:', isOnline, 'rest:', rest);
console.log(!isConnected && isOnline ? 'RE-CON now' : 'DO NOT re-con');
return !isConnected && isOnline
? defer(() => connectSocket()).pipe(
retryWhen(error$ =>
error$.pipe(
tap(error => console.log('got socket connect error!', error.message)),
delayWhen((_, i) => {
const retryIn = 10000;
this.setState({
retryAt: Date.now() + retryIn
});
return timer(retryIn);
})
)
),
tap(() => isConnectedSubject.next(true))
)
: EMPTY;
}),
takeUntil(mSessionSubject.pipe(
filter(action => action.type === 'LOGOUT'),
))
);
I subscribe to it like this:
const sub = pipeline$.subscribe();
and then I unsubscribe like this:
sub.unsubscribe();
After calling this unsubscribe, I am not seeing the online/offline removal methods trigger.

Answer 1

did you check if the subscription is defined before doing unsubscribe?
something like
if (sub !== undefined) {
sub.unsubscribe();
}
because you might unsubscribe before sub emit any data however It's not recommended to use unsubscribe , but you could use take(n),
takeWhile(predicate), first() or first(predicate) instead.