Merge pull request #15056 from overleaf/td-ide-connection-load

IDE page: connection manager and loading screen

GitOrigin-RevId: 2cbc8c09aeb36a14eae66da78b267c7a830fb71a

services/web/frontend/js/features/ide-react/connection/connection-manager.ts

@@ -0,0 +1,341 @@
+import { ConnectionError, ConnectionState } from './types/connection-state'
+import SocketIoShim from '../../../ide/connection/SocketIoShim'
+import getMeta from '../../../utils/meta'
+import { Emitter } from 'strict-event-emitter'
+import { Socket } from '@/features/ide-react/connection/types/socket'
+import { debugConsole } from '@/utils/debugging'
+
+const ONE_HOUR_IN_MS = 1000 * 60 * 60
+const TWO_MINUTES_IN_MS = 2 * 60 * 1000
+const DISCONNECT_AFTER_MS = ONE_HOUR_IN_MS * 24
+
+const CONNECTION_ERROR_RECONNECT_DELAY = 1000
+const USER_ACTIVITY_RECONNECT_DELAY = 1000
+const JOIN_PROJECT_RATE_LIMITED_DELAY = 15 * 1000
+
+const RECONNECT_GRACEFULLY_RETRY_INTERVAL_MS = 5000
+const MAX_RECONNECT_GRACEFULLY_INTERVAL_MS = 45 * 1000
+
+const MAX_RETRY_CONNECT = 5
+
+const initialState: ConnectionState = {
+  readyState: WebSocket.CLOSED,
+  forceDisconnected: false,
+  inactiveDisconnect: false,
+  lastConnectionAttempt: 0,
+  reconnectAt: null,
+  error: '',
+}
+
+type Events = {
+  statechange: [{ state: ConnectionState; previousState: ConnectionState }]
+}
+
+export class ConnectionManager extends Emitter<Events> {
+  state: ConnectionState = initialState
+  private connectionAttempt: number | null = null
+  private gracefullyReconnectUntil = 0
+  private lastUserActivity: number
+  private protocolVersion = -1
+  private readonly idleDisconnectInterval: number
+  private reconnectCountdownInterval = 0
+  readonly socket: Socket
+
+  constructor() {
+    super()
+
+    this.lastUserActivity = performance.now()
+    this.idleDisconnectInterval = window.setInterval(() => {
+      this.disconnectIfIdleSince(DISCONNECT_AFTER_MS)
+    }, ONE_HOUR_IN_MS)
+
+    window.addEventListener('online', this.onOnline)
+
+    const socket = SocketIoShim.connect('', {
+      'auto connect': false,
+      'connect timeout': 30 * 1000,
+      'force new connection': true,
+      query: new URLSearchParams({
+        projectId: getMeta('ol-project_id'),
+      }).toString(),
+      reconnect: false,
+    }) as unknown as Socket
+    this.socket = socket
+
+    socket.on('disconnect', () => this.onDisconnect())
+    socket.on('error', () => this.onConnectError())
+    socket.on('connect_failed', () => this.onConnectError())
+    socket.on('joinProjectResponse', body => this.onJoinProjectResponse(body))
+    socket.on('connectionRejected', err => this.onConnectionRejected(err))
+    socket.on('reconnectGracefully', () => this.onReconnectGracefully())
+    socket.on('forceDisconnect', (_, delay) => this.onForceDisconnect(delay))
+
+    this.tryReconnect()
+  }
+
+  close(error: ConnectionError) {
+    this.onForceDisconnect(0, error)
+  }
+
+  tryReconnectNow() {
+    this.tryReconnectWithBackoff(USER_ACTIVITY_RECONNECT_DELAY)
+  }
+
+  // Called when document is clicked or the editor cursor changes
+  registerUserActivity() {
+    this.lastUserActivity = performance.now()
+    this.ensureIsConnected()
+  }
+
+  private changeState(state: ConnectionState) {
+    const previousState = this.state
+    this.state = state
+    debugConsole.log('[ConnectionManager] changed state', {
+      previousState,
+      state,
+    })
+    this.emit('statechange', { state, previousState })
+  }
+
+  private onOnline() {
+    if (!this.state.inactiveDisconnect) this.ensureIsConnected()
+  }
+
+  private onConnectionRejected(err: any) {
+    switch (err?.message) {
+      case 'retry': // pending real-time shutdown
+        this.startAutoReconnectCountdown(0)
+        break
+      case 'rate-limit hit when joining project': // rate-limited
+        this.changeState({
+          ...this.state,
+          error: 'rate-limited',
+        })
+        break
+      case 'not authorized': // not logged in
+      case 'invalid session': // expired session
+        this.changeState({
+          ...this.state,
+          error: 'not-logged-in',
+          forceDisconnected: true,
+        })
+        break
+      case 'project not found': // project has been deleted
+        this.changeState({
+          ...this.state,
+          error: 'project-deleted',
+          forceDisconnected: true,
+        })
+        break
+      default:
+        this.changeState({
+          ...this.state,
+          error: 'unable-to-join',
+        })
+        break
+    }
+  }
+
+  private onConnectError() {
+    if (this.connectionAttempt === null) return // ignore errors once connected.
+    if (this.connectionAttempt++ < MAX_RETRY_CONNECT) {
+      setTimeout(
+        () => {
+          if (this.canReconnect()) this.socket.socket.connect()
+        },
+        // add jitter to spread reconnects
+        this.connectionAttempt *
+          (1 + Math.random()) *
+          CONNECTION_ERROR_RECONNECT_DELAY
+      )
+    } else {
+      this.disconnect()
+      this.changeState({
+        ...this.state,
+        error: 'unable-to-connect',
+      })
+    }
+  }
+
+  private onDisconnect() {
+    this.connectionAttempt = null
+    this.changeState({
+      ...this.state,
+      readyState: WebSocket.CLOSED,
+    })
+    if (this.disconnectIfIdleSince(DISCONNECT_AFTER_MS)) return
+    if (this.state.error === 'rate-limited') {
+      this.tryReconnectWithBackoff(JOIN_PROJECT_RATE_LIMITED_DELAY)
+    } else {
+      this.startAutoReconnectCountdown(0)
+    }
+  }
+
+  private onForceDisconnect(
+    delay: number,
+    error: ConnectionError = 'maintenance'
+  ) {
+    clearInterval(this.idleDisconnectInterval)
+    clearTimeout(this.reconnectCountdownInterval)
+    window.removeEventListener('online', this.onOnline)
+    this.changeState({
+      ...this.state,
+      forceDisconnected: true,
+      error,
+    })
+    setTimeout(() => this.disconnect(), delay * 1000)
+  }
+
+  private onJoinProjectResponse({
+    protocolVersion,
+    publicId,
+  }: {
+    protocolVersion: number
+    publicId: string
+  }) {
+    if (
+      this.protocolVersion !== -1 &&
+      this.protocolVersion !== protocolVersion
+    ) {
+      this.onForceDisconnect(0, 'protocol-changed')
+      return
+    }
+    this.protocolVersion = protocolVersion
+    this.socket.publicId = publicId
+    this.connectionAttempt = null
+    this.changeState({
+      ...this.state,
+      readyState: WebSocket.OPEN,
+      error: '',
+      reconnectAt: null,
+    })
+  }
+
+  private onReconnectGracefully() {
+    // Disconnect idle users a little earlier than the 24h limit.
+    if (this.disconnectIfIdleSince(DISCONNECT_AFTER_MS * 0.75)) return
+    if (this.gracefullyReconnectUntil) return
+    this.gracefullyReconnectUntil =
+      performance.now() + MAX_RECONNECT_GRACEFULLY_INTERVAL_MS
+    this.tryReconnectGracefully()
+  }
+
+  private canReconnect(): boolean {
+    if (this.state.readyState === WebSocket.OPEN) return false // no need to reconnect
+    if (this.state.forceDisconnected) return false // reconnecting blocked
+    return true
+  }
+
+  private isReconnectingSoon(ms: number): boolean {
+    if (!this.state.reconnectAt) return false
+    return this.state.reconnectAt - performance.now() <= ms
+  }
+
+  private hasReconnectedRecently(ms: number): boolean {
+    return performance.now() - this.state.lastConnectionAttempt < ms
+  }
+
+  private isUserInactiveSince(since: number): boolean {
+    return performance.now() - this.lastUserActivity > since
+  }
+
+  private disconnectIfIdleSince(threshold: number): boolean {
+    if (!this.isUserInactiveSince(threshold)) return false
+    const previouslyClosed = this.state.readyState === WebSocket.CLOSED
+    this.changeState({
+      ...this.state,
+      readyState: WebSocket.CLOSED,
+      inactiveDisconnect: true,
+    })
+    if (!previouslyClosed) {
+      this.socket.disconnect()
+    }
+    return true
+  }
+
+  private disconnect() {
+    this.changeState({
+      ...this.state,
+      readyState: WebSocket.CLOSED,
+    })
+    this.socket.disconnect()
+  }
+
+  private ensureIsConnected() {
+    if (this.state.readyState === WebSocket.OPEN) return
+    this.tryReconnectWithBackoff(
+      this.state.error === 'rate-limited'
+        ? JOIN_PROJECT_RATE_LIMITED_DELAY
+        : USER_ACTIVITY_RECONNECT_DELAY
+    )
+  }
+
+  private startAutoReconnectCountdown(backoff: number) {
+    if (!this.canReconnect()) return
+    let countdown
+    if (this.isUserInactiveSince(TWO_MINUTES_IN_MS)) {
+      countdown = 60 + Math.floor(Math.random() * 2 * 60)
+    } else {
+      countdown = 3 + Math.floor(Math.random() * 7)
+    }
+    const ms = backoff + countdown * 1000
+    if (this.isReconnectingSoon(ms)) return
+
+    this.changeState({
+      ...this.state,
+      reconnectAt: performance.now() + ms,
+    })
+    clearTimeout(this.reconnectCountdownInterval)
+    this.reconnectCountdownInterval = window.setTimeout(() => {
+      if (this.isReconnectingSoon(0)) {
+        this.tryReconnect()
+      }
+    }, ms)
+  }
+
+  private tryReconnect() {
+    this.gracefullyReconnectUntil = 0
+    this.changeState({
+      ...this.state,
+      reconnectAt: null,
+    })
+    if (!this.canReconnect()) return
+
+    this.connectionAttempt = 0
+    this.changeState({
+      ...this.state,
+      readyState: WebSocket.CONNECTING,
+      error: '',
+      inactiveDisconnect: false,
+      lastConnectionAttempt: performance.now(),
+    })
+    this.socket.socket.connect()
+  }
+
+  private tryReconnectGracefully() {
+    if (
+      this.state.readyState === WebSocket.CLOSED ||
+      !this.gracefullyReconnectUntil
+    )
+      return
+    if (
+      this.gracefullyReconnectUntil < performance.now() ||
+      this.isUserInactiveSince(RECONNECT_GRACEFULLY_RETRY_INTERVAL_MS)
+    ) {
+      this.disconnect()
+      this.tryReconnect()
+    } else {
+      setTimeout(() => {
+        this.tryReconnectGracefully()
+      }, RECONNECT_GRACEFULLY_RETRY_INTERVAL_MS)
+    }
+  }
+
+  private tryReconnectWithBackoff(backoff: number) {
+    if (this.hasReconnectedRecently(backoff)) {
+      this.startAutoReconnectCountdown(backoff)
+    } else {
+      this.tryReconnect()
+    }
+  }
+}

