From 4c58dee371ffa896f95ff2d338531f5958524d0a Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Sat, 15 Nov 2025 12:34:51 +0100
Subject: [PATCH] Add detailed ICE connection debugging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added comprehensive logging for ICE gathering state, connection state, and candidate gathering to help diagnose connection issues. Properly chains event handlers to avoid breaking existing connection logic.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.jsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/App.jsx b/src/App.jsx
index fd7f3d4..2b446ad 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -104,6 +104,9 @@ export default function App() {
       // Create connection using the manager
       const conn = client.createConnection(RTC_CONFIG);
 
+      // Add ICE debugging
+      addIceLogging(conn);
+
       // Setup event listeners
       conn.on('connecting', () => {
         updateConnectionStatus(conn.id, 'connecting');
@@ -188,6 +191,9 @@ export default function App() {
       // Create connection using the manager
       const conn = client.createConnection(RTC_CONFIG);
 
+      // Add ICE debugging
+      addIceLogging(conn);
+
       // Setup event listeners
       conn.on('connecting', () => {
         updateConnectionStatus(conn.id, 'connecting');
@@ -248,6 +254,50 @@ export default function App() {
     ));
   };
 
+  // Add ICE debugging to a connection (without overwriting existing handlers)
+  const addIceLogging = (conn) => {
+    const pc = conn['pc']; // Access underlying peer connection for debugging
+    if (pc) {
+      // Store original handlers
+      const originalIceCandidate = pc.onicecandidate;
+      const originalGatheringStateChange = pc.onicegatheringstatechange;
+      const originalIceConnectionStateChange = pc.oniceconnectionstatechange;
+      const originalConnectionStateChange = pc.onconnectionstatechange;
+
+      // Wrap handlers to add logging
+      pc.onicecandidate = (event) => {
+        if (event.candidate) {
+          console.log('🧊 ICE candidate gathered:', {
+            type: event.candidate.type,
+            protocol: event.candidate.protocol,
+            address: event.candidate.address,
+            port: event.candidate.port,
+            candidate: event.candidate.candidate
+          });
+        } else {
+          console.log('🧊 ICE gathering complete');
+        }
+        // Call original handler
+        if (originalIceCandidate) originalIceCandidate.call(pc, event);
+      };
+
+      pc.onicegatheringstatechange = (event) => {
+        console.log('🧊 ICE gathering state:', pc.iceGatheringState);
+        if (originalGatheringStateChange) originalGatheringStateChange.call(pc, event);
+      };
+
+      pc.oniceconnectionstatechange = (event) => {
+        console.log('🧊 ICE connection state:', pc.iceConnectionState);
+        if (originalIceConnectionStateChange) originalIceConnectionStateChange.call(pc, event);
+      };
+
+      pc.onconnectionstatechange = (event) => {
+        console.log('🔌 Connection state:', pc.connectionState);
+        if (originalConnectionStateChange) originalConnectionStateChange.call(pc, event);
+      };
+    }
+  };
+
   // Send message
   const handleSendMessage = (connection) => {
     if (!messageInput.trim() || !connection.channel) return;