How to fix REALTIME_DISCONNECT: Websocket disconnected from Realtime server in Supabase

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(supabaseUrl, supabaseKey)

const channel = supabase.channel('my-channel')

channel
  .on('postgres_changes', {
    event: '*',
    schema: 'public',
    table: 'messages'
  }, (payload) => {
    console.log('Change received:', payload)
  })
  .subscribe((status) => {
    console.log('Subscription status:', status)

    switch(status) {
      case 'SUBSCRIBED':
        console.log('✓ Successfully subscribed to channel')
        // Resume any paused operations
        break

      case 'CHANNEL_ERROR':
        console.error('✗ Channel error - attempting to recover')
        // Connection failed or dropped, will auto-reconnect
        break

      case 'TIMED_OUT':
        console.error('✗ Connection timed out - will retry')
        // Connection timeout, auto-retry will happen
        break

      case 'CLOSED':
        console.log('Channel closed - unsubscribing')
        // User intentionally unsubscribed
        break

      default:
        console.log('Unknown status:', status)
    }
  })

class RealtimeConnectionManager {
  constructor(supabase, options = {}) {
    this.supabase = supabase
    this.maxRetries = options.maxRetries || 10
    this.baseDelay = options.baseDelay || 1000 // 1 second
    this.maxDelay = options.maxDelay || 30000 // 30 seconds

    this.retryCount = 0
    this.channel = null
    this.lastSuccessfulConnection = null
  }

  async connect(channelName) {
    try {
      this.channel = this.supabase.channel(channelName)

      this.channel
        .on('postgres_changes', {
          event: '*',
          schema: 'public'
        }, (payload) => {
          console.log('Received change:', payload)
          this.lastSuccessfulConnection = Date.now()
        })
        .subscribe((status) => {
          if (status === 'SUBSCRIBED') {
            console.log('Connected successfully')
            this.retryCount = 0 // Reset on success
            this.lastSuccessfulConnection = Date.now()
          } else if (status === 'CHANNEL_ERROR' || status === 'TIMED_OUT') {
            this.handleDisconnect()
          }
        })
    } catch (error) {
      this.handleDisconnect(error)
    }
  }

  handleDisconnect(error) {
    console.error('Realtime disconnected:', error)

    if (this.retryCount < this.maxRetries) {
      // Calculate exponential backoff with jitter
      const exponentialDelay = Math.pow(2, this.retryCount) * this.baseDelay
      const jitter = Math.random() * 1000 // Add up to 1 second random jitter
      const delay = Math.min(exponentialDelay + jitter, this.maxDelay)

      this.retryCount++

      console.log(`Reconnecting in ${Math.round(delay)}ms (attempt ${this.retryCount}/${this.maxRetries})`)

      setTimeout(() => {
        this.connect(this.channel?.name || 'default')
      }, delay)
    } else {
      console.error('Max reconnection attempts reached. Manual intervention needed.')
      // Emit event to notify application
      this.emit('max-retries-reached')
    }
  }

  disconnect() {
    this.retryCount = 0
    if (this.channel) {
      this.supabase.removeChannel(this.channel)
    }
  }

  emit(event) {
    // Implement your own event emitter or use callbacks
    console.log('Event:', event)
  }
}

// Usage
const manager = new RealtimeConnectionManager(supabase, {
  maxRetries: 10,
  baseDelay: 1000,
  maxDelay: 30000
})

await manager.connect('my-channel')

# Test WebSocket connectivity
npm install -g wscat
wscat -c "wss://YOUR_PROJECT_REF.supabase.co/realtime/v1"

# Verify DNS resolution
nslookup YOUR_PROJECT_REF.supabase.co

# Test with curl
curl -i -N \
  -H "Connection: Upgrade" \
  -H "Upgrade: websocket" \
  -H "Sec-WebSocket-Key: SGVsbG8sIHdvcmxkIQ==" \
  -H "Sec-WebSocket-Version: 13" \
  https://YOUR_PROJECT_REF.supabase.co/realtime/v1

