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

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 5

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

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