overleaf/services/web/frontend/js/features/ide-react/connection/connection-manager.ts
Andrew Rumble 6100954635 Merge pull request #17863 from overleaf/ar-set-socket-disconnect-timeout-to-match-wire-value
Set socket disconnect timeout to match wire value

GitOrigin-RevId: b3bfc460090b872500b55b0d5e2167b828ef31f4
2024-04-16 08:04:22 +00:00

404 lines
11 KiB
TypeScript

import { ConnectionError, ConnectionState } from './types/connection-state'
import SocketIoShim from '../../../ide/connection/SocketIoShim'
import getMeta from '../../../utils/meta'
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_NOW_DELAY = 1000
const USER_ACTIVITY_RECONNECT_DELAY = 5000
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,
forcedDisconnectDelay: 0,
error: '',
}
export class StateChangeEvent extends CustomEvent<{
state: ConnectionState
previousState: ConnectionState
}> {}
export class ConnectionManager extends EventTarget {
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
private userIsLeavingPage = false
constructor() {
super()
this.lastUserActivity = performance.now()
this.idleDisconnectInterval = window.setInterval(() => {
this.disconnectIfIdleSince(DISCONNECT_AFTER_MS)
}, ONE_HOUR_IN_MS)
window.addEventListener('online', () => this.onOnline())
window.addEventListener('beforeunload', () => {
this.userIsLeavingPage = true
})
const parsedURL = new URL(
getMeta('ol-wsUrl') || '/socket.io',
window.origin
)
const socket = SocketIoShim.connect(parsedURL.origin, {
resource: parsedURL.pathname.slice(1),
'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
// bail out if socket.io failed to load (e.g. the real-time server is down)
if (typeof window.io !== 'object') {
this.switchToWsFallbackIfPossible()
debugConsole.error(
'Socket.io javascript not loaded. Please check that the real-time service is running and accessible.'
)
this.changeState({
...this.state,
error: 'io-not-loaded',
})
return
}
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_NOW_DELAY)
}
// Called when document is clicked or the editor cursor changes
registerUserActivity() {
this.lastUserActivity = performance.now()
this.userIsLeavingPage = false
this.ensureIsConnected()
}
private changeState(state: ConnectionState) {
const previousState = this.state
this.state = state
debugConsole.log('[ConnectionManager] changed state', {
previousState,
state,
})
this.dispatchEvent(
new StateChangeEvent('statechange', { detail: { state, previousState } })
)
}
private switchToWsFallbackIfPossible() {
const search = new URLSearchParams(window.location.search)
if (getMeta('ol-wsUrl') && search.get('ws') !== 'fallback') {
// if we tried to boot from a custom real-time backend and failed,
// try reloading and falling back to the siteUrl
search.set('ws', 'fallback')
window.location.search = search.toString()
return true
}
return false
}
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 {
if (!this.switchToWsFallbackIfPossible()) {
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)
window.setTimeout(() => this.disconnect(), 1000 * delay)
this.changeState({
...this.state,
forceDisconnected: true,
forcedDisconnectDelay: delay,
error,
})
}
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
}
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.userIsLeavingPage) return
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.addReconnectListeners()
this.socket.socket.connect()
}
private addReconnectListeners() {
const handleFailure = () => {
removeSocketListeners()
this.startAutoReconnectCountdown(0)
}
const handleSuccess = () => {
removeSocketListeners()
}
const removeSocketListeners = () => {
this.socket.removeListener('error', handleFailure)
this.socket.removeListener('connect', handleSuccess)
}
this.socket.on('error', handleFailure)
this.socket.on('connect', handleSuccess)
}
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()
}
}
}