@tldraw/sync-core 5.6.0-next.d6710de420bf → 5.6.0-next.f151f7f3ebd6

package/src/lib/TLSocketRoom.ts

@@ -355,10 +355,12 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 	) {
 		const { sessionId, socket, isReadonly = false, objectAccess = 'write' } = opts
 		const handleSocketMessage = (event: MessageEvent) =>
-			this.handleSocketMessage(sessionId, event.data)
-		const handleSocketError = this.handleSocketError.bind(this, sessionId)
-		const handleSocketClose = this.handleSocketClose.bind(this, sessionId)
+			this.handleSocketMessage(sessionId, event.data, socket)
+		const handleSocketError = () => this.handleSocketError(sessionId, socket)
+		const handleSocketClose = () => this.handleSocketClose(sessionId, socket)
 
+		// A reconnect under the same session id can leave the old socket open.
+		this.sessions.get(sessionId)?.unlisten()
 		this.sessions.set(sessionId, {
 			assembler: new JsonChunkAssembler(),
 			socket,
@@ -422,8 +424,14 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 	 * The method handles message chunking/reassembly and forwards complete messages
 	 * to the underlying sync room for processing.
 	 *
+	 * Pass the socket the message came from whenever you have it. A client that reconnects under
+	 * the same session id can leave its previous socket delivering messages for a while; with the
+	 * socket given, those are dropped instead of being spliced into the new socket's chunked
+	 * messages.
+	 *
 	 * @param sessionId - Session identifier matching the one used in handleSocketConnect
 	 * @param message - Raw message data from the client (string or binary)
+	 * @param socket - The socket the message arrived on, when known
 	 *
 	 * @example
 	 * ```ts
@@ -435,17 +443,30 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 	 *   },
 	 *   message(ws, message) {
 	 *     const { sessionId, room } = ws.data
-	 *     room.handleSocketMessage(sessionId, message)
+	 *     room.handleSocketMessage(sessionId, message, ws)
 	 *   }
 	 * })
 	 * ```
 	 */
-	handleSocketMessage(sessionId: string, message: string | AllowSharedBufferSource) {
-		const assembler = this.sessions.get(sessionId)?.assembler
-		if (!assembler) {
+	handleSocketMessage(
+		sessionId: string,
+		message: string | AllowSharedBufferSource,
+		socket?: WebSocketMinimal
+	) {
+		const entry = this.sessions.get(sessionId)
+		if (!entry) {
 			this.log?.warn?.('Received message from unknown session', sessionId)
 			return
 		}
+		// Each socket carries its own chunk sequence, but the assembler belongs to the session id.
+		// Feeding a superseded socket's in-flight chunks into the replacement's assembler breaks
+		// both messages ("Unexpected non-chunk message", "Chunks received in wrong order", or a
+		// lone tail chunk parsed as JSON) — see #10132.
+		if (socket && entry.socket !== socket) {
+			this.log?.warn?.('Ignoring message from superseded socket', sessionId)
+			return
+		}
+		const assembler = entry.assembler
 
 		try {
 			const messageString =
@@ -500,17 +521,22 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 	 * where socket event listeners cannot be attached directly. This will initiate cleanup
 	 * and session removal for the affected client.
 	 *
+	 * Pass the socket the error came from whenever you have it, so a superseded socket's error
+	 * after a same-id reconnect doesn't cancel the replacement session.
+	 *
 	 * @param sessionId - Session identifier matching the one used in handleSocketConnect
+	 * @param socket - The socket the error came from, when known
 	 *
 	 * @example
 	 * ```ts
 	 * // In a custom WebSocket handler
 	 * socket.addEventListener('error', () => {
-	 *   room.handleSocketError(sessionId)
+	 *   room.handleSocketError(sessionId, socket)
 	 * })
 	 * ```
 	 */
-	handleSocketError(sessionId: string) {
+	handleSocketError(sessionId: string, socket?: WebSocketMinimal) {
+		if (this.isSupersededSocket(sessionId, socket)) return
 		this.clearSnapshotTimer(sessionId)
 		this.room.handleClose(sessionId)
 	}
@@ -520,21 +546,33 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 	 * environments where socket event listeners cannot be attached directly. This will
 	 * initiate cleanup and session removal for the disconnected client.
 	 *
+	 * Pass the socket the close came from whenever you have it. A client that reconnects under the
+	 * same session id can leave its previous socket half-open, and that socket's late close would
+	 * otherwise cancel the new, live session.
+	 *
 	 * @param sessionId - Session identifier matching the one used in handleSocketConnect
+	 * @param socket - The socket that closed, when known
 	 *
 	 * @example
 	 * ```ts
 	 * // In a custom WebSocket handler
 	 * socket.addEventListener('close', () => {
-	 *   room.handleSocketClose(sessionId)
+	 *   room.handleSocketClose(sessionId, socket)
 	 * })
 	 * ```
 	 */
-	handleSocketClose(sessionId: string) {
+	handleSocketClose(sessionId: string, socket?: WebSocketMinimal) {
+		if (this.isSupersededSocket(sessionId, socket)) return
 		this.clearSnapshotTimer(sessionId)
 		this.room.handleClose(sessionId)
 	}
 
+	private isSupersededSocket(sessionId: string, socket: WebSocketMinimal | undefined) {
+		if (!socket) return false
+		const entry = this.sessions.get(sessionId)
+		return !!entry && entry.socket !== socket
+	}
+
 	/**
 	 * Resumes a previously-connected session directly into `Connected` state, bypassing
 	 * the connect handshake. Use this after server hibernation (e.g., Cloudflare Durable
@@ -576,6 +614,7 @@ export class TLSocketRoom<R extends UnknownRecord = UnknownRecord, SessionMeta =
 	) {
 		const { sessionId, socket, snapshot } = opts
 
+		this.sessions.get(sessionId)?.unlisten()
 		this.sessions.set(sessionId, {
 			assembler: new JsonChunkAssembler(),
 			socket,

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

@@ -754,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(() => {

package/src/test/TLSocketRoom.test.ts

@@ -21,7 +21,7 @@ import {
 	ZERO_INDEX_KEY,
 } from 'tldraw'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { MAX_ASSEMBLED_MESSAGE_CHARS } from '../lib/chunk'
+import { chunk, MAX_ASSEMBLED_MESSAGE_CHARS } from '../lib/chunk'
 import { RecordOpType } from '../lib/diff'
 import { DEFAULT_INITIAL_SNAPSHOT, InMemorySyncStorage } from '../lib/InMemorySyncStorage'
 import { getTlsyncProtocolVersion } from '../lib/protocol'
@@ -454,6 +454,75 @@ describe('28. TLSocketRoom (SR)', () => {
 			expect(room.getSessions()).toHaveLength(0)
 		})
 
+		it('[SR5] ignores chunks from a superseded socket so they do not corrupt the replacement socket', () => {
+			const log: TLSyncLog = { warn: vi.fn(), error: vi.fn() }
+			const room = new TLSocketRoom({ log })
+			const oldSocket = createMockSocket()
+			connectSession(room, 'S', oldSocket)
+			// the client reconnects under the same session id while the old socket is still draining
+			const newSocket = createMockSocket()
+			connectSession(room, 'S', newSocket)
+			vi.mocked(newSocket.send).mockClear()
+
+			const oldChunks = chunk(JSON.stringify({ type: 'ping' }), 4)
+			const newChunks = chunk(JSON.stringify({ type: 'ping' }), 5)
+			expect(oldChunks.length).toBeGreaterThan(1)
+			expect(newChunks.length).toBeGreaterThan(1)
+			// interleave the two sockets' chunk sequences, as a hibernation host delivers them
+			for (let i = 0; i < Math.max(oldChunks.length, newChunks.length); i++) {
+				if (oldChunks[i]) room.handleSocketMessage('S', oldChunks[i], oldSocket)
+				if (newChunks[i]) room.handleSocketMessage('S', newChunks[i], newSocket)
+			}
+			// a lone complete message from the old socket mid-sequence is ignored too
+			room.handleSocketMessage('S', JSON.stringify({ type: 'ping' }), oldSocket)
+
+			expect(log.error).not.toHaveBeenCalled()
+			expect(newSocket.close).not.toHaveBeenCalled()
+			expect(room.getSessions()).toEqual([
+				expect.objectContaining({ sessionId: 'S', isConnected: true }),
+			])
+			expect(vi.mocked(newSocket.send).mock.calls.map((c) => JSON.parse(c[0]).type)).toEqual([
+				'pong',
+			])
+		})
+
+		it("[SR4][SR5] the listeners attached by handleSocketConnect drop a superseded socket's messages", () => {
+			function createListeningSocket() {
+				const listeners: Record<string, ((e: any) => void)[]> = {}
+				const socket: WebSocketMinimal & { fire(type: string, data: string): void } = {
+					send: vi.fn(),
+					close: vi.fn(),
+					readyState: WebSocket.OPEN,
+					addEventListener: vi.fn((type: string, fn: (e: any) => void) => {
+						;(listeners[type] ??= []).push(fn)
+					}),
+					removeEventListener: vi.fn(),
+					fire(type, data) {
+						for (const fn of listeners[type] ?? []) fn({ data })
+					},
+				}
+				return socket
+			}
+			const log: TLSyncLog = { warn: vi.fn(), error: vi.fn() }
+			const room = new TLSocketRoom({ log })
+			const oldSocket = createListeningSocket()
+			connectSession(room, 'S', oldSocket)
+			const newSocket = createListeningSocket()
+			connectSession(room, 'S', newSocket)
+
+			const [first, ...rest] = chunk(JSON.stringify({ type: 'ping' }), 5)
+			newSocket.fire('message', first)
+			// the old socket's tail chunk would otherwise be assembled onto the new socket's sequence
+			oldSocket.fire('message', '0_kPAAAjzgAA')
+			for (const c of rest) newSocket.fire('message', c)
+
+			expect(log.error).not.toHaveBeenCalled()
+			expect(newSocket.close).not.toHaveBeenCalled()
+			expect(vi.mocked(newSocket.send).mock.calls.map((c) => JSON.parse(c[0]).type)).toContain(
+				'pong'
+			)
+		})
+
 		it('[SR5] warns when receiving a message from an unknown session', () => {
 			const log: TLSyncLog = { warn: vi.fn(), error: vi.fn() }
 			const room = new TLSocketRoom({ log })
@@ -585,6 +654,68 @@ describe('28. TLSocketRoom (SR)', () => {
 			expect(room.getSessions()[0].isConnected).toBe(false)
 			expect(socket.close).toHaveBeenCalled()
 		})
+
+		it.each(['handleSocketClose', 'handleSocketError'] as const)(
+			"[SR6][SR12] %s ignores a superseded socket's late event after a same-id reconnect",
+			(method) => {
+				vi.useFakeTimers()
+				try {
+					const onSessionSnapshot = vi.fn()
+					const room = new TLSocketRoom({ onSessionSnapshot })
+					const oldSocket = createMockSocket()
+					connectSession(room, 'S', oldSocket)
+					const newSocket = createMockSocket()
+					connectSession(room, 'S', newSocket)
+
+					room[method]('S', oldSocket)
+
+					expect(room.getSessions()).toEqual([
+						expect.objectContaining({ sessionId: 'S', isConnected: true }),
+					])
+					expect(newSocket.close).not.toHaveBeenCalled()
+					// the live session's pending snapshot survives the superseded event
+					vi.advanceTimersByTime(5100)
+					expect(onSessionSnapshot).toHaveBeenCalledTimes(1)
+
+					room[method]('S', newSocket)
+					expect(room.getSessions()[0].isConnected).toBe(false)
+				} finally {
+					vi.useRealTimers()
+				}
+			}
+		)
+
+		it("[SR4][SR6] a reconnect detaches the previous socket's listeners", () => {
+			const listeners = new Map<string, (e: any) => void>()
+			const oldSocket = createMockSocket({
+				addEventListener: vi.fn((type: string, fn: (e: any) => void) => listeners.set(type, fn)),
+				removeEventListener: vi.fn((type: string, fn: (e: any) => void) => {
+					if (listeners.get(type) === fn) listeners.delete(type)
+				}),
+			})
+			connectSession(room, 'S', oldSocket)
+			expect([...listeners.keys()].sort()).toEqual(['close', 'error', 'message'])
+
+			connectSession(room, 'S', createMockSocket())
+
+			expect(listeners.size).toBe(0)
+		})
+
+		it.each(['close', 'error'] as const)(
+			'[SR4][SR6] firing the attached %s listener cancels the session',
+			(type) => {
+				const listeners = new Map<string, (e: any) => void>()
+				const socket = createMockSocket({
+					addEventListener: vi.fn((t: string, fn: (e: any) => void) => listeners.set(t, fn)),
+				})
+				connectSession(room, 'S', socket)
+
+				listeners.get(type)!(new Event(type))
+
+				expect(room.getSessions()[0].isConnected).toBe(false)
+				expect(socket.close).toHaveBeenCalled()
+			}
+		)
 	})
 
 	describe('session reporting', () => {