reactjs 本机对Firestore的React:火灾恢复(8.2.1):连接WebChannel传输出错

nc1teljy  于 2023-02-15  发布在  React
关注(0)|答案(8)|浏览(133)

我已经创建了简单的React Native屏幕,可以存储数据到firestore。我已经尝试了下面的代码,但它没有工作,而不是抛出一些错误。有人可以帮助我吗?

    • 我的密码:**
    • 应用程序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>
  );
 }
}
    • 错误**
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"}
    • 预期:**

只需将给定数据写入firestore数据库。

s6fujrry

s6fujrry1#

经过大量的工作,我得到了一个临时的解决方案。解决方案是,只是添加下面的代码后,firebase初始化。我不知道这是正确的解决方案,但现在工作正常。

firebase.initializeApp(firebaseConfig);

firebase.firestore().settings({ experimentalForceLongPolling: true }); //add this..
bcs8qyzn

bcs8qyzn2#

这对我很有效:

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

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

vbopmzt13#

在我的例子中,我应该写databaseURL

const firebaseConfig = {...}

但我没有,而且这很关键.
之后,我写了这个,

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

Firestore工作得很好。
请参考以下链接
https://docs.expo.dev/guides/using-firebase/
https://stackoverflow.com/questions/40168564/where-can-i-find-my-firebase-reference-url-in-firebase-account#:~:text=转到%20身份验证%20选项卡%20并且,此%20是您%20所需的%20字段。

cpjpxq1n

cpjpxq1n4#

    • TL; DR**

尝试experimentalAutoDetectLongPollingexperimentalForceLongPolling。如果experimentalAutoDetectLongPolling工作,请使用它而不是experimentalForceLongPolling!
Google(https://github.com/firebase/firebase-js-sdk/issues/1674)创建了一个RFC,用于搜索与experimentalForceLongPollingexperimentalAutoDetectLongPolling相关的可重现案例,experimentalAutoDetectLongPolling是与Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.错误相关的问题的修复程序,尽管连接正常。根据experimentalForceLongPolling设置的文档,错误似乎与某些代理和/或防病毒程序相关:
这避免了与某些代理、防病毒软件等不正确地无限期缓冲流量的不兼容问题。
但是,启用experimentalForceLongPolling可能会导致性能降低,因为可能会使用长轮询(尽管不需要):
但是,使用此选项会导致性能下降。
使用experimentalAutoDetectLongPolling不是这种情况,顾名思义,它试图区分需要长轮询和不需要长轮询的情况。
另一个区别是experimentalAutoDetectLongPolling将来可能会默认启用。
experimentalForceLongPolling很可能会被弃用**。

nom7f22z

nom7f22z5#

将此行添加到firebase.initializeApp(firebaseConfig)行下面。

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

bvjveswy6#

我在一个常规的基于CRA/React-Admin的应用程序上实现Firestore云功能(触发器),也看到了这个问题。有一段时间,我有点被related issuethis other one的建议误导了,他们说要将experimentalForceLongPolling标志设置为true。这个解决方案对我不起作用。
相反,我意识到原因很简单(更像是我犯了个愚蠢的错误):我的触发器注册了一个格式不正确的文档路径。也就是说,我有一个云函数,看起来像这样:

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

我的Firestore模拟器没有响应任何新创建的文档。关键是需要将文档路径更改为"vendors/{vendorId}/stands/{standId}"(注意缺少的/)。从某种意义上说,发送到客户端的错误消息是误导性的,Firestore函数应该只说文档路径格式不正确。

vh0rcniy

vh0rcniy7#

在我的情况下,删除这个可以修复问题。

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

我认为enablePersistence()可能会影响一些网络连接设置、防病毒或防火墙。

e3bfsja2

e3bfsja28#

如果你使用的是Firebase v9,那么答案需要调整。如果你和我一样,你遇到这个问题是因为你的应用运行正常,直到你尝试使用Cypress测试你的应用,目标是Firestore模拟器。解决方案是相同的:使用experimentalAutoDetectLongPolling设置。这是我自己配置的:
此配置的工作原理:

// 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, });

此配置将生成"连接WebChannel传输错误"警告和"最近的错误:Firebase错误:[代码=不可用]"错误:

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

相关问题