React Native to firestore: Firestore (8.2.1): Connection WebChannel transport errored
Asked Answered
E

10

12

I have created simple React Native screen which can store data to firestore. I have tried below code but it did not work rather than throw some error. anyone can help me out?

My Code:

App.js

import React, { Component } from 'react';
import {StyleSheet,Text,View,TextInput,Button,TouchableHighlight} from 'react-native';

import firebase from 'firebase';
import firestore from '@react-native-firebase/firestore';

const firebaseConfig = {
  apiKey: "*********************",
  authDomain: "test-c78ec.firebaseapp.com",
  projectId: "test-c78ec",
  storageBucket: "test-c78ec.appspot.com",
  messagingSenderId: "106189113329",
  appId: "1:106189113329:web:4bf80ec51eba69ab042650",
  measurementId: "G-875ZSQLZS4"
};
firebase.initializeApp(firebaseConfig);

 export default class App extend components{

check2(){
  console.log("level strarted");
  firebase
  .firestore()
  .collection("MyCollection")
  .doc("mydoc")
  .set({
    key: "2",
    value: "World",
  })
  .then((ref) => { console.log(ref);
    console.log("sucessssssssssssssss")
   });
}

render(){
 return(
  <View>
    <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() =>    this.check2('login')}>
          <Text style={styles.loginText}>Store data</Text>
        </TouchableHighlight>
   </View>
  );
 }
}

