Firebase Firestore 8.2.2 WebChannel transport errored报错修复

使用Firebase 8.2.2版本Firestore服务时，会触发@firebase/firestore: Firestore (8.2.2): Connection WebChannel transport errored报错，常规长轮询配置修复无效。

相关参考代码 #

• Firestore基础配置代码：
• Firestore SET写入操作代码：

已尝试无效的修复方案 #

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

完整报错日志 #

WARN  [2022-07-07T23:56:51.946Z]  @firebase/firestore: Firestore (8.2.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": "qWV1iUI-i7uAv4TY0w-d_A", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 65073, "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": "Gw6V9oY7XHlRiEFuqqRCs5zpnZf9pAwBw2sVbO1PSVM", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/banana-ee2ef/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": "qWV1iUI-i7uAv4TY0w-d_A", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 65073, "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": "Gw6V9oY7XHlRiEFuqqRCs5zpnZf9pAwBw2sVbO1PSVM", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/banana-ee2ef/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"}

可落地的修复方案 #

按优先级依次排查：

1. 修正settings调用时机，补全缺失配置
   settings()必须在所有Firestore读写操作之前调用，初始化完Firebase应用立刻配置，同时加上useFetchStreams: false参数——8.x版本默认开启的流式fetch请求很容易被代理、防火墙拦截，是触发该报错的核心原因之一。
   正确初始化代码参考：

   // 1. 初始化Firebase应用
   firebase.initializeApp(yourFirebaseConfig);
   // 2. 立刻获取db实例并配置settings，不要延后到读写操作前
   const db = firebase.firestore();
   db.settings({
     experimentalForceLongPolling: true,
     useFetchStreams: false
   });
   // 3. 后续再执行set/get等读写操作
   

   注意不要在settings里加无关的merge: true参数，该参数是set写入方法的配置项，不属于settings配置，加了会导致配置静默失效。

2. 升级到8.x稳定最终版本
   8.2.2属于8.x早期版本，存在已知的WebChannel连接层bug，直接升级到firebase@8.10.1即可，该版本是8.x分支最终稳定版，API完全向下兼容，不需要修改业务代码，修复了大量网络连接异常问题。
   升级命令：

   npm install firebase@8.10.1
   // 或yarn
   yarn add firebase@8.10.1
   

3. 校验Firestore安全规则
   安全规则拦截写入请求时，也会先抛出WebChannel传输错误再触发权限报错。测试阶段可以临时放开规则验证是否为规则问题：

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /{document=**} {
         allow read, write: if true;
       }
     }
   }
   

   验证写入正常后，再调整为符合业务安全要求的规则即可。

4. 网络环境排查
   如果是在国内网络环境、或企业内网环境使用，确认firestore.googleapis.com域名没有被拦截，必要时配置可正常访问的代理。

内容的提问来源于stack exchange，提问作者me ako