Firestore 'await addDoc' (Web version 9) hangs forever when network connection is lost

Question

I'm using Firestore 'addDoc' (Web version 9, https://firebase.google.com/docs/firestore/manage-data/add-data) to add a new document:

const ref = collection(this.db, 'participants').withConverter(Participant.dataConverter);
const docRef = await addDoc(ref, participant);

This works great if the network connection is OK.

However, if I disconnect from the internet by disabling the network adapter (Windows), 'await addDoc' seems to hang forever (it does not return, the following code lines are not executed).

Various network errors are continuously shown in the console for some time:

zone.js:1465 POST https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channe…A1%3A447623293743%3Aweb%3Aaadb8ec…%0D%0A&zx=bjcly4sf4lta&t=1 net::ERR_NAME_NOT_RESOLVED
index.esm2017.js:78 [2022-01-03T13:30:28.657Z]  @firebase/firestore: Firestore (9.6.1): Connection WebChannel transport errored: 
Vd {type: 'c', target: Y, g: Y, defaultPrevented: false, status: 1}
www.google.com/image…f?zx=lih9uz2upg4y:1 GET https://www.google.com/images/cleardot.gif?zx=lih9uz2upg4y net::ERR_NAME_NOT_RESOLVED

Meanwhile 'onSnapshot' is fired and the new (obviously local) document is included in the documents list.

If I reconnect to the internet (by reactivating the network adapter) it takes a few seconds, then the code continues as if everything went normal.

Is this intended? What can I do to detect this? At least, it is not acceptable that the code stops executing...

Despite this issue, I will try to detect connection problems and display some kind of warning, but nevertheless 'addDoc' should either return a throw an error.

Answer 1

This is the expected behavior: the promise from addDoc is only resolved once the write operation is completed on the server. If you don't want to wait for that, don't use await.

If there is a problem with the local write, addDoc will raise an exception. Only when there is a problem with the write on the server, will it reject the promise.

---

In v8 and before you could get the DocumentReference without await by using collection.doc(). See the last snippet in the documentation on adding a document for how to do this in v9 too:

In some cases, it can be useful to create a document reference with an auto-generated ID, then use the reference later. For this use case, you can call doc():

import { collection, doc, setDoc } from "firebase/firestore"; 

// Add a new document with a generated id
const newCityRef = doc(collection(db, "cities"));

// later...
await setDoc(newCityRef, data);

Behind the scenes, .add(...) and .doc().set(...) are completely equivalent, so you can use whichever is more convenient.