rxjs and firebase TypeError: Cannot add property 0, object is not extensible

I have an angular app that connects to firebase firestore as backend db.

I am attempting to write a generic function to get document snapshots from firestore.

Here is the function where I am getting my error:

  /**
   * Get a 'listener' observable that subscribes to live document updates in the firestore db
   * @type the expected document type as interface
   * @param docPath path to document collection in firestore
   * @param docId id of document to get
   * @returns An Obseravble<DocumentSnapShot<Type>>
   */
  public watchDocument<T>(
    docPath: string,
    docId: string
  ): Observable<DocumentSnapshot<T>> {
    const docRef = doc(this.firestore, docPath, docId) as DocumentReference<T>;
    return fromEventPattern<DocumentSnapshot<T>>(
      (handler) => onSnapshot<T>(docRef, handler),
      (handler, unsubscribe) => unsubscribe()
    );
  }

I also tried this version of the function:

  public watchDocument<T>(
    docPath: string,
    docId: string
  ): Observable<DocumentSnapshot<T>> {
    const docRef = doc(this.firestore, docPath, docId) as DocumentReference<T>;
    return new Observable<DocumentSnapshot<T>>((subscriber) =>
      onSnapshot<T>(docRef, subscriber.next, subscriber.error)
    );
  }

BOTH version throw the following error on the onSnapshot<T>(docRef, handler) call:

 TypeError: Cannot add property 0, object is not extensible
    at Array.push (<anonymous>)
    at ObserverProxy.subscribe...

This function is called from an NGRX effect. If I only call one effect this function works. However if this function is called by a previous action/effect then it fails with the error I quote above.

EDIT: 1

I think what is happening is that NGRX is freezing something. If I only call firestore functions everything works no matter the order. the problem is that once I call any firebase authentication functions, like signInWithEmailAndPassword the following firestore functions will fail.

QUESTION:

I need help figuring out why this errors when chained with other actions.

As onSnapshot returns the unSubscribe method so it’s better to return unSubscription to the Observable like what you did.

I have Tested this with following changes:

watchDocument<T>(docPath: string,
    docId: string): Observable<DocumentSnapshot<T>> {
    const docRef = doc(this.firestore, docPath, docId) as DocumentReference<T>;
    return new Observable<DocumentSnapshot<T>>((subscriber) => {
      const subscription = onSnapshot<T>(docRef, snapshot => {
        subscriber.next(snapshot);
      });
      return () => {
        subscription();
      };
    });
  }

And getting document data as follows:

this.service.watchDocument(this.collectionName, this.documentId)
    .subscribe(document => {
      console.log(document.id, " ==> ", document.data())
    });

Now applying above logic with your fromEventPattern implementation will become:

watchDocumentWithEvent<T>(docPath: string,
    docId: string): Observable<DocumentSnapshot<T>> {
      const docRef = doc(this.firestore, docPath, docId) as DocumentReference<T>;
    return fromEventPattern<DocumentSnapshot<T>>(
      (handler) => {
        const subscription = onSnapshot<T>(docRef, handler);
        return () => subscription();
      },
      (subscription) => subscription()
    );
  }

As fromEventPattern returns the Observable of whatever returned as T or T[] so here, subscription is the unsubscribe function returned by the onSnapshot call , and it's passed to fromEventPattern as the second argument to allow fromEventPattern to cancel the subscription when the Observable is unsubscribed from.

Reference taken from fromEventPattern and onSnapshot from the typescript vscode intellisense and firebase docs