CODEWITHSUNDEEP
reactjsfirebasereact-nativegoogle-cloud-firestore
Elavarasan r
Elavarasan r

Reputation: 1285

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

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.

Upvotes: 12

Views: 14743

Answers (11)

Pedro Borges
Pedro Borges

Reputation: 1

I have been this issue:

FirebaseError: initializeFirestore() has already been called with different options. To avoid this error, call initializeFirestore() with the same options as when it was originally called, or call getFirestore() to return the already initialized instance.

Upvotes: 0

Vitor Barbosa
Vitor Barbosa

Reputation: 31

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 })

Upvotes: 1

JabariD
JabariD

Reputation: 33

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.

Upvotes: 1

Matt
Matt

Reputation: 161

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);

Upvotes: 0

Shyamaprasad K
Shyamaprasad K

Reputation: 61

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

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

Upvotes: 1

saranpol
saranpol

Reputation: 2197

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.

Upvotes: 0

aseidma
aseidma

Reputation: 752

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.

Upvotes: 3

TomTimmy
TomTimmy

Reputation: 11

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.

Upvotes: 1

Mazhar k
Mazhar k

Reputation: 251

It worked for me:

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

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

Upvotes: 2

kip2
kip2

Reputation: 6863

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.

Upvotes: 0

Elavarasan r
Elavarasan r

Reputation: 1285

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

Upvotes: 13

Related Questions