Home > other >  Firebase/Firestore 9.9.4 - "WebChannel transport errored" and empty data returned from Fir
Firebase/Firestore 9.9.4 - "WebChannel transport errored" and empty data returned from Fir

Time:09-16

Yes, this warning/error has been posted many times, but I have tried everything mentioned on StackOverflow and Github, but nothing is working for me.

Auth Emulator and FireStore Emulator up and running. FireStore always gives a warning (with the confusing text "errored") when I try to use it read any data:

WARN  [2022-09-13T22:23:28.341Z]  @firebase/firestore: Firestore (9.9.4): Connection WebChannel transport errored: ...
... "j": {"g": [Circular]}, "l": "http://localhost:8080/google.firestore.v1.Firestore/Listen/channel", "o": undefined, "s": false, "v": true}, "type": "c"}

I also see this popup from time to time inconsistently:

ERROR  [2022-09-13T22:43:13.780Z]  @firebase/firestore: Firestore (9.9.4): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completed
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

Here is the upfront boilerplate:

const firebaseConfig = {
    ...
};
const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
connectAuthEmulator(auth, "http://localhost:9099"); 

const db = getFirestore(app);
connectFirestoreEmulator(db, "localhost", 8080);

A few of the many variations I have tried:

const db = getFirestore();

Every combination of the following flags alone and together:

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

This is a React Native application. I am running the app inside the Android Emulator. I have the above code in a Firebase.js that is imported by my App.js.

Anyone understand what the root cause is here?

Here is an example of trying to read:

const snap = getDocs(collection(db, "users")).then(snap => {
    console.log(snap); // prints "[object Object]" 
    snap.forEach(user => {
        console.log(`${user.id} => ${user.data()}`);  // not reached
    })
});

And that prints essentially nothing, as mentioned in comments, but no errors.

Here is a slightly different example that causes an error:

const randomDoc = getDoc(doc(db, "users", "o3ou4uwi9CYeM1dM8egg")).then(doc => {
    console.log(randomDoc);
});

Output:

WARN  Possible Unhandled Promise Rejection (id: 0):
FirebaseError: Failed to get document because the client is offline.
construct@[native code]
construct@[native code]
...

The Firebase Emulator GUI shows an empty requests page for Firestore, as if no requests have been made.

I have a collection named "users" in my Root, which contains a few dummy documents with {name: "foo"} fields, so I'm expecting the forEach above to print a few times.

CodePudding user response:

There were 3 separate problems:

  1. The Android emulator doesn't run on localhost / 127.0.0.1. It runs on 10.0.2.2. After changing that, I am able to successfully use the Auth Emulator, and the Firestore emulator is now registering my requests, but returning the error above FirebaseError: Failed to get document because the client is offline..

  2. To solve the second error, you must edit firestore.rules and change everything to allow for testing:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
  1. After (1) and (2) we are seemingly back to square 1 (transport error), but use this to init db: const db = initializeFirestore(app, {experimentalForceLongPolling: true});

Finally...success. My init looks like this for now:

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
if (__DEV__) {
    try {
        if (Platform.OS === "android") {
            connectAuthEmulator(auth, "http://10.0.2.2:9099");
        } else {
            connectAuthEmulator(auth, "http://localhost:9099");
        }
    } catch (error) {
        console.error(error);
    }
}

var db = null;
if (__DEV__) {
    try {
        if (Platform.OS === "android") {
            db = initializeFirestore(app, {experimentalForceLongPolling: true});
            connectFirestoreEmulator(db, "10.0.2.2", 8080);
        } else {
            db = getFirestore(app);
            connectFirestoreEmulator(db, "localhost", 8080);
        }
    } catch (error) {
        console.error(error);
    }
}
else {
    db = getFirestore(app);
}
  • Related