Skip to content

@firebase/firestore: Firestore (9.16.0): Connection WebChannel transport errored #6993

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Malik-Usman17 opened this issue Jan 31, 2023 · 37 comments
Closed

@firebase/firestore: Firestore (9.16.0): Connection WebChannel transport errored #6993

Malik-Usman17 opened this issue Jan 31, 2023 · 37 comments
Assignees
@dconeybe
Labels
api: firestore needs-attention

Comments

@Malik-Usman17
Copy link

Malik-Usman17 commented Jan 31, 2023 •
edited
Loading

I am integrating the firebase with my react-native app, when I am adding the document, it give me this warning and didn't add the document.
@firebase/firestore: Firestore (9.16.0): Connection WebChannel transport errored: {"defaultPrevented": false, "g": {"A": true, "J": null, "R": [Circular], "g": {"$": true, "$a": 5000, "A": 3, "B": null, "C": 0, "Ca": "1hJW6YGvkRCHMzXfdmutYXfxVzcgGjoWTwnPDvMNTgI", "D": "gsessionid", "Ea": -1, "F": [U], "Fa": 12, "G": 0, "Ga": false, "H": true, "Ia": [ud], "J": "B8CDx_gBqjeTEQ67byhG9A", "K": 45000, "L": false, "M": true, "O": true, "P": false, "R": 0, "U": [Object], "V": 0, "W": 53269, "Y": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "aa": 4, "ab": false, "ba": false, "bb": false, "cb": 2, "eb": 1, "fb": 10000, "g": null, "h": [pd], "i": [Array], "j": [Sb], "l": [Z], "la": [Object], "m": null, "ma": undefined, "na": "", "o": null, "oa": null, "pa": 8, "s": null, "sa": -1, "u": null, "ua": undefined, "v": null, "va": [U], "wa": 600000}, "h": {"database": "projects/fir-auth-7be2f/databases/(default)"}, "i": {"g": [Object], "h": 4, "src": [Circular]}, "j": {"g": [Circular]}, "l": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "o": undefined, "s": false, "v": true}, "status": 1, "target": {"A": true, "J": null, "R": [Circular], "g": {"$": true, "$a": 5000, "A": 3, "B": null, "C": 0, "Ca": "1hJW6YGvkRCHMzXfdmutYXfxVzcgGjoWTwnPDvMNTgI", "D": "gsessionid", "Ea": -1, "F": [U], "Fa": 12, "G": 0, "Ga": false, "H": true, "Ia": [ud], "J": "B8CDx_gBqjeTEQ67byhG9A", "K": 45000, "L": false, "M": true, "O": true, "P": false, "R": 0, "U": [Object], "V": 0, "W": 53269, "Y": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "aa": 4, "ab": false, "ba": false, "bb": false, "cb": 2, "eb": 1, "fb": 10000, "g": null, "h": [pd], "i": [Array], "j": [Sb], "l": [Z], "la": [Object], "m": null, "ma": undefined, "na": "", "o": null, "oa": null, "pa": 8, "s": null, "sa": -1, "u": null, "ua": undefined, "v": null, "va": [U], "wa": 600000}, "h": {"database": "projects/fir-auth-7be2f/databases/(default)"}, "i": {"g": [Object], "h": 4, "src": [Circular]}, "j": {"g": [Circular]}, "l": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "o": undefined, "s": false, "v": true}, "type": "c"}

Here is my config.js file code:

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

const firebaseConfig = {
apiKey: "my_project_api_key",
authDomain: "fir-auth-7be2f.firebaseapp.com",
projectId: "fir-auth-7be2f",
storageBucket: "fir-auth-7be2f.appspot.com",
messagingSenderId: "180812418171",
appId: "1:180812418171:web:88c2ff1f9e363ede8066de"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app)
const db = getFirestore(app);

