Firestore (9.6.6): Connection WebChannel transport errored:

Question

In a react app I have two virtually identical functions in the same file to add a document to a subcollection. One works every time, the other, which uses a different subcollection, gets the following WARNING (NOTE: not an error) most of the time and the data is NOT added.

await addDoc(collection(db, 'users', uid, 'medications'), med);

​[2022-02-16T20:54:44.216Z] @firebase/firestore: Firestore (9.6.6): Connection WebChannel transport errored: Vd {type: 'c', target: Y, g: Y, defaultPrevented: false, status: 1}

The other odd behavior is that after the addDoc is called, the app re-navigates to the current page but with the data to be added to the document appended to the URL. There are no navigation links in the page at all. This occurs regardless of whether the data was added or not.

Navigated to http://localhost:3000/create?name=test+med+again&description=a+med+for+testing&form=capsule&dosage=1&measurement=ea&occurance=2&often=daily

Answer 1

Concerning the firestore Connection WebChannel transport error. I was dealing with a similar issue while trying to implement simple crud operations in react native. Most of the solutions I found on the internet have to do with adding settings to the firestore initialization but they also use firebase v8 syntax (see: React Native repeated timeouts writing collection to firestore@firebase/firestore: Firestore (8.4.2): Connection WebChannel transport errored)

This way of initializing firestore solved it for me on firebase(9.8.3)

const app = initializeApp(firebaseConfig);
export const db = initializeFirestore(app, {
  experimentalForceLongPolling: true,
  useFetchStreams: false,
});