Error

    WARN     [2021-01-06T10:27:51.153Z]  @firebase/firestore: Firestore (8.2.1): Connection WebChannel transport errored: {"a": {"C": null, "K": [Circular], "a": {"A": 0, "B": [U], "C": true, "F": 45000, "G": false, "I": true, 
"J": -1, "K": "IKeNE9pC779MSM5Rj_dnMg", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 45498, "Ta": 1, "U": true, "Ua": 10000, "V": 4, "X": false, "Y": [Object], "a": null, "b": [zd], "c": 
[bc], "f": [Z], "fa": false, "g": [Array], "ga": undefined, "h": null, "ha": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "i": null, "ia": "", "j": null, "ja": 8, "l": null, "m": null, "ma": 12, "na": [U], "o": 3, "oa": 
600000, "pa": "ATXNDTEvJ_SpMuY50LXD23HPyh9-AVCM", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/test-c78ec/databases/(default)"}, "c": {"a": [Object], "b": 4, "src": [Circular]}, "f": {"a": [Circular]}, "i": undefined, "j": false, "l": true, "m": true, "o": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel"}, "defaultPrevented": false, "status": 1, "target": {"C": null, "K": [Circular], "a": {"A": 0, "B": [U], "C": true, "F": 45000, "G": false, "I": true, "J": -1, "K": "IKeNE9pC779MSM5Rj_dnMg", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 45498, "Ta": 1, "U": true, "Ua": 10000, "V": 4, "X": false, "Y": [Object], "a": null, "b": [zd], "c": [bc], "f": [Z], "fa": false, "g": [Array], "ga": undefined, "h": null, "ha": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "i": null, "ia": "", "j": null, "ja": 8, "l": null, "m": null, "ma": 12, "na": [U], "o": 3, "oa": 600000, "pa": "ATXNDTEvJ_SpMuY50LXD23HPyh9-AVCM", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/test-c78ec/databases/(default)"}, "c": {"a": [Object], "b": 4, "src": [Circular]}, "f": {"a": [Circular]}, "i": undefined, "j": false, "l": true, "m": true, "o": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel"}, "type": "c"}

Expected:

Just write given data to firestore Database.

Ecuador answered 6/1, 2021 at 10:32 Comment(1)
This seems really close to the example over here. Seems to me like your data is not being correctly sent to Firestore.Ramonitaramos
E
13

After lots of stuff, I got a temporary solution for that error. The solution is that just add the below code after firebase Initializing. I don't know this is the right solution but working fine now.

firebase.initializeApp(firebaseConfig);

firebase.firestore().settings({ experimentalForceLongPolling: true }); //add this..
Ecuador answered 6/3, 2021 at 13:36 Comment(1)
would you care to share what this is really doing?Midway
N
3

TL;DR

Try both experimentalAutoDetectLongPolling and experimentalForceLongPolling. If experimentalAutoDetectLongPolling works, use it instead of experimentalForceLongPolling!


There has been an RFC created by google (https://github.com/firebase/firebase-js-sdk/issues/1674) which is searching for reproducible cases related to experimentalForceLongPolling and experimentalAutoDetectLongPolling being the fix for issues related to Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. errors despite having a healthy connection. Errors seem to be related to certain proxies and/or antiviruses as per the documentation on the experimentalForceLongPolling setting:

This avoids incompatibility issues with certain proxies, antivirus software, etc. that incorrectly buffer traffic indefinitely.

However, enabling experimentalForceLongPolling can lead to lower performance as long polling might be used despite not being needed:

Use of this option will cause some performance degradation though.

This is not the case when using experimentalAutoDetectLongPolling. As the name implies, it tries to differentiates between cases where long polling is needed and cases in which it isn't.

Another difference is that experimentalAutoDetectLongPolling will likely become enabled by default in the future. experimentalForceLongPolling will most likely be deprecated.

Nazario answered 12/1, 2022 at 14:27 Comment(0)
I
2

It worked for me:

//Write this line below of firebase.initializeApp(firebaseConfig)

firebase.firestore().settings({ experimentalForceLongPolling: true });
Imperforate answered 22/5, 2021 at 8:35 Comment(0)
H
1

In my case, I should've written databaseURL in

const firebaseConfig = {...}

but I didn't... and That was critical.

After, I write this,

    const firebaseConfig = {
      databaseURL: 'https://{project-id}.firebaseio.com'
    
      apiKey: ...,
      authDomain: ...,
      projectId: ...,
      storageBucket: ...,
      messagingSenderId: ...,
      appId: ...,
      measurementId: ...,
    };

Firestore works well.

Please refer to the following links

https://docs.expo.dev/guides/using-firebase/

https://mcmap.net/q/299961/-where-can-i-find-my-firebase-reference-url-in-firebase-account#:~:text=Go%20to%20Authentication%20Tab%20and,this%20is%20your%20required%20field.

Hold answered 15/8, 2021 at 18:28 Comment(0)
S
1

Adding this line under the firebase.initializeApp(firebaseConfig) line.

firebase.firestore().settings({ experimentalForceLongPolling: true, merge:true });
Shcherbakov answered 10/5, 2022 at 6:47 Comment(1)
I think the suggestion here of merge:true is a good one, just in case the settings are being composed across multiple settings().Vesting
C
1

I got this same error.

Here's what worked for me, in case the other fixes do not apply:

The database id is important. When creating a Firebase database, if you set it to a different database id, it will not work. I kept it as (default) and it worked. So when initially creating the database if you are using a different database id, do not use https://firebase.google.com/docs/reference/js/firestore_.md#getfirestore_cf608e1. Use https://firebase.google.com/docs/reference/js/firestore_.md#initializefirestore_fc7d200.

Coinage answered 30/6, 2024 at 5:9 Comment(1)
omg thanks! I lost so much time to find out what was the errorSufficiency
K
0

I am on a regular CRA/React-Admin based app when implementing Firestore cloud functions (triggers) and saw this problem also. For a while, I was kinda misled by suggestions on a related issue and this other one that were talking about setting a experimentalForceLongPolling flag to true. That workaround didn't work for me.

Instead, I realized the cause was a simple issue (more like a foolish mistake on my part): my triggers were registering an incorrectly-formatted document path. That is, I had a cloud function that looked like this:

exports.onCreateFruitStand = functions.firestore
.document("vendors/{vendorId}/stands{standId}")
.onCreate(async (change, context) => {
  console.log(`vendors.stands.onCreate: vendors/${context.params.vendorId}/stands/${context.params.standId}`);
  const data = change.data(); // grab the latest data
  ...
});

My Firestore emulator wasn't responding to any new documents being created. The key realization was the need to change the document path to "vendors/{vendorId}/stands/{standId}" (note the / that was missing). In a sense, the error message being sent to the client was misleading, Firestore functions should just say that the document path is incorrectly formatted.

Keilakeily answered 19/3, 2021 at 18:52 Comment(1)
This is weirdly enlightening for a "dumb" issue/solution. The path isn't technically malformed (at least assuming the substitution values are sane), the target document simply does not exist (or, tbf, a path with an odd number of tokens would presently only ever be a collection, not a document). And if Firestore throws errors that read as connectivity or server issues for valid listeners on absent documents, that could have sizable connotations on large systems with lots of moving or transient data!Fugato
A
0

In my case removing this fixes the problem.

const db = firebase.firestore()
db.settings({
    cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED
})
db.enablePersistence()

I think enablePersistence() may effect some network connection settings, antivirus or firewall.

Abb answered 5/2, 2022 at 11:48 Comment(0)
S
0

The answer needs a tweak if you use Firebase v9. If you're like me, you encountered this problem because your app works fine until you try to test your app with Cypress targeting the Firestore emulator. The solution is the same: use the experimentalAutoDetectLongPolling setting. This is how I configured it for myself:

This config WORKS:

// You've initialized a Firebase app somewhere...
const app = initializeApp(firebaseConfig);

// WORKS: Enable long polling auto-detection when initializing Firestore
const db = initializeFirestore(app, { experimentalAutoDetectLongPolling: true, });

This config produces a "Connection WebChannel transport errored" warning and "Most recent error: FirebaseError: [code=unavailable]" error:

// You've initialized a Firebase app somewhere...
export const app = initializeApp(firebaseConfig);

// SOMETIMES BREAKS: Call getFirestore the way the Firebase docs recommend.
const db = getFirestore(app);
Salutatory answered 14/2, 2023 at 18:43 Comment(0)
V
0

Here's how I'm doing it in 2024, using the modular API.

Instead of this:

import { getFirestore } from 'firebase/firestore'

const db = getFirestore(app)

Do this:

import { initializeFirestore } from 'firebase/firestore'

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

If you need a databaseId you can do:

const db = initializeFirestore(app, { experimentalAutoDetectLongPolling: true }, 'your-database-id')

And for the full code:

import { initializeApp } from 'firebase/app'
import { initializeFirestore } from 'firebase/firestore'

const config = {...}

const app = initializeApp(config)
const db = initializeFirestore(app, { experimentalAutoDetectLongPolling: true })
Vocation answered 29/7, 2024 at 9:24 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.