chore: Add helpful comments and code bits for y.js debugging

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/Editor.vue

@@ -321,6 +321,11 @@ export default {
 	},
 	created() {
 		this.$ydoc = new Doc()
+		// The following can be useful for debugging ydoc updates
+		// this.$ydoc.on('update', function(update, origin, doc, tr) {
+		//   console.debug('ydoc update', update, origin, doc, tr)
+		//   Y.logUpdate(update)
+		// });
 		this.$providers = []
 		this.$editor = null
 		this.$syncService = null

src/helpers/yjs.js

@@ -22,6 +22,7 @@
 
 import { encodeArrayBuffer, decodeArrayBuffer } from '../helpers/base64.js'
 import { Doc, encodeStateAsUpdate, applyUpdate } from 'yjs'
+import * as decoding from 'lib0/decoding.js'
 
 /**
  *
@@ -41,3 +42,31 @@ export function applyDocumentState(ydoc, documentState) {
 	const update = decodeArrayBuffer(documentState)
 	applyUpdate(ydoc, update)
 }
+
+/**
+ * Log y.js messages with their type and initiator call stack
+ *
+ * @param {string} step - Y.js message
+ */
+export function logStep(step) {
+	// Create error for stack trace
+	const err = new Error()
+
+	const decoder = decoding.createDecoder(step)
+
+	const messageType = decoding.readVarUint(decoder)
+	const subType = decoding.readVarUint(decoder)
+
+	const encodedStep = encodeArrayBuffer(step)
+	switch (messageType) {
+	case 0:
+		console.debug('y.js message sync', subType, encodedStep, err.stack)
+		break
+	case 3:
+		console.debug('y.js message awareness_query', encodedStep, err.stack)
+		break
+	case 1:
+		console.debug('y.js message awareness', encodedStep, err.stack)
+		break
+	}
+}

src/services/WebSocketPolyfill.js

@@ -80,6 +80,9 @@ export default function initWebSocketPolyfill(syncService, fileId, initialSessio
 		}
 
 		send(...data) {
+			// Useful for debugging what steps are sent and how they were initiated
+			// data.forEach(logStep)
+
 			const sending = this.#queue.length > 0
 			this.#queue.push(...data)
 			if (!sending) {