Skip to main content

🔧 Streaming Debug Guide

🚨 Emergency Fixes Applied​

Issue 1: React Hooks Order Error ✅ FIXED​

Problem: "React has detected a change in the order of Hooks called by SessionContainer" Cause: WebSocket subscription hook was re-subscribing on every state change Fix:

  • Removed unstable dependencies from useSubscribeChatCompletion
  • Made message handler truly stable with only sessionId and queryClient dependencies
  • Removed problematic telemetry hooks that caused order changes

Issue 2: WebSocket JSON Parse Errors ✅ FIXED​

Problem: SyntaxError: Unexpected token 'T', "This funct"... is not valid JSON Cause: SST dev environment sending non-JSON error messages to WebSocket Fix:

  • Added robust pre-parsing checks for JSON format
  • Graceful handling of SST infrastructure messages
  • Better error logging for actual parsing issues

Issue 3: Streaming Freeze After First Chunk 🔧 INVESTIGATING​

Symptoms: Response freezes at "The world of cocktail", full response appears on page reload Suspected Causes:

  1. Server throttling too aggressive
  2. Client-side rendering bottlenecks
  3. WebSocket message loss during subscription changes

🔍 Diagnostic Tools Added​

Client-Side Telemetry​

Console logs now show:

🔌 [STREAMING] WebSocket subscription created with ID: abc123
🚀 [STREAMING] First chunk received for subscription abc123  
⚡ [STREAMING] Chunk 10: 45ms since last (avg: 52ms)
🏁 [STREAMING] Quest completed for subscription abc123:
   - Total messages: 157
   - Total time: 8,234ms
   - Average interval: 52ms

Server-Side Telemetry​

Console logs now show:

⏱️ [STREAMING] Server throttling enabled: 5ms interval
📤 [STREAMING] Chunk sent: +67 chars (total: 342), interval: 8ms
📤 [STREAMING] Final message sent, content length: 1,847

🧪 Testing Environment Variables​

Disable Server Throttling (Testing Only)​

export DISABLE_SERVER_THROTTLING=true

This removes ALL server-side throttling and sends every 5+ character change immediately to test if server throttling is causing client issues.

Development Optimizations​

Already active in development:

  • Reduced throttling: 5ms (vs 25ms production)
  • Verbose logging enabled
  • History count reduced to 5 for faster processing

🕵️ Current Investigation Plan​

Step 1: Test Server Throttling​

  1. Set DISABLE_SERVER_THROTTLING=true
  2. Restart dev server
  3. Test streaming - does it still freeze?

Step 2: Monitor WebSocket Messages​

  1. Open browser DevTools → Network → WS (WebSocket)
  2. Start streaming request
  3. Watch for:
    • Message frequency
    • Connection drops
    • Large gaps in timing

Step 3: Check React Rendering​

  1. Use React DevTools Profiler
  2. Monitor component re-renders during streaming
  3. Look for expensive render cycles

Step 4: Database Query Analysis​

  1. Check server logs for quest status queries
  2. Verify our database optimizations are working
  3. Look for any blocking operations

🎯 Success Metrics​

Before Fixes:

  • ❌ React hooks error breaking subscriptions
  • ❌ WebSocket JSON parse errors flooding console
  • ❌ Streaming freezes after first chunk
  • ❌ Full response only visible after page reload

After Fixes:

  • ✅ Clean WebSocket subscription lifecycle
  • ✅ Robust message parsing with SST compatibility
  • 🔧 Testing: Streaming should continue smoothly
  • 🔧 Testing: Real-time updates without reload needed

📋 Next Steps​

  1. Test the fixes - Start a new streaming request
  2. Monitor console - Look for our new telemetry logs
  3. Check for errors - Should see no more hooks/JSON errors
  4. Verify streaming - Response should update in real-time

If streaming still freezes, we have comprehensive telemetry to identify exactly where the problem occurs!