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

Question

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.

Answer 1

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..

Answer 2

It worked for me:

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

firebase.firestore().settings({ experimentalForceLongPolling: true });

Answer 3

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://stackoverflow.com/questions/40168564/where-can-i-find-my-firebase-reference-url-in-firebase-account#:~:text=Go%20to%20Authentication%20Tab%20and,this%20is%20your%20required%20field.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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

firebase.firestore().settings({ experimentalForceLongPolling: true, merge:true });