初始化RTCPeerConnection报JSON对象循环结构错误如何解决

该错误本质是JS侧传给原生桥接层的RTCConfiguration对象在序列化时检测到循环引用，按以下顺序排查即可：

• 第一步先做最小场景验证，排除业务逻辑干扰
  完全跳过接口取ICE服务器的逻辑，直接写死最简配置运行：

  // 不要加任何业务自定义属性，只保留必填项
  const testConn = new RTCPeerConnection({
    iceServers: [{ urls: "stun:stun1.l.google.com:19302" }]
  });
  

  • 如果这行代码依然报错，问题出在依赖配置层面，和你写的iceServers映射逻辑无关
  • 如果这行代码运行正常，问题出在你构造的配置对象本身，直接跳第三步
• 第二步修复依赖配置问题（最小复现报错时处理）
  • 核对当前安装的react-native-webrtc版本与Expo SDK版本的对应关系，大版本不匹配时JS层与原生层的桥接序列化逻辑会不兼容，把普通对象误判为带循环引用的结构
  • 重新执行pod install更新iOS依赖，检查Podfile中是否正确引入WebRTC相关编译配置，有没有漏加@config-plugins/react-native-webrtc的插件配置（eject后的Expo项目必须配置该插件才能正常运行react-native-webrtc）
  • 关闭远程JS调试模式，Expo开发客户端的旧版远程调试桥接存在已知bug，会给普通JS对象附加不可枚举的循环引用属性，触发该报错
• 第三步修复配置对象的循环引用问题（最小复现正常时处理）
  不要直接把接口返回的原始对象、状态管理库（Redux/MobX等）返回的Proxy代理对象传入构造函数，这些对象往往自带不可见的循环引用属性。先做一次纯数据深拷贝，提前在JS层完成序列化过滤：

  // 先通过JSON序列化剥离所有代理属性、非纯数据属性
  const pureIceServers = data.iceServers.map(s => ({
    urls: [s.uri],
    username: s.username,
    credential: s.credential
  }));
  const pureConfig = JSON.parse(JSON.stringify({
    iceServers: pureIceServers
  }));
  const conn = new RTCPeerConnection(pureConfig);
  

  如果执行JSON.stringify(pureConfig)时JS层直接报循环引用错误，检查map逻辑中是否不小心将外层data对象、DOM/原生类实例等非纯数据结构混入了iceServers配置项。

内容的提问来源于stack exchange，提问作者H.Gndgn