// Implement token refresh before expiration
async function setupTokenRefresh(supabase) {
  const { data: { session } } = await supabase.auth.getSession()

  if (session?.expires_at) {
    // Calculate when token expires
    const expiresAt = session.expires_at * 1000 // Convert to milliseconds
    const now = Date.now()
    const timeUntilExpiry = expiresAt - now

    // Refresh token 5 minutes before expiration
    const refreshTime = timeUntilExpiry - (5 * 60 * 1000)

    setTimeout(async () => {
      console.log('Refreshing authentication token...')
      const { data, error } = await supabase.auth.refreshSession()

      if (error) {
        console.error('Token refresh failed:', error)
      } else {
        console.log('Token refreshed successfully')
        // Restart token refresh cycle
        setupTokenRefresh(supabase)
      }
    }, Math.max(refreshTime, 0))
  }
}

// Setup on app initialization
setupTokenRefresh(supabase)

// Also refresh on auth state change
supabase.auth.onAuthStateChange(async (event, session) => {
  if (event === 'TOKEN_REFRESHED') {
    console.log('Token automatically refreshed')
    setupTokenRefresh(supabase)
  }
})

// Check current plan limitations
const planLimits = {
  free: {
    maxConcurrentConnections: 2,
    maxChannelsPerConnection: 100,
    maxEventsPerSecond: 100,
    maxChannelJoinsPerSecond: 5
  },
  pro: {
    maxConcurrentConnections: 'unlimited',
    maxChannelsPerConnection: 500,
    maxEventsPerSecond: 'unlimited',
    maxChannelJoinsPerSecond: 50
  }
}

// Implement message rate limiting
class MessageRateLimiter {
  constructor(maxMessagesPerSecond = 10) {
    this.maxMessagesPerSecond = maxMessagesPerSecond
    this.messageTimestamps = []
  }

  canSend() {
    const now = Date.now()
    // Remove old timestamps outside 1-second window
    this.messageTimestamps = this.messageTimestamps.filter(
      ts => now - ts < 1000
    )

    if (this.messageTimestamps.length < this.maxMessagesPerSecond) {
      this.messageTimestamps.push(now)
      return true
    }
    return false
  }

  async sendSafe(channel, event, payload) {
    if (!this.canSend()) {
      console.warn('Rate limit exceeded, queuing message...')
      // Implement queue or back off
      return false
    }

    channel.send({
      type: 'broadcast',
      event: event,
      payload: payload
    })
    return true
  }
}

// Monitor connection health
async function monitorConnectionHealth(channel) {
  let lastMessageTime = Date.now()

  channel.on('heartbeat', (payload) => {
    lastMessageTime = Date.now()
  })

  // Check if connection is stale
  setInterval(() => {
    const timeSinceLastMessage = Date.now() - lastMessageTime
    const maxStaleTime = 60000 // 60 seconds

    if (timeSinceLastMessage > maxStaleTime) {
      console.warn('No messages for', timeSinceLastMessage, 'ms - connection may be stale')
      // Trigger reconnection
    }
  }, 30000) // Check every 30 seconds
}

class PersistentRealtimeClient {
  constructor(supabase, options = {}) {
    this.supabase = supabase
    this.isOnline = navigator.onLine
    this.pendingChanges = []
    this.cachedData = new Map()

    // Listen for network changes
    window.addEventListener('online', () => this.handleOnline())
    window.addEventListener('offline', () => this.handleOffline())
  }

  handleOffline() {
    console.log('Application offline - queuing changes')
    this.isOnline = false
    // Stop attempting reconnections
  }

  async handleOnline() {
    console.log('Application online - syncing changes')
    this.isOnline = true
    // Process pending changes
    await this.processPendingChanges()
    // Reconnect realtime
  }