export { db, auth };
`

My Project Versions are:
firebase: "^9.16.0"
react: "18.2.0",
react-native: "0.71.0"

One thing to note that I am running my app on real device (not emulator) while coding and using cli.
@Malik-Usman17
Copy link
Author

@jbalidiong

@dconeybe dconeybe self-assigned this Jan 31, 2023
@dconeybe
Copy link
Contributor

Please enable debug logging, reproduce the issue, and attach the full logs.

To enable debug logging, call setLogLevel('debug')

https://firebase.google.com/docs/reference/js/firestore_#setloglevel

@dconeybe
Copy link
Contributor

Also, please browse to https://debug-my.firebaseapp.com/ in the same browser/device that is having the problem and attach the output as a gist. This could help identify the protocol layer where the problem is occurring.

@Lunar-Fang-coder
Copy link

i am also facing the same issue.
i am having trouble to fetch data from firebase onto my app
Web Channel Diagnositics.txt

@urlsab
Copy link

urlsab commented Feb 6, 2023

I'm also have the same issue on 9.17.1 version:

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

Please, I have very important project and watch the logs (wich display timeout null with no explanation) solves nothing...

Thanks a lot, a big user of firebase/firestore

@urlsab
Copy link

urlsab commented Feb 6, 2023

*9.17.0 version

@Lunar-Fang-coder
Copy link

i am also facing the same issue. i am having trouble to fetch data from firebase onto my app Web Channel Diagnositics.txt

I solved my error by re initializing my project
It seems that i had an other version of firebase installed on the same folder
Once i re initialized it worked

@dconeybe
Copy link
Contributor

dconeybe commented Feb 6, 2023

@urlsab and @Malik-Usman17 Please capture logs as requested in my previous comments #6993 (comment) and #6993 (comment).

@urlsab
Copy link

urlsab commented Feb 9, 2023

For dconeybe as requested : (i copied what seems to be relevant)

[ 1.425s] [goog.labs.net.webChannel.WebChannelDebug] XMLHTTP Bad status 418 (14597)
Channel closed before test finished.
[those line showed up few times]

1: webchannel.googleapis.com with default options: FAILED (1430ms)
2: webchannel.googleapis.com with detectBufferingProxy: FAILED (923ms)
3: webchannel.googleapis.com with forceLongPolling: FAILED (939ms)
4: webchannel.sandbox.google.com with default options: FAILED (1513ms)
5: webchannel.sandbox.google.com with detectBufferingProxy: FAILED (1018ms)
6: webchannel.sandbox.google.com with forceLongPolling: FAILED (1204ms)
7: Firestore listen test with default options: FAILED (1184ms)
8: Firestore listen test with detectBufferingProxy: FAILED (393ms)
9: Firestore listen test with forceLongPolling: FAILED (381ms)

those are the logs before even i made some action in my project

when i register - the auth of firebase works fine but firestore db has no respne or respone after long time

in chrome console's i'm getting this :

react_devtools_backend.js:4012 [2023-02-09T13:35:36.626Z] @firebase/firestore: Firestore (9.17.1): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
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.

but my internet connection is greate...

for Lunar-Fang-coder : how to re-initialized it ?
just 'npm install firebase' or 'npm update' ? i tried that - didnt help me...

@dconeybe
Copy link
Contributor

dconeybe commented Feb 9, 2023

@urlsab Thanks for the logs. You are definitely having connectivity issues with the Firestore backend. Could you paste the entire output from https://debug-my.firebaseapp.com/ to https://gist.github.com/ and put the link here? Seeing the entire log will help diagnose.

@dconeybe
Copy link
Contributor

dconeybe commented Feb 9, 2023

Just for comparison, here is what I see from https://debug-my.firebaseapp.com/ which indicates a healthy connection to the Firestore backend:

All tests done.
1: webchannel.googleapis.com with default options: SUCCEEDED (1481ms)
2: webchannel.googleapis.com with detectBufferingProxy: SUCCEEDED (1061ms)
3: webchannel.googleapis.com with forceLongPolling: SUCCEEDED (1105ms)
4: webchannel.sandbox.google.com with default options: SUCCEEDED (1509ms)
5: webchannel.sandbox.google.com with detectBufferingProxy: SUCCEEDED (1037ms)
6: webchannel.sandbox.google.com with forceLongPolling: SUCCEEDED (1057ms)
7: Firestore listen test with default options: SUCCEEDED (629ms)
8: Firestore listen test with detectBufferingProxy: SUCCEEDED (283ms)
9: Firestore listen test with forceLongPolling: SUCCEEDED (174ms)

https://gist.github.com/dconeybe/f2618055cef2e8b90524976b013923d3

@Malik-Usman17
Copy link
Author

Please enable debug logging, reproduce the issue, and attach the full logs.

To enable debug logging, call setLogLevel('debug')

https://firebase.google.com/docs/reference/js/firestore_#setloglevel

I couldn't find the way to enable debug logging in react-native project , I am still trying to figuring out how to do it, any help from anyone ???

@urlsab
Copy link

urlsab commented Feb 10, 2023 via email •
edited by dconeybe
Loading

@urlsab
Copy link

urlsab commented Feb 12, 2023 •
edited by dconeybe
Loading

(edited by @dconeybe - I've moved most of the logs to a GitHub Gist: https://gist.github.com/dconeybe/016dd821eb5fae7d3e760a8cdb0a8db0. This makes the comment thread of this issue shorter and easier to navigate)

All tests done.
1: webchannel.googleapis.com with default options: FAILED (1602ms)
2: webchannel.googleapis.com with detectBufferingProxy: FAILED (1125ms)
3: webchannel.googleapis.com with forceLongPolling: FAILED (996ms)
4: webchannel.sandbox.google.com with default options: FAILED (2191ms)
5: webchannel.sandbox.google.com with detectBufferingProxy: FAILED (1002ms)
6: webchannel.sandbox.google.com with forceLongPolling: FAILED (1113ms)
7: Firestore listen test with default options: FAILED (975ms)
8: Firestore listen test with detectBufferingProxy: FAILED (588ms)
9: Firestore listen test with forceLongPolling: FAILED (479ms)

@urlsab
Copy link

urlsab commented Feb 13, 2023

thanks a lot. now what ?

@dconeybe
Copy link
Contributor

@urlsab I'll take a closer look at your logs today or tomorrow. I'll ask my team for help if that doesn't prove fruitful. Then, I may ask for more information from you or suggest a workaround.

@urlsab
Copy link

urlsab commented Feb 13, 2023 via email

@urlsab
Copy link

urlsab commented Feb 15, 2023 via email

@urlsab
Copy link

urlsab commented Feb 15, 2023 via email

@dconeybe
Copy link
Contributor

You are getting the strangest error I've ever seen: HTTP 418 "I'm a teapot"

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418

Is there perhaps a proxy between your device and Firestore that may be refusing the requests and returning the failed HTTP status 418?

Also, please test your app AND browse to https://debug-my.firebaseapp.com/ in the following environments (if possible):

  1. iOS real device
  2. iOS simulator
  3. Android real device
  4. Android emulator

Please reply with the information in a table like this:

Environment App behavior debug-my.firebaseapp.com behavior
iOS real device worked worked
iOS simulator Connection WebChannel transport errored HTTP 418
Android real device ... ...
Android emulator ... ...

@urlsab
Copy link

urlsab commented Feb 16, 2023 via email

@dconeybe
Copy link
Contributor

dconeybe commented Feb 16, 2023 •
edited
Loading

Update: @Malik-Usman17 pointed out that you are not the OP. Sorry for getting that mixed up. For posterity, I've left my original comment intact below.

@urlsab In the opening comment, you mention that "I am running my app on real device (not emulator)" so some software running on your computer shouldn't affect the behavior on a real device, right? Also, what kind of "device" were you using (Android, iPhone)? Do you see this problem on the emulator/simulator as well as a real device?

I realize it will be a bit of work to put together the table that I asked for in a previous comment but that will greatly help narrow down the scope of the problem. As it is, all I see so far is that you get some confusing connectivity error and I'm trying to narrow down the source of the error to focus the investigation. And the debug web page may produce different results on the real devices and emulators, which will be useful information to help narrow down the problem.

In any case, I'll try to work with whatever information you're able to provide.

@Malik-Usman17
Copy link
Author

Infact that was me, that said it about the real device, I was running my app on android real device.

And can you please help in that below my comment

Please enable debug logging, reproduce the issue, and attach the full logs.
To enable debug logging, call setLogLevel('debug')
https://firebase.google.com/docs/reference/js/firestore_#setloglevel

I couldn't find the way to enable debug logging in react-native project , I am still trying to figuring out how to do it, any help from anyone ???

@dconeybe
Copy link
Contributor

@Malik-Usman17 Oh you're right. I got the users mixed up. Thanks for correcting that.

When you say "I couldn't find the way to enable debug logging in react-native project" could you be more specific? Are you not able to invoke the setLogLevel() function? Do you invoke it, but can't see the log anywhere? Or do you invoke it and it throws an exception?

My colleague who is more familiar with react-native than me pointed out two potentially-useful resources.

If the problem is that you enable debug logging but don't see any logs, it appears that there was a range of react-native versions that failed to emit debug logs. If you're using RN 61+ then you should be good in this respect (https://stackoverflow.com/questions/46417066/react-native-console-debug-does-not-show-log-using-log-ios)

Another salient point is you have to use react-native log-ios or react-native log-android: https://stackoverflow.com/questions/30115372/how-to-do-logging-in-react-native

@dconeybe
Copy link
Contributor

@urlsab I think that your issue is distinct from that reported by the OP. They have the same generic error but apparently different root causes. To avoid conflating two issues in this GitHub issue, please open a new issue for your problem. The information you provide in the new issue template will also be quite enlightening. Feel free to @mention me and I'll continue working with you.

@Malik-Usman17
Copy link
Author

Malik-Usman17 commented Feb 18, 2023 •
edited
Loading

@dconeybe >

I solved this error, but I didn't understand the core concept about it , well what I did it earlier were:

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

const firebaseConfig = {
apiKey: "my_api_key",
authDomain: "signal-app-clone-7d103.firebaseapp.com",
projectId: "signal-app-clone-7d103",
storageBucket: "signal-app-clone-7d103.appspot.com",
messagingSenderId: "120268271690",
appId: "1:120268271690:web:14fb83293caae9a504b6b3"
};

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

export { db, auth }`