services/web/frontend/js/features/ide-react/connection/types/connection-state.ts

@@ -0,0 +1,18 @@
+export type ConnectionError =
+  | 'maintenance'
+  | 'not-logged-in'
+  | 'out-of-sync'
+  | 'project-deleted'
+  | 'protocol-changed'
+  | 'rate-limited'
+  | 'unable-to-connect'
+  | 'unable-to-join'
+
+export type ConnectionState = {
+  readyState: WebSocket['CONNECTING'] | WebSocket['OPEN'] | WebSocket['CLOSED']
+  forceDisconnected: boolean
+  inactiveDisconnect: boolean
+  reconnectAt: number | null
+  lastConnectionAttempt: number
+  error: '' | ConnectionError
+}

services/web/frontend/js/features/ide-react/connection/types/socket.ts

@@ -0,0 +1,26 @@
+export type Socket = {
+  publicId: string
+  on(event: string, callback: (...data: any[]) => void): void
+  emit(
+    event: string,
+    arg0: any,
+    callback?: (error: Error, ...data: any[]) => void
+  ): void
+  emit(
+    event: string,
+    arg0: any,
+    arg1: any,
+    callback?: (error: Error, ...data: any[]) => void
+  ): void
+  emit(
+    event: string,
+    arg0: any,
+    arg1: any,
+    arg2: any,
+    callback?: (error: Error, ...data: any[]) => void
+  ): void
+  socket: {
+    connect(): void
+  }
+  disconnect(): void
+}

services/web/frontend/js/features/ide-react/connection/utils.ts

@@ -0,0 +1,6 @@
+export function secondsUntil(timestamp: number | null) {
+  if (!timestamp) return 0
+  const seconds = Math.ceil((timestamp - performance.now()) / 1000)
+  if (seconds > 0) return seconds
+  return 0
+}