Firestore query abnormally slow compared to other queries, sometimes fails

Question

I am performing a firebase query in order to get tickets in a bugtracker app that belong to a specific project. When I load the page that uses this query, the data sometimes loads the data, and sometimes fails to load the data with this error message:

@firebase/firestore: Firestore (9.6.10): Connection WebChannel transport errored

followed by a 400 POST error (also strange since I am not adding data to the database):

fetchxmlhttpfactory.js:270 POST https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?database=projects%2Fbugtracker-ad036%2Fdatabases%2F(default)&VER=8&gsessionid=WLlKfoxUAL-Qxt242-wHXlDzxIsUI23lt1Wynf2GhDs&SID=AD8kKCDnuwmxndB_gE1gag&RID=80048&AID=161539&zx=qnwq3itw57jk&t=1 400

Also, even if this query manages to work and data is displayed on screen, the process takes abnormally long compared to other queries (~8-10 seconds longer).

This is the specific query and snapshot I am using:

useEffect(() => {
    const ticketRef = collection(db, "tickets")
    const ticketQuery = query(ticketRef, orderBy("timeStamp", "desc"), where("projectId", "==", projectId), limit(5))
    

    const unsub = onSnapshot(ticketQuery, (snapshot) => 
      setTickets(snapshot.docs.map((doc) => ({ ...doc.data(), id:doc.id })))
    );   return unsub; });

Since I have been reading that the problem might be with how the app is caching data, I'll also include the config file in case that helps:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";


const firebaseConfig = {
  databaseURL: 'https://bugtracker-ad036.firebaseio.com',
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: "bugtracker-ad036.firebaseapp.com",
  projectId: "bugtracker-ad036",
  storageBucket: "XXXXXXXXXXXXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXXXXXXXXXXXX",
  appId: "1:XXXXXXXXXX:web:XXXXXXXXXXXXXXXXXXXXSS", 
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth()
export const storage = getStorage(app);

Answer 1

For the error : @firebase/firestore: Firestore (9.6.10): Connection WebChannel transport errored

You can refer to this link:

Most recent solution provided here:

import {initializeFirestore} from 'firebase/firestore'
 const db = initializeFirestore(firebaseApp, {useFetchStreams: false})

For slow Query performance you can refer to the reasons and resolution steps mentioned this blog:

Probably the most common explanation for a seemingly slow query is that your query is, in fact, running very fast. But after the query is complete, we still need to transfer all of that data to your device, and that’s the part that’s running slowly.

If Your offline cache is too big:

• First, follow the best practices : add limits to your queries so you’re only retrieving the data that you think your users will need,
  and consider moving unneeded details into subcollections. Also, you
  can follow the “several subcollections vs a separate top level
  collection” discussion at the end of the post, this would be a
  good argument for the “several subcollections” structure, because the cache only needs to search through the data in these smaller
  collections.

• Second, don’t stuff more data in the cache than you need. some cases where developers will do this intentionally by querying a massive number of documents when their application first starts up, then forcing all future database requests to go through the local cache, usually in a scheme to reduce database costs, or make future calls faster. But in practice, this tends to do more harm than good.

• Third, consider reducing the size of your offline cache. The size of your cache is set to 100MB on mobile devices by default, but in some situations, this might be too much data for your device to handle, particularly if you end up having most of your data in one massive collection. You can change this size by modifying the cacheSizeBytes value in your Firebase settings, and that’s something you might want to do for certain clients.

• Fourth, try disabling persistence entirely and see what happens. generally don’t recommend this approach — as the offline cache is pretty great. But if a query seems slow and you don’t know why, re-running your app with persistence turned off can give you a good idea if your cache is contributing to the problem.

For more information you can refer to the stackoverflow case and thread where a similar issue has been mentioned.