@tldraw/sync-core 5.5.0-next.f9308d324e1c → 5.6.0-canary.5bfc37740468

package/src/lib/ClientWebSocketAdapter.ts

@@ -1,7 +1,7 @@
 import { atom, Atom } from '@tldraw/state'
 import { TLRecord } from '@tldraw/tlschema'
 import { assert, warnOnce } from '@tldraw/utils'
-import { chunk } from './chunk'
+import { chunk, MAX_ASSEMBLED_MESSAGE_CHARS } from './chunk'
 import { TLSocketClientSentEvent, TLSocketServerSentEvent } from './protocol'
 import {
 	TLPersistentClientSocket,
@@ -11,6 +11,16 @@ import {
 	TLSyncErrorCloseEventReason,
 } from './TLSyncClient'
 
+// The ready states from the WebSocket spec, kept local instead of read off the global
+// constructor: an extension or page teardown can leave `WebSocket` undefined by the time a
+// window `online` or close handler fires, and `WebSocket.OPEN` then throws (#10106).
+const ReadyState = {
+	CONNECTING: 0,
+	OPEN: 1,
+	CLOSING: 2,
+	CLOSED: 3,
+} as const
+
 function listenTo<T extends EventTarget>(target: T, event: string, handler: () => void) {
 	target.addEventListener(event, handler)
 	return () => {
@@ -93,8 +103,13 @@ export class ClientWebSocketAdapter implements TLPersistentClientSocket<
 	close() {
 		this.isDisposed = true
 		this._reconnectManager.close()
+		// orphan the socket before closing it (as _closeSocket does) so its onclose can't run
+		// _handleDisconnect after disposal — that would notify listeners and schedule a reconnect
+		const ws = this._ws
+		this._ws = null
 		//  WebSocket.close() is idempotent
-		this._ws?.close()
+		ws?.close()
+		this._connectionStatus.set('offline')
 	}
 
 	/**
@@ -171,8 +186,8 @@ export class ClientWebSocketAdapter implements TLPersistentClientSocket<
 		assert(!this.isDisposed, 'Tried to set a new websocket on a disposed socket')
 		assert(
 			this._ws === null ||
-				this._ws.readyState === WebSocket.CLOSED ||
-				this._ws.readyState === WebSocket.CLOSING,
+				this._ws.readyState === ReadyState.CLOSED ||
+				this._ws.readyState === ReadyState.CLOSING,
 			`Tried to set a new websocket in when the existing one was ${this._ws?.readyState}`
 		)
 
@@ -240,8 +255,6 @@ export class ClientWebSocketAdapter implements TLPersistentClientSocket<
 		this._handleDisconnect('manual')
 	}
 
-	// TLPersistentClientSocket stuff
-
 	_connectionStatus: Atom<TLPersistentClientSocketStatus | 'initial'> = atom(
 		'websocket connection status',
 		'initial'
@@ -277,7 +290,20 @@ export class ClientWebSocketAdapter implements TLPersistentClientSocket<
 
 		if (!this._ws) return
 		if (this.connectionStatus === 'online') {
-			const chunks = chunk(JSON.stringify(msg))
+			const stringified = JSON.stringify(msg)
+			// The server rejects a session whose assembled message exceeds this, so sending would
+			// only earn a close and a reconnect that re-sends the same message. Fail here the way
+			// the server would, so onSyncError runs once instead of the client looping forever.
+			if (stringified.length > MAX_ASSEMBLED_MESSAGE_CHARS) {
+				this._handleDisconnect(
+					'closed',
+					TLSyncErrorCloseEventCode,
+					true,
+					TLSyncErrorCloseEventReason.MESSAGE_TOO_LARGE
+				)
+				return
+			}
+			const chunks = chunk(stringified)
 			for (const part of chunks) {
 				this._ws.send(part)
 			}
@@ -513,21 +539,33 @@ export class ReconnectManager {
 		}
 	}
 
-	private scheduleAttempt() {
+	private async scheduleAttempt() {
 		assert(this.state === 'pendingAttempt')
+		if (this.isDisposed) return
 		debug('scheduling a connection attempt')
-		Promise.resolve(this.getUri()).then((uri) => {
-			// this can happen if the promise gets resolved too late
+
+		let uri: string
+		try {
+			uri = await this.getUri()
+		} catch (error) {
+			// A failed auth-token fetch must retry instead of leaving us with no socket or timer.
 			if (this.state !== 'pendingAttempt' || this.isDisposed) return
-			assert(
-				this.socketAdapter._ws?.readyState !== WebSocket.OPEN,
-				'There should be no connection attempts while already connected'
-			)
+			console.error('Failed to get the websocket URI, retrying', error)
+			this.state = 'delay'
+			this.reconnectTimeout = setTimeout(() => this.disconnected(), this.intendedDelay)
+			return
+		}
 
-			this.lastAttemptStart = Date.now()
-			this.socketAdapter._setNewSocket(new WebSocket(httpToWs(uri)))
-			this.state = 'pendingAttemptResult'
-		})
+		// this can happen if the promise gets resolved too late
+		if (this.state !== 'pendingAttempt' || this.isDisposed) return
+		assert(
+			this.socketAdapter._ws?.readyState !== ReadyState.OPEN,
+			'There should be no connection attempts while already connected'
+		)
+
+		this.lastAttemptStart = Date.now()
+		this.socketAdapter._setNewSocket(new WebSocket(httpToWs(uri)))
+		this.state = 'pendingAttemptResult'
 	}
 
 	private getMaxDelay() {
@@ -575,13 +613,13 @@ export class ReconnectManager {
 		this.clearRecheckConnectingTimeout()
 
 		// readyState can be CONNECTING, OPEN, CLOSING, CLOSED, or null (if getUri() is still pending)
-		if (this.socketAdapter._ws?.readyState === WebSocket.OPEN) {
+		if (this.socketAdapter._ws?.readyState === ReadyState.OPEN) {
 			debug('ReconnectManager.maybeReconnected: already connected')
 			// nothing to do, we're already OK
 			return
 		}
 
-		if (this.socketAdapter._ws?.readyState === WebSocket.CONNECTING) {
+		if (this.socketAdapter._ws?.readyState === ReadyState.CONNECTING) {
 			debug('ReconnectManager.maybeReconnected: connecting')
 			// We might be waiting for a TCP connection that sent SYN out and will never get it back,
 			// while a new connection appeared. On the other hand, we might have just started connecting
@@ -641,11 +679,12 @@ export class ReconnectManager {
 		debug('ReconnectManager.disconnected')
 		// This either means we're freshly disconnected, or the last connection attempt failed;
 		// either way, time to try again.
+		if (this.isDisposed) return
 
 		// Guard against delayed notifications and recheck synchronously
 		if (
-			this.socketAdapter._ws?.readyState !== WebSocket.OPEN &&
-			this.socketAdapter._ws?.readyState !== WebSocket.CONNECTING
+			this.socketAdapter._ws?.readyState !== ReadyState.OPEN &&
+			this.socketAdapter._ws?.readyState !== ReadyState.CONNECTING
 		) {
 			debug('ReconnectManager.disconnected: websocket is not OPEN or CONNECTING')
 			this.clearReconnectTimeout()
@@ -702,7 +741,7 @@ export class ReconnectManager {
 	connected() {
 		debug('ReconnectManager.connected')
 		// this notification could've been delayed, recheck synchronously
-		if (this.socketAdapter._ws?.readyState === WebSocket.OPEN) {
+		if (this.socketAdapter._ws?.readyState === ReadyState.OPEN) {
 			debug('ReconnectManager.connected: websocket is OPEN')
 			this.state = 'connected'
 			this.clearReconnectTimeout()

package/src/lib/InMemorySyncStorage.test.ts

@@ -51,6 +51,27 @@ describe('InMemorySyncStorage', () => {
 			expect(storage.getClock()).toBe(25)
 		})
 
+		it('[IM1] handles snapshots with far more records and tombstones than fit in a spread call', () => {
+			const documents = []
+			for (let i = 0; i < 150_000; i++) {
+				documents.push({
+					state: { ...contractRecords[0], id: `shape:${i}` } as TLRecord,
+					lastChangedClock: i,
+				})
+			}
+			const tombstones: Record<string, number> = {}
+			for (let i = 0; i < 150_000; i++) tombstones[`shape:gone-${i}`] = 150_000 + i
+			const storage = new InMemorySyncStorage<TLRecord>({
+				snapshot: makeContractSnapshot(contractRecords, {
+					documents,
+					tombstones,
+					documentClock: 0,
+					tombstoneHistoryStartsAtClock: 0,
+				}),
+			})
+			expect(storage.getClock()).toBe(299_999)
+		})
+
 		it('[IM2] clamps tombstoneHistoryStartsAtClock down to the document clock', () => {
 			const storage = new InMemorySyncStorage<TLRecord>({
 				snapshot: makeContractSnapshot(contractRecords, {

package/src/lib/InMemorySyncStorage.ts

@@ -7,7 +7,7 @@ import {
 	TLDOCUMENT_ID,
 	TLPageId,
 } from '@tldraw/tlschema'
-import { assert, IndexKey, objectMapEntries, throttle } from '@tldraw/utils'
+import { assert, IndexKey, objectMapEntries, throttle, type ThrottledFunction } from '@tldraw/utils'
 import { MicrotaskNotifier } from './MicrotaskNotifier'
 import { RoomSnapshot } from './TLSyncRoom'
 import {
@@ -153,27 +153,27 @@ export class InMemorySyncStorage<R extends UnknownRecord> implements TLSyncStora
 		onChange?(arg: TLSyncStorageOnChangeCallbackProps): unknown
 	} = {}) {
 		this.objectTypes = new Set(objectTypes ?? [])
-		const maxClockValue = Math.max(
-			0,
-			...Object.values(snapshot.tombstones ?? {}),
-			...Object.values(snapshot.documents.map((d) => d.lastChangedClock))
-		)
+		// a loop rather than `Math.max(0, ...clocks)`: spreading a large room's clocks as call
+		// arguments overflows the stack at roughly 100k+ records/tombstones
+		let maxClockValue = 0
 		// route snapshot entries into their partitions (a seed snapshot may carry object-lane
 		// records merged in, e.g. loaded from a separate persistence lane)
-		const toEntry = (
-			d: RoomSnapshot['documents'][number]
-		): [string, { state: R; lastChangedClock: number }] => [
-			d.state.id,
-			{ state: devFreeze(d.state) as R, lastChangedClock: d.lastChangedClock },
-		]
-		this.documents = new AtomMap(
-			'room documents',
-			snapshot.documents.filter((d) => !this.objectTypes.has(d.state.typeName)).map(toEntry)
-		)
-		this.objects = new AtomMap(
-			'room objects',
-			snapshot.documents.filter((d) => this.objectTypes.has(d.state.typeName)).map(toEntry)
-		)
+		const documentEntries: [string, { state: R; lastChangedClock: number }][] = []
+		const objectEntries: [string, { state: R; lastChangedClock: number }][] = []
+		for (const d of snapshot.documents) {
+			if (d.lastChangedClock > maxClockValue) maxClockValue = d.lastChangedClock
+			const entries = this.objectTypes.has(d.state.typeName) ? objectEntries : documentEntries
+			entries.push([
+				d.state.id,
+				{ state: devFreeze(d.state) as R, lastChangedClock: d.lastChangedClock },
+			])
+		}
+		const tombstoneEntries = objectMapEntries(snapshot.tombstones ?? {})
+		for (const [, clock] of tombstoneEntries) {
+			if (clock > maxClockValue) maxClockValue = clock
+		}
+		this.documents = new AtomMap('room documents', documentEntries)
+		this.objects = new AtomMap('room objects', objectEntries)
 		const documentClock = Math.max(maxClockValue, snapshot.documentClock ?? snapshot.clock ?? 0)
 
 		this.documentClock = atom('document clock', documentClock)
@@ -192,9 +192,7 @@ export class InMemorySyncStorage<R extends UnknownRecord> implements TLSyncStora
 			'room tombstones',
 			// If the tombstone history starts now (or we didn't have the
 			// tombstoneHistoryStartsAtClock) then there are no tombstones
-			tombstoneHistoryStartsAtClock === documentClock
-				? []
-				: objectMapEntries(snapshot.tombstones ?? {})
+			tombstoneHistoryStartsAtClock === documentClock ? [] : tombstoneEntries
 		)
 		if (onChange) {
 			this.onChange(onChange)
@@ -249,7 +247,7 @@ export class InMemorySyncStorage<R extends UnknownRecord> implements TLSyncStora
 	}
 
 	/** @internal */
-	pruneTombstones = throttle(
+	pruneTombstones: ThrottledFunction<() => void> = throttle(
 		() => {
 			if (this.tombstones.size > MAX_TOMBSTONES) {
 				// Convert to array and sort by clock ascending (oldest first)

package/src/lib/SQLiteSyncStorage.test.ts

@@ -1,7 +1,7 @@
 import { DatabaseSync } from 'node:sqlite'
 import { DocumentRecordType, PageRecordType, TLDOCUMENT_ID, TLRecord } from '@tldraw/tlschema'
 import { ZERO_INDEX_KEY } from '@tldraw/utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import {
 	contractRecords,
 	contractSchema,
@@ -9,6 +9,7 @@ import {
 	makePage,
 	registerStorageContractTests,
 } from '../test/storageContractSuite'
+import { MAX_TOMBSTONES } from './InMemorySyncStorage'
 import { NodeSqliteWrapper } from './NodeSqliteWrapper'
 import { SQLiteSyncStorage } from './SQLiteSyncStorage'
 
@@ -263,4 +264,62 @@ describe('SQLiteSyncStorage', () => {
 			expect(row?.migrationVersion).toBe(3)
 		})
 	})
+
+	describe('tombstone pruning robustness', () => {
+		const makeTombstones = (count: number) => {
+			const tombstones: Record<string, number> = {}
+			for (let i = 0; i < count; i++) tombstones[`shape:doc${i}`] = i + 1
+			return tombstones
+		}
+		function makeOverfullStorage() {
+			const db = new DatabaseSync(':memory:')
+			const storage = new SQLiteSyncStorage<TLRecord>({
+				sql: new NodeSqliteWrapper(db),
+				snapshot: makeContractSnapshot(contractRecords, {
+					tombstones: makeTombstones(MAX_TOMBSTONES + 500),
+					documentClock: MAX_TOMBSTONES + 501,
+					tombstoneHistoryStartsAtClock: 0,
+				}),
+			})
+			return { db, storage, prune: (storage as any).pruneTombstones as { (): void; flush(): void } }
+		}
+
+		it('[SS18] a prune that fires after the database was closed does not throw', () => {
+			const { db, storage, prune } = makeOverfullStorage()
+			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+			try {
+				// a delete schedules the throttled prune; the host then closes everything
+				storage.transaction((txn) => txn.delete(contractRecords[1].id))
+				db.close()
+				// the throttle timer fires later, from outside any caller that could catch it
+				expect(() => prune.flush()).not.toThrow()
+				expect(consoleSpy).toHaveBeenCalledWith('Failed to prune tombstones', expect.anything())
+			} finally {
+				consoleSpy.mockRestore()
+			}
+		})
+
+		it('[SS18] a prune whose delete fails leaves the history clock where it was', () => {
+			const { storage, prune } = makeOverfullStorage()
+			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+			try {
+				const stmts = (storage as any).stmts
+				const originalRun = stmts.deleteTombstonesBefore.run
+				stmts.deleteTombstonesBefore.run = () => {
+					throw new Error('SQLITE_BUSY: database is locked')
+				}
+				prune()
+				expect(() => prune.flush()).not.toThrow()
+				stmts.deleteTombstonesBefore.run = originalRun
+
+				// neither half of the prune applied: the history start was not advanced past
+				// tombstones that still exist
+				const snapshot = storage.getSnapshot()
+				expect(snapshot.tombstoneHistoryStartsAtClock).toBe(0)
+				expect(Object.keys(snapshot.tombstones!).length).toBe(MAX_TOMBSTONES + 500)
+			} finally {
+				consoleSpy.mockRestore()
+			}
+		})
+	})
 })

package/src/lib/SQLiteSyncStorage.ts

@@ -1,6 +1,6 @@
 import { transaction } from '@tldraw/state'
 import { SerializedSchema, StoreSnapshot, UnknownRecord } from '@tldraw/store'
-import { assert, objectMapEntries, throttle } from '@tldraw/utils'
+import { assert, objectMapEntries, throttle, type ThrottledFunction } from '@tldraw/utils'
 import {
 	computeTombstonePruning,
 	DEFAULT_INITIAL_SNAPSHOT,
@@ -394,7 +394,6 @@ export class SQLiteSyncStorage<R extends UnknownRecord> implements TLSyncStorage
 			const documentClock = snapshot.documentClock ?? snapshot.clock ?? 0
 			const tombstoneHistoryStartsAtClock = snapshot.tombstoneHistoryStartsAtClock ?? documentClock
 
-			// Clear existing data
 			this.sql.exec(`
 				DELETE FROM ${documentsTable};
 				DELETE FROM ${objectsTable};
@@ -410,14 +409,12 @@ export class SQLiteSyncStorage<R extends UnknownRecord> implements TLSyncStorage
 				table.insert.run(doc.state.id, encodeState(doc.state), doc.lastChangedClock)
 			}
 
-			// Insert tombstones
 			if (snapshot.tombstones) {
 				for (const [id, clock] of objectMapEntries(snapshot.tombstones)) {
 					this.stmts.insertTombstone.run(id, clock)
 				}
 			}
 
-			// Insert metadata row
 			this.stmts.updateMetadata.run(
 				documentClock,
 				tombstoneHistoryStartsAtClock,
@@ -511,20 +508,31 @@ export class SQLiteSyncStorage<R extends UnknownRecord> implements TLSyncStorage
 	}
 
 	/** @internal */
-	pruneTombstones = throttle(
+	pruneTombstones: ThrottledFunction<() => void> = throttle(
 		() => {
-			const tombstoneCount = this.stmts.countTombstones.all()[0].count as number
-			if (tombstoneCount > MAX_TOMBSTONES) {
-				// Get all tombstones sorted by clock ascending (oldest first)
-				const tombstones = this.stmts.iterateTombstones.all()
-
-				const result = computeTombstonePruning({ tombstones, documentClock: this.getClock() })
-				if (result) {
-					this.stmts.setTombstoneHistoryStartsAtClock.run(result.newTombstoneHistoryStartsAtClock)
-					// Delete all tombstones with clock < newTombstoneHistoryStartsAtClock in one operation.
-					// This works because computeTombstonePruning ensures we never split a clock value.
-					this.stmts.deleteTombstonesBefore.run(result.newTombstoneHistoryStartsAtClock)
+			// Runs from a timer, so a host that closed the database right after the last delete
+			// (e.g. `room.close(); db.close()` in onSessionRemoved) would otherwise get an uncaught
+			// throw from here; pruning is best-effort and simply runs again on the next delete.
+			try {
+				const tombstoneCount = this.stmts.countTombstones.all()[0].count as number
+				if (tombstoneCount > MAX_TOMBSTONES) {
+					// Get all tombstones sorted by clock ascending (oldest first)
+					const tombstones = this.stmts.iterateTombstones.all()
+
+					const result = computeTombstonePruning({ tombstones, documentClock: this.getClock() })
+					if (result) {
+						this.sql.transaction(() => {
+							this.stmts.setTombstoneHistoryStartsAtClock.run(
+								result.newTombstoneHistoryStartsAtClock
+							)
+							// Delete all tombstones with clock < newTombstoneHistoryStartsAtClock in one operation.
+							// This works because computeTombstonePruning ensures we never split a clock value.
+							this.stmts.deleteTombstonesBefore.run(result.newTombstoneHistoryStartsAtClock)
+						})
+					}
 				}
+			} catch (e) {
+				console.error('Failed to prune tombstones', e)
 			}
 		},
 		1000,

package/src/lib/TLSocketRoom.ts

@@ -1,7 +1,7 @@
 import type { SerializedSchema, StoreSchema, UnknownRecord } from '@tldraw/store'
 import { createTLSchema, TLInstancePresence, TLStoreSnapshot } from '@tldraw/tlschema'
 import { getOwnProperty, hasOwnProperty, isEqual, structuredClone } from '@tldraw/utils'
-import { JsonChunkAssembler } from './chunk'
+import { JsonChunkAssembler, MessageTooLargeError } from './chunk'
 import { DEFAULT_INITIAL_SNAPSHOT, InMemorySyncStorage } from './InMemorySyncStorage'
 import { TLObjectStoreAccess, TLSocketServerSentEvent } from './protocol'
 import { RoomSessionState } from './RoomSession'
@@ -273,13 +273,16 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 				})
 			)
 		}
+		// The default logger belongs to both layers: TLSyncRoom is where authorizer throws are
+		// logged, and a host that passes no `log` would otherwise never see them.
+		this.log = 'log' in opts ? opts.log : { error: console.error }
 		this.room = new TLSyncRoom<R, SessionMeta>({
 			onPresenceChange: opts.onPresenceChange,
 			onCommittedChanges: opts.onCommittedChanges,
 			objectTypes: opts.objectTypes,
 			authorizeRecord: opts.authorizeRecord,
 			schema: opts.schema ?? (createTLSchema() as any),
-			log: opts.log,
+			log: this.log,
 			storage,
 			clientTimeout: opts.clientTimeout,
 		})
@@ -295,7 +298,6 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 				})
 			}
 		})
-		this.log = 'log' in opts ? opts.log : { error: console.error }
 	}
 
 	/**
@@ -475,6 +477,11 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 				})
 				this.room.pruneSessions()
 				this.scheduleDebouncedSnapshot(sessionId)
+			} else if (res.error instanceof MessageTooLargeError) {
+				this.log?.error?.('Error assembling message', res.error)
+				// Resetting the connection would have the client reconnect and re-send the same
+				// oversized message, so reject the session instead and let the client surface it.
+				this.room.rejectSession(sessionId, TLSyncErrorCloseEventReason.MESSAGE_TOO_LARGE)
 			} else {
 				this.log?.error?.('Error assembling message', res.error)
 				// close the socket to reset the connection
@@ -854,12 +861,11 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 		if (this.isClosed()) {
 			throw new Error('Cannot update store on a closed room')
 		}
+		// read through the transaction rather than getSnapshot(): the document snapshot excludes the
+		// object-store lane, which would make object-lane records invisible (and undeletable) here
+		const records = this.storage.transaction((txn) => Object.fromEntries(txn.entries())).result
 		// eslint-disable-next-line @typescript-eslint/no-deprecated
-		const ctx = new StoreUpdateContext<R>(
-			// eslint-disable-next-line @typescript-eslint/no-deprecated
-			Object.fromEntries(this.getCurrentSnapshot().documents.map((d) => [d.state.id, d.state])),
-			this.room.schema
-		)
+		const ctx = new StoreUpdateContext<R>(records, this.room.schema)
 		try {
 			await updater(ctx)
 		} finally {
@@ -908,7 +914,8 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 	 * The client will attempt to reconnect automatically unless a fatal reason is provided.
 	 *
 	 * @param sessionId - Session identifier to remove
-	 * @param fatalReason - Optional fatal error reason that prevents reconnection
+	 * @param fatalReason - Optional fatal error reason that prevents reconnection. WebSocket close
+	 * reasons are capped at 123 UTF-8 bytes, so a longer reason is truncated and ends with `... (+N bytes)`.
 	 *
 	 * @example
 	 * ```ts

package/src/lib/TLSyncClient.test.ts

@@ -375,6 +375,67 @@ describe('TLSyncClient', () => {
 			expect(pushWithPage!.diff![localPage.id][0]).toBe(RecordOpType.Put)
 		})
 
+		it('[CL5] a reconnect flushes pending store history first, so a change queued behind the frame throttle is neither lost nor resurrected', () => {
+			connectClient()
+
+			socket.mockConnectionStatus('offline')
+			const localPage = makePage('Offline Page')
+			store.put([localPage]) // reaches speculativeChanges
+
+			// In the browser the store delivers history on the next animation frame, so the client's
+			// view of speculative changes can lag the store. Hold the next flush back the same way.
+			const flushHistory = store._flushHistory
+			store._flushHistory = () => {}
+			store.remove([localPage.id]) // ...so this delete is still queued when we reconnect
+			store._flushHistory = flushHistory
+
+			socket.mockConnectionStatus('online')
+			socket.mockServerMessage(
+				createConnectMessage({ hydrationType: 'wipe_presence', serverClock: 2, diff: {} })
+			)
+			vi.advanceTimersByTime(100)
+
+			// the user deleted the page: it must not come back, and must not be pushed as a put
+			expect(store.get(localPage.id)).toBeUndefined()
+			expect(
+				getSentPushes().some((msg) => msg.diff?.[localPage.id]?.[0] === RecordOpType.Put)
+			).toBe(false)
+		})
+
+		it('[CL5] a store listener that throws during the reconnect flush does not stall the connect', () => {
+			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+			try {
+				client = createClient()
+				let listenerThrown = false
+				store.listen(() => {
+					if (listenerThrown) return
+					listenerThrown = true
+					throw new Error('listener error')
+				})
+
+				// queue a local change behind the frame throttle so the connect flush delivers it
+				const flushHistory = store._flushHistory
+				store._flushHistory = () => {}
+				const localPage = makePage('Local Page', 'a5')
+				store.put([localPage])
+				store._flushHistory = flushHistory
+
+				const serverDiff = documentScopeDiff()
+				delete serverDiff[localPage.id] // the server never saw it
+				socket.mockServerMessage(createConnectMessage({ diff: serverDiff }))
+				vi.advanceTimersByTime(100)
+
+				expect(client.isConnectedToRoom).toBe(true)
+				expect(onLoad).toHaveBeenCalled()
+				expect(store.get(localPage.id)).toEqual(localPage)
+				expect(
+					getSentPushes().some((msg) => msg.diff?.[localPage.id]?.[0] === RecordOpType.Put)
+				).toBe(true)
+			} finally {
+				consoleSpy.mockRestore()
+			}
+		})
+
 		it('[CL6] wipe_all reconnect wipes document records before applying the server diff', () => {
 			client = createClient()
 

package/src/lib/TLSyncClient.ts

@@ -122,6 +122,8 @@ export const TLSyncErrorCloseEventReason = {
 	RATE_LIMITED: 'RATE_LIMITED',
 	/** Room has reached maximum capacity */
 	ROOM_FULL: 'ROOM_FULL',
+	/** A single message exceeded the size the server will assemble */
+	MESSAGE_TOO_LARGE: 'MESSAGE_TOO_LARGE',
 } as const
 
 /**
@@ -752,6 +754,15 @@ export class TLSyncClient<R extends UnknownRecord, S extends Store<R> = Store<R>
 			this.resetConnection(true)
 			return
 		}
+		// Local changes reach `push` (and so `speculativeChanges`) on the store's frame-throttled
+		// history flush. Anything still queued there would be neither reverted below nor
+		// re-applied on top of the server state, so bring speculativeChanges up to date first.
+		try {
+			this.store._flushHistory()
+		} catch (e) {
+			console.error(e)
+		}
+
 		// at the end of this process we want to have at most one pending push request
 		// based on anything inside this.speculativeChanges
 		transact(() => {