overleaf/services/web/frontend/js/ide/editor/ShareJsDoc.js
Jakob Ackermann 1213709578 Merge pull request #14980 from overleaf/jpa-debug-console
[web] migrate frontend logging to debugConsole

GitOrigin-RevId: b03ff9030b03fff059738d2270bc4b4912e79f16
2023-09-28 08:04:12 +00:00

482 lines
15 KiB
JavaScript

/* eslint-disable
camelcase,
max-len,
no-unused-vars,
*/
// TODO: This file was created by bulk-decaffeinate.
// Fix any style issues and re-enable lint.
/*
* decaffeinate suggestions:
* DS001: Remove Babel/TypeScript constructor workaround
* DS101: Remove unnecessary use of Array.from
* DS102: Remove unnecessary code created because of implicit returns
* DS103: Rewrite code to no longer use __guard__
* DS205: Consider reworking code to avoid use of IIFEs
* DS206: Consider reworking classes to avoid initClass
* DS207: Consider shorter variations of null checks
* Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
*/
import EventEmitter from '../../utils/EventEmitter'
import ShareJs from '../../vendor/libs/sharejs'
import EditorWatchdogManager from '../connection/EditorWatchdogManager'
import { debugConsole } from '@/utils/debugging'
let ShareJsDoc
const SINGLE_USER_FLUSH_DELAY = 2000 // ms
const MULTI_USER_FLUSH_DELAY = 500 // ms
export default ShareJsDoc = (function () {
ShareJsDoc = class ShareJsDoc extends EventEmitter {
static initClass() {
this.prototype.INFLIGHT_OP_TIMEOUT = 5000 // Retry sending ops after 5 seconds without an ack
this.prototype.WAIT_FOR_CONNECTION_TIMEOUT = 500
this.prototype.FATAL_OP_TIMEOUT = 30000
}
constructor(
doc_id,
docLines,
version,
socket,
globalEditorWatchdogManager
) {
super()
// Dencode any binary bits of data
// See http://ecmanaut.blogspot.co.uk/2006/07/encoding-decoding-utf8-in-javascript.html
this.doc_id = doc_id
this.socket = socket
this.type = 'text'
docLines = Array.from(docLines).map(line =>
decodeURIComponent(escape(line))
)
const snapshot = docLines.join('\n')
this.track_changes = false
this.connection = {
send: update => {
this._startInflightOpTimeout(update)
if (
window.disconnectOnUpdate != null &&
Math.random() < window.disconnectOnUpdate
) {
debugConsole.log('Disconnecting on update', update)
window._ide.socket.socket.disconnect()
}
if (
window.dropUpdates != null &&
Math.random() < window.dropUpdates
) {
debugConsole.log('Simulating a lost update', update)
return
}
if (this.track_changes) {
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 => {
if (error != null) {
return this._handleError(error)
}
}
)
},
state: 'ok',
id: this.socket.publicId,
}
this._doc = new ShareJs.Doc(this.connection, this.doc_id, {
type: this.type,
})
this._doc.setFlushDelay(SINGLE_USER_FLUSH_DELAY)
this._doc.on('change', (...args) => {
return this.trigger('change', ...Array.from(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) => {
// 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', ...Array.from(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 => {
return this._handleError(e)
})
this._bindToDocChanges(this._doc)
this.processUpdateFromServer({
open: true,
v: version,
snapshot,
})
this._removeCarriageReturnCharFromShareJsDoc()
}
_removeCarriageReturnCharFromShareJsDoc() {
const doc = this._doc
if (doc.snapshot.indexOf('\r') === -1) {
return
}
window._ide.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(...args) {
return this._doc.submitOp(...Array.from(args || []))
}
// 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
_isAheadOfExpectedVersion(message) {
return this._doc.version > 0 && message.v > this._doc.version
}
_pushOntoQueue(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 = 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)
}, this.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
})
}
_clearQueue() {
this.queuedMessages = []
}
_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}`
)
this.processUpdateFromServerInOrder(this.queuedMessages.shift())
// 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')
clearTimeout(this.queuedMessageTimer)
this.queuedMessageTimer = null
}
}
}
}
// FIXME: This is the new method which reorders incoming updates if needed
// called from Document.js
processUpdateFromServerInOrder(message) {
// Create an array to hold queued messages
if (!this.queuedMessages) {
this.queuedMessages = []
}
// 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) {
try {
this._doc._onMessage(message)
} catch (error) {
// Version mismatches are thrown as errors
debugConsole.error(error)
this._handleError(error)
return error // return the error for queue handling
}
if (
__guard__(message != null ? message.meta : undefined, x => x.type) ===
'external'
) {
return this.trigger('externalUpdate', message)
}
}
catchUp(updates) {
return (() => {
const result = []
for (let i = 0; i < updates.length; i++) {
const update = updates[i]
update.v = this._doc.version
update.doc = this.doc_id
result.push(this.processUpdateFromServer(update))
}
return result
})()
}
getSnapshot() {
return this._doc.snapshot
}
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) {
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 &&
new Date() - this.lastAcked < 2 * SINGLE_USER_FLUSH_DELAY
)
}
getOpSize(op) {
// compute size of an op from its components
// (total number of characters inserted and deleted)
let size = 0
for (const component of Array.from(op || [])) {
if ((component != null ? component.i : undefined) != null) {
size += component.i.length
}
if ((component != null ? component.d : undefined) != null) {
size += component.d.length
}
}
return size
}
_attachEditorWatchdogManager(editorName, editor) {
// 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(editorName, editor)
}
_attachToEditor(editorName, editor, attachToShareJs) {
this._attachEditorWatchdogManager(editorName, editor)
attachToShareJs()
}
_maybeDetachEditorWatchdogManager() {
// a failed attach attempt may lead to a missing cleanup handler
if (this._detachEditorWatchdogManager) {
this._detachEditorWatchdogManager()
delete this._detachEditorWatchdogManager
}
}
attachToAce(ace) {
this._attachToEditor('Ace', ace, () => {
this._doc.attach_ace(ace, window.maxDocLength)
})
}
detachFromAce() {
this._maybeDetachEditorWatchdogManager()
return typeof this._doc.detach_ace === 'function'
? this._doc.detach_ace()
: undefined
}
attachToCM6(cm6) {
this._attachToEditor('CM6', cm6, () => {
cm6.attachShareJs(this._doc, window.maxDocLength)
})
}
detachFromCM6() {
this._maybeDetachEditorWatchdogManager()
if (this._doc.detach_cm6) {
this._doc.detach_cm6()
}
}
_startInflightOpTimeout(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') {
let timer
debugConsole.log(
'[inflightOpTimeout] Not connected, retrying in 0.5s'
)
return (timer = setTimeout(
retryOp,
this.WAIT_FOR_CONNECTION_TIMEOUT
))
} else {
debugConsole.log('[inflightOpTimeout] Sending')
return this.connection.send(update)
}
}
}
const timer = setTimeout(retryOp, this.INFLIGHT_OP_TIMEOUT)
return this._doc.inflightCallbacks.push(() => {
this._clearFatalTimeoutTimer()
return clearTimeout(timer)
}) // 30 seconds
}
_startFatalTimeoutTimer(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 = setTimeout(() => {
this._clearFatalTimeoutTimer()
return this.trigger('op:timeout', update)
}, this.FATAL_OP_TIMEOUT))
}
_clearFatalTimeoutTimer() {
if (this._timeoutTimer == null) {
return
}
clearTimeout(this._timeoutTimer)
return (this._timeoutTimer = null)
}
_handleError(error, meta) {
if (meta == null) {
meta = {}
}
return this.trigger('error', error, meta)
}
_bindToDocChanges(doc) {
const { submitOp } = doc
doc.submitOp = (...args) => {
this.trigger('op:sent', ...Array.from(args))
doc.pendingCallbacks.push(() => {
return this.trigger('op:acknowledged', ...Array.from(args))
})
return submitOp.apply(doc, args)
}
const { flush } = doc
return (doc.flush = (...args) => {
this.trigger('flush', doc.inflightOp, doc.pendingOp, doc.version)
return flush.apply(doc, args)
})
}
}
ShareJsDoc.initClass()
return ShareJsDoc
})()
function __guard__(value, transform) {
return typeof value !== 'undefined' && value !== null
? transform(value)
: undefined
}