Skip to content

WebChannel Transport Error, Long Polling #7354

Description

@nxfi777

Operating System

Windows 11

Browser Version

Chrome/111.0.5563.65

Firebase SDK Version

9.17.1

Firebase SDK Product:

Auth, Firestore, Functions

Describe your project's tooling

React app with webpack

Describe the problem

I am often receiving a 400 error with a firestore listener in React JS, Tested on multiple browsers.

Here is the error, stack trace minimally reduced:

GET https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?gsessionid=[Truncated...] 400
k.send @ fetchxmlhttpfactory.js:270
k.da @ xhrio.js:664
ec @ channelrequest.js:570
Fd @ channelrequest.js:525
k.Ia @ webchannelbase.js:1673
xb @ run.js:140
Promise.then (async)
ub @ run.js:58
sb @ run.js:33
yc @ webchannelbase.js:1617
mc @ webchannelbase.js:2090
k.La @ channelrequest.js:619
k.ib @ channelrequest.js:596
kb @ eventtarget.js:351
C @ eventtarget.js:481
td @ xhrio.js:878
k.fb @ xhrio.js:866
k.Ha @ xhrio.js:842
hd @ fetchxmlhttpfactory.js:558
id @ fetchxmlhttpfactory.js:476
k.Ta @ fetchxmlhttpfactory.js:403
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Ta @ fetchxmlhttpfactory.js:228
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Wa @ fetchxmlhttpfactory.js:355
Promise.then (async)
k.send @ fetchxmlhttpfactory.js:270
k.da @ xhrio.js:664
ec @ channelrequest.js:570
Fd @ channelrequest.js:525
k.Ia @ webchannelbase.js:1673
xb @ run.js:140
Promise.then (async)
ub @ run.js:58
sb @ run.js:33
yc @ webchannelbase.js:1617
mc @ webchannelbase.js:2090
k.La @ channelrequest.js:619
k.ib @ channelrequest.js:596
kb @ eventtarget.js:351
C @ eventtarget.js:481
td @ xhrio.js:878
k.fb @ xhrio.js:866
k.Ha @ xhrio.js:842
hd @ fetchxmlhttpfactory.js:558
id @ fetchxmlhttpfactory.js:476
k.Ta @ fetchxmlhttpfactory.js:403
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Ta @ fetchxmlhttpfactory.js:228
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Ta @ fetchxmlhttpfactory.js:228
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Ta @ fetchxmlhttpfactory.js:228
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Ta @ fetchxmlhttpfactory.js:228
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Wa @ fetchxmlhttpfactory.js:355
Promise.then (async)
k.send @ fetchxmlhttpfactory.js:270
k.da @ xhrio.js:664
ec @ channelrequest.js:570
Fd @ channelrequest.js:525
k.Ia @ webchannelbase.js:1673
xb @ run.js:140
Promise.then (async)
ub @ run.js:58
sb @ run.js:33
yc @ webchannelbase.js:1617
kc @ webchannelbase.js:2331
lc @ channelrequest.js:941
k.La @ channelrequest.js:619
k.ib @ channelrequest.js:596
kb @ eventtarget.js:351
C @ eventtarget.js:481
td @ xhrio.js:878
k.fb @ xhrio.js:866
k.Ha @ xhrio.js:842
hd @ fetchxmlhttpfactory.js:558
k.Ta @ fetchxmlhttpfactory.js:403
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Wa @ fetchxmlhttpfactory.js:355
Promise.then (async)
k.send @ fetchxmlhttpfactory.js:270
k.da @ xhrio.js:664
ec @ channelrequest.js:570
cc @ channelrequest.js:504
k.Ja @ webchannelbase.js:1331
xb @ run.js:140
Promise.then (async)
ub @ run.js:58
sb @ run.js:33
zc @ webchannelbase.js:1258
X.m @ webchannelbase.js:778
Hr @ index.esm2017.js:13053
send @ index.esm2017.js:12877
Bo @ index.esm2017.js:13392
zo @ index.esm2017.js:13554
xu @ index.esm2017.js:13905
(anonymous) @ index.esm2017.js:13940
$u @ index.esm2017.js:13939
(anonymous) @ index.esm2017.js:13472
(anonymous) @ index.esm2017.js:13500
(anonymous) @ index.esm2017.js:17414
(anonymous) @ index.esm2017.js:17447
Promise.then (async)
Hc @ index.esm2017.js:17447
enqueue @ index.esm2017.js:17414
enqueueAndForget @ index.esm2017.js:17392
(anonymous) @ index.esm2017.js:13500
(anonymous) @ index.esm2017.js:13472
so @ index.esm2017.js:12880
(anonymous) @ index.esm2017.js:13120
setTimeout (async)
wo @ index.esm2017.js:13115
jo @ index.esm2017.js:13518
Go @ index.esm2017.js:13471
(anonymous) @ index.esm2017.js:13461
Promise.then (async)
auth @ index.esm2017.js:13452
start @ index.esm2017.js:13357
(anonymous) @ index.esm2017.js:13482
(anonymous) @ index.esm2017.js:13258
(anonymous) @ index.esm2017.js:14306
(anonymous) @ index.esm2017.js:17414
(anonymous) @ index.esm2017.js:17447
Promise.then (async)
Hc @ index.esm2017.js:17447
enqueue @ index.esm2017.js:17414
enqueueAndForget @ index.esm2017.js:17392
handleDelayElapsed @ index.esm2017.js:14306
(anonymous) @ index.esm2017.js:14288
setTimeout (async)
start @ index.esm2017.js:14288
createAndSchedule @ index.esm2017.js:14282
enqueueAfterDelay @ index.esm2017.js:17487
Ro @ index.esm2017.js:13258
Oo @ index.esm2017.js:13481
start @ index.esm2017.js:13357
ku @ index.esm2017.js:13920
Bu @ index.esm2017.js:13947
close @ index.esm2017.js:13442
Qo @ index.esm2017.js:13491
(anonymous) @ index.esm2017.js:13475
(anonymous) @ index.esm2017.js:13500
(anonymous) @ index.esm2017.js:17414
(anonymous) @ index.esm2017.js:17447
Promise.then (async)
Hc @ index.esm2017.js:17447
enqueue @ index.esm2017.js:17414
enqueueAndForget @ index.esm2017.js:17392
(anonymous) @ index.esm2017.js:13500
(anonymous) @ index.esm2017.js:13475
io @ index.esm2017.js:12883
(anonymous) @ index.esm2017.js:13079
(anonymous) @ index.esm2017.js:13062
kb @ eventtarget.js:351
C @ eventtarget.js:481
Y.va @ webchannelbasetransport.js:428
R @ webchannelbase.js:2375
mc @ webchannelbase.js:2147
Q @ webchannelbase.js:522
k.La @ channelrequest.js:698
k.ib @ channelrequest.js:596
kb @ eventtarget.js:351
C @ eventtarget.js:481
td @ xhrio.js:878
k.fb @ xhrio.js:866
k.Ha @ xhrio.js:842
hd @ fetchxmlhttpfactory.js:558
k.Ta @ fetchxmlhttpfactory.js:403
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Wa @ fetchxmlhttpfactory.js:355
Promise.then (async)
k.send @ fetchxmlhttpfactory.js:270
k.da @ xhrio.js:664
ec @ channelrequest.js:570
Fd @ channelrequest.js:525
k.Ia @ webchannelbase.js:1673
xb @ run.js:140
Promise.then (async)
ub @ run.js:58
sb @ run.js:33
yc @ webchannelbase.js:1617
mc @ webchannelbase.js:2090
k.La @ channelrequest.js:619
k.ib @ channelrequest.js:596
kb @ eventtarget.js:351
C @ eventtarget.js:481
td @ xhrio.js:878
k.fb @ xhrio.js:866
k.Ha @ xhrio.js:842
hd @ fetchxmlhttpfactory.js:558
id @ fetchxmlhttpfactory.js:476
k.Ta @ fetchxmlhttpfactory.js:403
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Ta @ fetchxmlhttpfactory.js:228
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Wa @ fetchxmlhttpfactory.js:355
Promise.then (async)
k.send @ fetchxmlhttpfactory.js:270
k.da @ xhrio.js:664
ec @ channelrequest.js:570
Fd @ channelrequest.js:525
k.Ia @ webchannelbase.js:1673
xb @ run.js:140
Promise.then (async)
ub @ run.js:58
sb @ run.js:33
yc @ webchannelbase.js:1617
mc @ webchannelbase.js:2090
k.La @ channelrequest.js:619
k.ib @ channelrequest.js:596
kb @ eventtarget.js:351
C @ eventtarget.js:481
td @ xhrio.js:878
k.fb @ xhrio.js:866
k.Ha @ xhrio.js:842
hd @ fetchxmlhttpfactory.js:558
id @ fetchxmlhttpfactory.js:476
k.Ta @ fetchxmlhttpfactory.js:403
Promise.then (async)
jd @ fetchxmlhttpfactory.js:370
k.Ta @ fetchxmlhttpfactory.js:228
Promise.then (async)
etc...