  async processPendingChanges() {
    for (const change of this.pendingChanges) {
      try {
        await this.applyChange(change)
        this.pendingChanges = this.pendingChanges.filter(c => c !== change)
      } catch (error) {
        console.error('Failed to apply change:', error)
      }
    }
  }

  async applyChange(change) {
    // Send change to server
    const { error } = await this.supabase
      .from('table_name')
      .update(change)
      .eq('id', change.id)

    if (error) throw error
  }

  cacheMessage(key, data) {
    this.cachedData.set(key, {
      data,
      timestamp: Date.now()
    })
  }

  getCached(key) {
    return this.cachedData.get(key)?.data
  }

  subscribe(channel) {
    return channel.subscribe((status) => {
      if (status === 'SUBSCRIBED' && this.pendingChanges.length > 0) {
        // Sync pending changes
        this.processPendingChanges()
      }
    })
  }
}

// Usage with React
import { useEffect, useState } from 'react'

function useRealtimeWithPersistence(channel) {
  const [data, setData] = useState([])
  const [isConnected, setIsConnected] = useState(false)

  useEffect(() => {
    const client = new PersistentRealtimeClient(supabase)

    const subscription = client.subscribe(channel)
      .on('postgres_changes', { event: '*', schema: 'public', table: 'messages' }, (payload) => {
        setData(prev => [...prev, payload.new])
        client.cacheMessage('messages', [...data, payload.new])
      })
      .subscribe((status) => {
        setIsConnected(status === 'SUBSCRIBED')
      })

    // Load cached data on mount
    const cached = client.getCached('messages')
    if (cached) {
      setData(cached)
    }

    return () => {
      supabase.removeChannel(subscription)
    }
  }, [])

  return { data, isConnected }
}

// Create a logging wrapper for Realtime debugging
class RealtimeDebugger {
  constructor(supabase) {
    this.supabase = supabase
    this.eventLog = []
    this.connectionLog = []
  }

  subscribeWithLogging(channel) {
    return channel
      .subscribe((status) => {
        const logEntry = {
          timestamp: new Date().toISOString(),
          status,
          sessionStorage: {
            isOnline: navigator.onLine,
            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
          }
        }

        this.connectionLog.push(logEntry)
        console.log('[Realtime Debug]', logEntry)

        // Upload logs periodically for analysis
        if (this.connectionLog.length % 10 === 0) {
          this.uploadLogs()
        }
      })
  }

  logEvent(eventType, payload) {
    const logEntry = {
      timestamp: Date.now(),
      eventType,
      payload,
      browserInfo: {
        userAgent: navigator.userAgent,
        connection: navigator.connection?.effectiveType,
        onLine: navigator.onLine
      }
    }

    this.eventLog.push(logEntry)
    console.log('[Event Log]', logEntry)
  }

  async uploadLogs() {
    try {
      // Send logs to your backend for analysis
      await fetch('/api/realtime-logs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          connectionLog: this.connectionLog.slice(-50), // Last 50 entries
          eventLog: this.eventLog.slice(-100) // Last 100 entries
        })
      })
    } catch (error) {
      console.error('Failed to upload logs:', error)
    }
  }

  getConnectionStats() {
    const disconnects = this.connectionLog.filter(e =>
      e.status === 'CHANNEL_ERROR' || e.status === 'TIMED_OUT'
    ).length

    const connects = this.connectionLog.filter(e =>
      e.status === 'SUBSCRIBED'
    ).length

    return {
      totalConnections: connects,
      totalDisconnects: disconnects,
      ratio: connects > 0 ? (disconnects / connects).toFixed(2) : 0
    }
  }
}

// Enable debug logging in Supabase client
const supabase = createClient(supabaseUrl, supabaseKey, {
  realtime: {
    logLevel: 'debug'
  }
})

const debugger = new RealtimeDebugger(supabase)
const channel = supabase.channel('debug-channel')
debugger.subscribeWithLogging(channel)

// Periodically log stats
setInterval(() => {
  console.log('Realtime Stats:', debugger.getConnectionStats())
}, 60000) // Every minute