So well somehow I find the solution and then turned my above firebase config file code the this:
`import { initializeApp } from "firebase/app";
import { getFirestore, initializeFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
apiKey: "my_api_key",
authDomain: "signal-app-clone-7d103.firebaseapp.com",
projectId: "signal-app-clone-7d103",
storageBucket: "signal-app-clone-7d103.appspot.com",
messagingSenderId: "120268271690",
appId: "1:120268271690:web:14fb83293caae9a504b6b3"
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app)

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

export { db, auth };`

and it worked it, now I'm making the collection, adding the documents in a collection, getting documents or collections from firestore database all things working fine now.

@nivaveronese
Copy link

Malik-Usman17

I changed firebase.js the same way as Malik-Usman17 and it worked. thanks

@urlsab
Copy link

urlsab commented Feb 18, 2023 via email

@urlsab
Copy link

urlsab commented Feb 19, 2023

Amazing !!! @Malik-Usman17 solution is working !!! so it's not a problem in my machine or 3rd party....
thanks a lot @Malik-Usman17, and @dconeybe- thank you for your time.

Now we need to understand how simple method update changed all ?...and why it's not in firebase docs ?

@Malik-Usman17
Copy link
Author

Well I have a same question that I didn't find this on officical firebase docs

@dconeybe
Copy link
Contributor

