@firebase/firestore: Firestore (9.6.7): Connection WebChannel transport errored: 400 (Bad Request)

[Richard-Walter]

My environment:

• Operating System version: _windows 11
• Browser version: Chrome Version 100.0.4896.127 (Official Build) (64-bit)
• Firebase SDK version: 9.6.7
• Firebase Product: firestore
• Using the firestore emmuator

Describe the problem:
-Using the emulator and a collection group query I get the following error in the browser console:

GET http://localhost:8081/google.firestore.v1.Firestore/Listen/channel?database=projects%2Ffir-api-test2-72710%2Fdatabases%2F(default)&VER=8&RID=rpc&SID=RBmgATMxQYhabphgmp6nWg%3D%3D&CI=0&AID=121&TYPE=xmlhttp&zx=95zvkptcmsl1&t=1 400 (Bad Request)

index.esm2017.js:78 [2022-04-27T01:37:21.607Z] @firebase/firestore: Firestore (9.6.7): Connection WebChannel transport errored: Vd {type: 'c', target: Y, g: Y, defaultPrevented: false, status: 1}

Steps to reproduce:

You would need access to my firestore emulator data to reproduce the problem but the collection group query casuing the problem is :

`
const measurements = query(
collectionGroup(db, "measurements"),
orderBy("ET"),
where("LOCATION", "==", site)
);

  const measurementQuerySnapshot = await getDocs(measurements);

`
The error is only produced when querying large data sets. For example, when querying a dataset with 3 collections of 220+ measurement docs it works. When querying a dataset with over 40 collections 1000+ measurement docs it fails. If i query the samelarge dataset using collection references it works e.g.

`
for (const sensorName of unitnames) {

    const measurementColRef = collection(db, "gnss",sensorName,"measurements");
    const mq = query(measurementColRef, orderBy("ET"));

    const measurementDataHistoryList = [];
    const measurementSnapshot = await getDocs(mq);
    measurementSnapshot.forEach((record) => {
      measurementDataHistoryList.push(record.data());
    });
    sensorMeasurementDataDict[sensorName] = measurementDataHistoryList;
  }

`

As suggested in other stackoverflow posts, I have tried initialising firestore with useFetchStraems: false, experimentalForceLongPolling:true, and cacheSizeBytes: CACHE_SIZE_UNLIMITED but this make no difference.

My firebase config is:

`
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// import { initializeFirestore, connectFirestoreEmulator, CACHE_SIZE_UNLIMITED } from "firebase/firestore";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import { getAuth, connectAuthEmulator } from 'firebase/auth'
import { getStorage } from "firebase/storage";

const USE_EMULATOR = true

const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
storageBucket: ''
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);
// const db = initializeFirestore(app, {useFetchStraems: false, experimentalForceLongPolling:true});
// const db = initializeFirestore(app, {cacheSizeBytes: CACHE_SIZE_UNLIMITED});
const auth = getAuth()
const storage = getStorage(app)

if (USE_EMULATOR == true) {
console.log('######### USING LOCAL EMULATOR ##########');
connectFirestoreEmulator(db, 'localhost', 8081);
connectAuthEmulator(auth, "http://localhost:9099");
} else {
console.log('######### USING PRODUCTION ##########');
}
export {db, auth, storage}`

[jbalidiong]

Hi @Richard-Walter, thanks for the report. I was able to reproduce the behavior now. Let me check what we can do for this issue or bring someone here that can provide more context about it. I’ll update this thread if I have any information to share.

[Richard-Walter]

Thats great jbalidiong. I can confirm that this works fine in production, but not using the emulator

[arsen1c]

Hi! Any updates on this? I am facing the same issue and I also get "Failed to get document because the client is offline" along with that.

[ryanmalesic]

@arsen1c Just debugged my issue with this. So in my case, the port should be 8080, not 8081 like the OP has. Use whatever the port is in firebase.json. Second, unlike the connectAuthEmulator, the connectFirestoreEmulator automatically prepends the scheme http://. I discovered this when using setLogLevel("debug").

So in essence, the fix is connectFirestoreEmulator(firestore, "192.168.1.236", 8080);, replacing the host with your host with no scheme.

Also note that when using Expo and Expo Go, you need to set the host to the local IP of the emulator server. This is so that the app running in Expo Go on your iPhone can connect over the local network. In my case, it's my laptop's IP.

Hope this helps!

[arsen1c]

@ryanmalesic Thank you very much for the tip! I moved on to using react-native-firebase because I was running out of time. I will try this fix next time when I use the firebase module.

[NjiruClinton]

I had the same issue. I just set a preventDefault like this

const test = (e) => {
    e.preventDefault();
  try {...

Hope this helps someone.

[Richard-Walter]

Any status update on this issue that wasa posted over a year ago. Its still causing me issues.

[wu-hui]

Hi @Richard-Walter

There seems to be multiple issues behind this error, the original post was about emulator under heavy load, and other replies seem to be related to other environment issues.

We do not have plans to address emulator heavy load issue yet due to capacity constraints. Emulator in general is designed to copy backend behavior, performance is not a top priority.

If your issue is a new scenario, please file a new issue.

Thanks.

[Richard-Walter]

Why was this closed. Im still plague by this issue and have to implement a workaround? Even jbalidiong was able to reproduce the issue? I get the emulator performance is not a top priority but it shouldnt fail.