overleaf/services/web/frontend/js/features/ide-react/editor/share-js-doc.ts
Jakob Ackermann aa480a2663 Merge pull request #18898 from overleaf/jpa-no-window
[web] migrate from window attributes to getMeta

GitOrigin-RevId: 3dcf1ab6b01155e5e4abeb3e78d0fa9053e055bc
2024-06-19 08:04:21 +00:00

425 lines
14 KiB
TypeScript

/* eslint-disable camelcase */
// Migrated from services/web/frontend/js/ide/editor/ShareJsDoc.js
import EventEmitter from '../../../utils/EventEmitter'
import { Doc } from '@/vendor/libs/sharejs'
import { Socket } from '@/features/ide-react/connection/types/socket'
import { debugConsole } from '@/utils/debugging'
import { decodeUtf8 } from '@/utils/decode-utf8'
import { IdeEventEmitter } from '@/features/ide-react/create-ide-event-emitter'
import { EventLog } from '@/features/ide-react/editor/event-log'
import EditorWatchdogManager from '@/features/ide-react/connection/editor-watchdog-manager'
import {
Message,
ShareJsConnectionState,
ShareJsOperation,
TrackChangesIdSeeds,
} from '@/features/ide-react/editor/types/document'
import { EditorFacade } from '@/features/source-editor/extensions/realtime'
import { recordDocumentFirstChangeEvent } from '@/features/event-tracking/document-first-change-event'
import getMeta from '@/utils/meta'
// All times below are in milliseconds
const SINGLE_USER_FLUSH_DELAY = 2000
const MULTI_USER_FLUSH_DELAY = 500
const INFLIGHT_OP_TIMEOUT = 5000 // Retry sending ops after 5 seconds without an ack
const WAIT_FOR_CONNECTION_TIMEOUT = 500
const FATAL_OP_TIMEOUT = 30000
type Update = Record<string, any>
type Connection = {
send: (update: Update) => void
state: ShareJsConnectionState
id: string
}
export class ShareJsDoc extends EventEmitter {
type: string
track_changes = false
track_changes_id_seeds: TrackChangesIdSeeds | null = null
connection: Connection
// @ts-ignore
_doc: Doc
private editorWatchdogManager: EditorWatchdogManager
private lastAcked: Date | null = null
private queuedMessageTimer: number | null = null
private queuedMessages: Message[] = []
private detachEditorWatchdogManager: (() => void) | null = null
private _timeoutTimer: number | null = null
constructor(
readonly doc_id: string,
docLines: string[],
version: number,
readonly socket: Socket,
private readonly globalEditorWatchdogManager: EditorWatchdogManager,
private readonly eventEmitter: IdeEventEmitter,
private readonly eventLog: EventLog
) {
super()
this.type = 'text'
// Decode any binary bits of data
const snapshot = docLines.map(line => decodeUtf8(line)).join('\n')
this.connection = {
send: (update: Update) => {
this.startInflightOpTimeout(update)
if (this.track_changes && this.track_changes_id_seeds) {
if (update.meta == null) {
update.meta = {}
}
update.meta.tc = this.track_changes_id_seeds.inflight
}
return this.socket.emit(
'applyOtUpdate',
this.doc_id,
update,
(error: Error) => {
if (error != null) {
this.handleError(error)
}
}
)
},
state: 'ok',
id: this.socket.publicId,
}
this._doc = new Doc(this.connection, this.doc_id, {
type: this.type,
})
this._doc.setFlushDelay(SINGLE_USER_FLUSH_DELAY)
this._doc.on('change', (...args: any[]) => {
return this.trigger('change', ...args)
})
this.editorWatchdogManager = new EditorWatchdogManager({
parent: globalEditorWatchdogManager,
})
this._doc.on('acknowledge', () => {
this.lastAcked = new Date() // note time of last ack from server for an op we sent
this.editorWatchdogManager.onAck() // keep track of last ack globally
return this.trigger('acknowledge')
})
this._doc.on('remoteop', (...args: any[]) => {
// As soon as we're working with a collaborator, start sending
// ops more frequently for low latency.
this._doc.setFlushDelay(MULTI_USER_FLUSH_DELAY)
return this.trigger('remoteop', ...args)
})
this._doc.on('flipped_pending_to_inflight', () => {
return this.trigger('flipped_pending_to_inflight')
})
this._doc.on('saved', () => {
return this.trigger('saved')
})
this._doc.on('error', (e: Error) => {
return this.handleError(e)
})
this.bindToDocChanges(this._doc)
this.processUpdateFromServer({
open: true,
v: version,
snapshot,
})
this.removeCarriageReturnCharFromShareJsDoc()
}
private removeCarriageReturnCharFromShareJsDoc() {
const doc = this._doc
if (doc.snapshot.indexOf('\r') === -1) {
return
}
this.eventLog.pushEvent('remove-carriage-return-char', {
doc_id: this.doc_id,
})
let nextPos
while ((nextPos = doc.snapshot.indexOf('\r')) !== -1) {
debugConsole.log('[ShareJsDoc] remove-carriage-return-char', nextPos)
doc.del(nextPos, 1)
}
}
submitOp(op: ShareJsOperation) {
this._doc.submitOp(op)
}
// The following code puts out of order messages into a queue
// so that they can be processed in order. This is a workaround
// for messages being delayed by redis cluster.
// FIXME: REMOVE THIS WHEN REDIS PUBSUB IS SENDING MESSAGES IN ORDER
private isAheadOfExpectedVersion(message: Message) {
return this._doc.version > 0 && message.v > this._doc.version
}
private pushOntoQueue(message: Message) {
debugConsole.log(`[processUpdate] push onto queue ${message.v}`)
// set a timer so that we never leave messages in the queue indefinitely
if (!this.queuedMessageTimer) {
this.queuedMessageTimer = window.setTimeout(() => {
debugConsole.log(`[processUpdate] queue timeout fired for ${message.v}`)
// force the message to be processed after the timeout,
// it will cause an error if the missing update has not arrived
this.processUpdateFromServer(message)
}, INFLIGHT_OP_TIMEOUT)
}
this.queuedMessages.push(message)
// keep the queue in order, lowest version first
this.queuedMessages.sort(function (a, b) {
return a.v - b.v
})
}
private clearQueue() {
this.queuedMessages = []
}
private processQueue() {
if (this.queuedMessages.length > 0) {
const nextAvailableVersion = this.queuedMessages[0].v
if (nextAvailableVersion > this._doc.version) {
// there are updates we still can't apply yet
} else {
// there's a version we can accept on the queue, apply it
debugConsole.log(
`[processUpdate] taken from queue ${nextAvailableVersion}`
)
const message = this.queuedMessages.shift()
if (message) {
this.processUpdateFromServerInOrder(message)
}
// clear the pending timer if the queue has now been cleared
if (this.queuedMessages.length === 0 && this.queuedMessageTimer) {
debugConsole.log('[processUpdate] queue is empty, cleared timeout')
window.clearTimeout(this.queuedMessageTimer)
this.queuedMessageTimer = null
}
}
}
}
// FIXME: This is the new method which reorders incoming updates if needed
// called from document.ts
processUpdateFromServerInOrder(message: Message) {
// Is this update ahead of the next expected update?
// If so, put it on a queue to be handled later.
if (this.isAheadOfExpectedVersion(message)) {
this.pushOntoQueue(message)
return // defer processing this update for now
}
const error = this.processUpdateFromServer(message)
if (
error instanceof Error &&
error.message === 'Invalid version from server'
) {
// if there was an error, abandon the queued updates ahead of this one
this.clearQueue()
return
}
// Do we have any messages queued up?
// find the next message if available
this.processQueue()
}
// FIXME: This is the original method. Switch back to this when redis
// issues are resolved.
processUpdateFromServer(message: Message) {
try {
this._doc._onMessage(message)
} catch (error) {
// Version mismatches are thrown as errors
debugConsole.log(error)
this.handleError(error)
return error // return the error for queue handling
}
if (message.meta?.type === 'external') {
return this.trigger('externalUpdate', message)
}
}
catchUp(updates: Message[]) {
return updates.map(update => {
update.v = this._doc.version
update.doc = this.doc_id
return this.processUpdateFromServer(update)
})
}
getSnapshot() {
return this._doc.snapshot as string | undefined
}
getVersion() {
return this._doc.version
}
getType() {
return this.type
}
clearInflightAndPendingOps() {
this.clearFatalTimeoutTimer()
this._doc.inflightOp = null
this._doc.inflightCallbacks = []
this._doc.pendingOp = null
return (this._doc.pendingCallbacks = [])
}
flushPendingOps() {
// This will flush any ops that are pending.
// If there is an inflight op it will do nothing.
return this._doc.flush()
}
updateConnectionState(state: ShareJsConnectionState) {
debugConsole.log(`[updateConnectionState] Setting state to ${state}`)
this.connection.state = state
this.connection.id = this.socket.publicId
this._doc.autoOpen = false
this._doc._connectionStateChanged(state)
return (this.lastAcked = null) // reset the last ack time when connection changes
}
hasBufferedOps() {
return this._doc.inflightOp != null || this._doc.pendingOp != null
}
getInflightOp() {
return this._doc.inflightOp
}
getPendingOp() {
return this._doc.pendingOp
}
getRecentAck() {
// check if we have received an ack recently (within a factor of two of the single user flush delay)
return (
this.lastAcked !== null &&
Date.now() - this.lastAcked.getTime() < 2 * SINGLE_USER_FLUSH_DELAY
)
}
private attachEditorWatchdogManager(editor: EditorFacade) {
// end-to-end check for edits -> acks, for this very ShareJsdoc
// This will catch a broken connection and missing UX-blocker for the
// user, allowing them to keep editing.
this.detachEditorWatchdogManager =
this.editorWatchdogManager.attachToEditor(editor)
}
private attachToEditor(editor: EditorFacade, attachToShareJs: () => void) {
this.attachEditorWatchdogManager(editor)
attachToShareJs()
}
private maybeDetachEditorWatchdogManager() {
// a failed attach attempt may lead to a missing cleanup handler
if (this.detachEditorWatchdogManager) {
this.detachEditorWatchdogManager()
this.detachEditorWatchdogManager = null
}
}
attachToCM6(cm6: EditorFacade) {
this.attachToEditor(cm6, () => {
cm6.attachShareJs(this._doc, getMeta('ol-maxDocLength'))
})
}
detachFromCM6() {
this.maybeDetachEditorWatchdogManager()
if (this._doc.detach_cm6) {
this._doc.detach_cm6()
}
}
private startInflightOpTimeout(update: Update) {
this.startFatalTimeoutTimer(update)
const retryOp = () => {
// Only send the update again if inflightOp is still populated
// This can be cleared when hard reloading the document in which
// case we don't want to keep trying to send it.
debugConsole.log('[inflightOpTimeout] Trying op again')
if (this._doc.inflightOp != null) {
// When there is a socket.io disconnect, @_doc.inflightSubmittedIds
// is updated with the socket.io client id of the current op in flight
// (meta.source of the op).
// @connection.id is the client id of the current socket.io session.
// So we need both depending on whether the op was submitted before
// one or more disconnects, or if it was submitted during the current session.
update.dupIfSource = [
this.connection.id,
...Array.from(this._doc.inflightSubmittedIds),
]
// We must be joined to a project for applyOtUpdate to work on the real-time
// service, so don't send an op if we're not. Connection state is set to 'ok'
// when we've joined the project
if (this.connection.state !== 'ok') {
debugConsole.log(
'[inflightOpTimeout] Not connected, retrying in 0.5s'
)
window.setTimeout(retryOp, WAIT_FOR_CONNECTION_TIMEOUT)
} else {
debugConsole.log('[inflightOpTimeout] Sending')
return this.connection.send(update)
}
}
}
const timer = window.setTimeout(retryOp, INFLIGHT_OP_TIMEOUT)
return this._doc.inflightCallbacks.push(() => {
this.clearFatalTimeoutTimer()
window.clearTimeout(timer)
}) // 30 seconds
}
private startFatalTimeoutTimer(update: Update) {
// If an op doesn't get acked within FATAL_OP_TIMEOUT, something has
// gone unrecoverably wrong (the op will have been retried multiple times)
if (this._timeoutTimer != null) {
return
}
return (this._timeoutTimer = window.setTimeout(() => {
this.clearFatalTimeoutTimer()
return this.trigger('op:timeout', update)
}, FATAL_OP_TIMEOUT))
}
private clearFatalTimeoutTimer() {
if (this._timeoutTimer == null) {
return
}
clearTimeout(this._timeoutTimer)
return (this._timeoutTimer = null)
}
private handleError(error: unknown, meta = {}) {
return this.trigger('error', error, meta)
}
// @ts-ignore
private bindToDocChanges(doc: Doc) {
const { submitOp } = doc
doc.submitOp = (op: ShareJsOperation, callback?: () => void) => {
recordDocumentFirstChangeEvent()
this.trigger('op:sent', op)
doc.pendingCallbacks.push(() => {
return this.trigger('op:acknowledged', op)
})
return submitOp.call(doc, op, callback)
}
const { flush } = doc
doc.flush = () => {
this.trigger('flush', doc.inflightOp, doc.pendingOp, doc.version)
return flush.call(doc)
}
}
}