Oh wow I would not have expected long polling to fix your issues. Good find! There must be a proxy between your apps and the Firestore servers that behaves in a way that we are not accustomed to. For full details about long polling, see #1674.

But here is the summary: normally Firestore clients open a long-lived connection with the Firestore server over HTTP port 80. This usually works; however, some proxy servers don't play well with long-lived HTTP connections. Long polling works around this by opening a new connection every 30 seconds to emulate a long-lived connection. So long polling is less efficient, but it is the only workaround we have for this problem, and it works quite well.

You can visually see the long polling if you open up the "network" tab of chrome (e.g. #1674 (comment)) as a new connection will open every 30 seconds.

Since everyone has reported that their presenting issues have been fixed by enabling long polling, I'm going to close this issue. Let me know if you think this issue should remain open.

@leons1767
Copy link

I had the same issue, and it took me quite a while before I found this issue post. I'm using Expo, and the standard config works fine with ExpoGo. However, it started throwing "Could not reach Cloud Firestore backend" when I use Expo development build. The strange part is some Firestore api work while some don't. For those that didn't work, I had "Connection WebChannel transport errored", that led me to this post. Thanks to @Malik-Usman17, I can move on. I hope this can be put in the java SDK documentation.

@superphil0
Copy link

superphil0 commented Mar 10, 2023 •
edited
Loading

I encountered this issue again and have a minimal reproduction code available.
If I run the same code on react in the browser it works, if I run it in react native on iOS simulator the timeout appears. If I try to add long polling I get a different error (in any case it cant be the reason, because it works from the same machine/network without long-polling) @dconeybe happy to share my exact setup if useful.

It might have todo with the underlying network stack of the machine you are on?

If I run my react code on the iOS simulator in the browser it also works.
Maybe it could have something to do with the hermes JS engine? I will investigate

Update:
I built my app on iOS with hermes disabled.
However, even then I had no luck, neither with experimentalForceLongPolling nor without

BUT, when I use the debugger in chrome, it finally starts working (with experimentalForceLongPolling set to true, not without though)

using react-native 0.71.3 and firestore 9.17.2

@superphil0 superphil0 mentioned this issue Mar 11, 2023
Closed
@urlsab
Copy link

urlsab commented Mar 12, 2023

Before you close this issue, please update the docs of firestore. thanks

@chetan-2002
Copy link

Hey @dconeybe, I am still having that issue even after setting the property experimentalForceLongPolling to true.

@urlsab
Copy link

urlsab commented Mar 23, 2023

Hi chetan-2002, want to show us part of your code? maybe it comes from other parts in your app...

@dconeybe
Copy link
Contributor

@chetan-2002 Please open a new GitHub issue with your specific issue, logs, sdk versions, etc.

@firebase firebase locked and limited conversation to collaborators Mar 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@dconeybe dconeybe

Labels
api: firestore needs-attention
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests