xtr.dev/rondevu-demo
1
0
Fork 0
mirror of https://github.com/xtr-dev/rondevu-demo.git synced 2025-12-10 10:53:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add detailed ICE connection debugging

Browse Source 
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>
This commit is contained in:
Bas van den Aakster
2025-11-15 12:34:51 +01:00
parent e4868c085b
commit 4c58dee371
1 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/App.jsx
View File

@@ -104,6 +104,9 @@ export default function App() {
// Create connection using the manager // Create connection using the manager
const conn = client.createConnection(RTC_CONFIG); const conn = client.createConnection(RTC_CONFIG);
// Add ICE debugging
addIceLogging(conn);
// Setup event listeners // Setup event listeners
conn.on('connecting', () => { conn.on('connecting', () => {
updateConnectionStatus(conn.id, 'connecting'); updateConnectionStatus(conn.id, 'connecting');
@@ -188,6 +191,9 @@ export default function App() {
// Create connection using the manager // Create connection using the manager
const conn = client.createConnection(RTC_CONFIG); const conn = client.createConnection(RTC_CONFIG);
// Add ICE debugging
addIceLogging(conn);
// Setup event listeners // Setup event listeners
conn.on('connecting', () => { conn.on('connecting', () => {
updateConnectionStatus(conn.id, '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 // Send message
const handleSendMessage = (connection) => { const handleSendMessage = (connection) => {
if (!messageInput.trim() || !connection.channel) return; if (!messageInput.trim() || !connection.channel) return;