React Native to firestore：Firestore（8.2.1）：连接WebChannel传输错误

Posted 2023-02-22

【中文标题】React Native to firestore：Firestore（8.2.1）：连接WebChannel传输错误

【英文标题】：React Native to firestore: Firestore (8.2.1): Connection WebChannel transport errored

【发布时间】：2021-04-12 02:28:06

【问题描述】：

我创建了简单的 React Native 屏幕，可以将数据存储到 Firestore。我试过下面的代码，但它没有工作，而不是抛出一些错误。谁能帮帮我？

我的代码：

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

错误

    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 数据库即可。

【问题讨论】：

这似乎非常接近here 上的示例。在我看来，您的数据未正确发送到 Firestore。

【参考方案1】：

在做了很多事情之后，我得到了解决该错误的临时解决方案。解决方案是在 firebase 初始化之后添加以下代码。我不知道这是正确的解决方案，但现在工作正常。

firebase.initializeApp(firebaseConfig);

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

【参考方案2】：

在实现 Firestore 云功能（触发器）时，我正在使用基于 CRA/React-Admin 的常规应用程序，并且也看到了这个问题。有一段时间，我被关于 related issue 和 this other one 的建议误导了，这些建议正在谈论将 experimentalForceLongPolling 标志设置为 true。该解决方法对我不起作用。

相反，我意识到原因很简单（更像是我的一个愚蠢错误）：我的触发器注册了格式不正确的文档路径。也就是说，我有一个看起来像这样的云函数：

exports.onCreateFruitStand = functions.firestore
.document("vendors/vendorId/standsstandId")
.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 函数应该只是说文档路径格式不正确。

【参考方案3】：

它对我有用：

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

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

【参考方案4】：

就我而言，我应该写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://***.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.

【参考方案5】：

TL;DR

尝试experimentalAutoDetectLongPolling 和experimentalForceLongPolling。如果experimentalAutoDetectLongPolling 有效，用它代替experimentalForceLongPolling！

---

google (https://github.com/firebase/firebase-js-sdk/issues/1674) 创建了一个 RFC，它正在搜索与 experimentalForceLongPolling 和 experimentalAutoDetectLongPolling 相关的可重现案例，以解决与 Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. 错误相关的问题，尽管连接正常。 根据experimentalForceLongPolling 设置的文档，错误似乎与某些代理和/或防病毒软件有关：

这避免了与某些代理、防病毒软件等不兼容的问题，这些问题会无限期地不正确地缓冲流量。

但是，启用experimentalForceLongPolling 可能会导致性能下降，因为尽管不需要长轮询，但可能会使用：

不过，使用此选项会导致性能下降。

使用experimentalAutoDetectLongPolling 时不是的情况。顾名思义，它试图区分需要长轮询和不需要长轮询的情况。

另一个区别是experimentalAutoDetectLongPolling 将来可能会默认启用。 experimentalForceLongPolling 很可能会被弃用。

【参考方案6】：

在我的情况下，删除它可以解决问题。

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

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