React Devtools Warning

@firebase/firestore: Firestore (9.17.1): Connection WebChannel transport errored: 
Jd {type: 'c', target: X, g: X, defaultPrevented: false, status: 1}
defaultPrevented
: 
false
g
: 
X {s: false, o: undefined, i: Ua, P: X, I: null, …}
status
: 
1
target
: 
X {s: false, o: undefined, i: Ua, P: X, I: null, …}
type
: 
"c"
[[Prototype]]
: 
Wb

Using setLogLevel('debug') I have found the following error logs:

[2023-06-04T21:54:23.588Z]  @firebase/firestore: Firestore (9.22.1): PersistentStream close with error: FirebaseError: [code=unavailable]: The operation could not be completed
logger.ts:115 [2023-06-04T21:54:23.591Z]  @firebase/firestore: Firestore (9.22.1): WebChannelConnection Creating RPC 'Listen' stream 0x86195108: https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel {"httpSessionIdParam":"gsessionid","initMessageHeaders":{"X-Goog-Api-Client":"gl-js/ fire/9.22.1","Content-Type":"text/plain","X-Firebase-GMPID":"1:845193017408:web:d13f2eab4cf84fbe2e47a5","Authorization":"Bearer |OMITTED|"},"messageUrlParams":{"database":"projects/|OMITTED|/databases/(default)"},"sendRawJson":true,"supportsCrossDomainXhr":true,"internalChannelParams":{"forwardChannelRequestTimeoutMs":600000},"forceLongPolling":false,"detectBufferingProxy":true,"xmlHttpFactory":{"l":null,"j":false},"encodeInitMessageHeaders":true}

