React Native repeated timeouts writing collection to firestore@firebase/firestore: Firestore (8.4.2): Connection WebChannel transport errored

[DeanMcAuleyH]

• Operating System version: Windows 10 Home 09041.928
• Browser version: Chrome 90.0.4430.85
• Firebase SDK version: 8.4.2
• Firebase Product: Firestore

Hi, I hope this is in the right place.
I am trying to write a user to a firestore collection from a react native app. The user gets created in firebase fine under authentication but it then hangs on the firebase.firestore().collection('users').doc(uid).set('data').

After a few minutes I get a warning: "firestore@firebase/firestore: Firestore (8.4.2): Connection WebChannel transport errored"

I will continue getting this warning every few minutes and sometimes after 20 mins or so the collection might be written to firestore.

I assumed it might have something to do with another dependency but I created a basic app that just calls the relevant code on load and the same warning occurs. I've tried on both a physical device and android emulator.

[Mon May 03 2021 20:10:00.514] WARN [2021-05-03T19:09:59.659Z] @firebase/firestore: Firestore (8.4.2): 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": "YVo8LIfgea1aNP9qjxndLw", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 42934, "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": "d-z7TK6teljL24V0rHxioKAXqHvBs4s5vYUB2chdUqs", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/reel-f2939/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": "YVo8LIfgea1aNP9qjxndLw", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 42934, "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": "d-z7TK6teljL24V0rHxioKAXqHvBs4s5vYUB2chdUqs", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/reel-f2939/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"}

Relevant Code:

import '@firebase/auth';
import '@firebase/firestore';

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxx",
    projectId: "xxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxx"
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export { firebase };


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { firebase } from '../src/firebase'

const handleSubmit = (email,password) => {
  console.log(email + password);
  firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((response) => {
          const uid = response.user.uid
          const data = {
              id: uid,
              email
          };
          const usersRef = firebase.firestore().collection('users')
          usersRef
              .doc(uid)
              .set(data)
              .then(() => {
                  console.log('please get here')
              })
              .catch((error) => {
                console.log('error get here')
              });
      })
      .catch((error) => {
        console.log('outer error get here ' + error)
  });
}

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        onPress={handleSubmit('f@d.com', 'pass123')}
        title='test'
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[looptheloop88]

Hi @DeanMcAuleyH, please try to use experimentalForceLongPolling in your Firestore settings. See below:

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

[DeanMcAuleyH]

@looptheloop88 Thanks very much for your answer. This appears to have fixed my issue. I actually saw this in a stack overflow answer but the author called it a temporary solution so I was unsure if I should use it and if there was maybe an official way of getting past it.