This looks like a timeout error, but I think I am correctly unsubscribing to the listener. This may be an issue with the useCallback() hook nature.

Steps and code to reproduce issue

Here is how I am initializing Firestore:

import { initializeApp } from "firebase/app";
import { initializeFirestore } from "firebase/firestore";

const fK = process.env.REACT_APP_FK;
const fDom = process.env.REACT_APP_FDOM;
const pId = process.env.REACT_APP_FPID;
const fSB = process.env.REACT_APP_FSB;
const fMSID = process.env.REACT_APP_FMSID;
const fId = process.env.REACT_APP_FID;
const fMID = process.env.REACT_APP_FMID;

const firebaseConfig = {
    apiKey: fK,
    authDomain: fDom,
    projectId: pId,
    storageBucket: fSB,
    messagingSenderId: fMSID,
    appId: fId,
    measurementId: fMID
  };

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

I have also tried experimentalForceLongPolling, and disabling useFetchStreams. using getFirestore() to initialize firestore does not work either, I still get the same error.

MRE

  const fetchUserData = useCallback(() => {
    if (!navigator.onLine) {
      navigate("/");
      return;
    }
    if (auth.currentUser) {
      const docRef = doc(db, "users", auth.currentUser.uid);
      const unsubscribe = onSnapshot(
        docRef,
        (docSnap) => {
          if (docSnap.exists()) {
            const userData = docSnap.data();
            // Handle userData
          }
        },
        (error) => {
          handleLogout();
          console.error("Error fetching user data:", error);
        }
      );
  
      // Cleanup function to detach listener
      return () => {
        unsubscribe();
      };
    } else {
      navigate("/");
    }
  }, [navigate, handleLogout]);
  

  useEffect(() => {
    try {
      fetchUserData();
    } catch (error) {
      setInfo("User data not found");
      console.error(error);
      navigate("/");
    }
  }, [fetchUserData, navigate]);

I have a feeling that it may have to do with my useEffect() and useCallback() hooks, but I am uncertain. The user data is working fine, changes in the user document are seen from the app, but this error always occurs multiple times.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions