fix/sync error cleanup

src/components/Editor.vue

@@ -335,6 +335,13 @@ export default {
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
 		subscribe('text:translate-modal:show', this.showTranslateModal)
+
+		window.addEventListener('beforeunload', (e) => {
+			if (this.$queue.length > 0) {
+				e.preventDefault()
+				e.returnValue = t('text', 'Some changes have not been synced. You might loose your edits when leaving the page.')
+			}
+		})
 	},
 	created() {
 		this.$ydoc = new Doc()
@@ -559,14 +566,14 @@ export default {
 			this.document = document
 
 			this.syncError = null
-			const editable = !this.readOnly
+			const editable = !this.readOnly && !this.hasConnectionIssue
 			if (this.$editor.isEditable !== editable) {
 				this.$editor.setEditable(editable)
 			}
 		},
 
 		onSync({ steps, document }) {
-			this.hasConnectionIssue = false
+			this.hasConnectionIssue = !this.$providers[0].wsconnected || this.$syncService.pushError > 0
 			this.$nextTick(() => {
 				this.emit('sync-service:sync')
 			})

src/components/Editor/Status.vue

@@ -6,12 +6,16 @@
 <template>
 	<div class="text-editor__session-list">
 		<div :title="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
-			<NcButton type="tertiary"
+			<NcButton v-if="statusIndicatorError" type="tertiary">
+				<template #icon>
+					<SyncAlertIcon />
+				</template>
+			</NcButton>
+			<NcButton v-else type="tertiary"
 				:aria-label="t('text', 'Save document')"
 				@click="onClickSave">
 				<template #icon>
-					<NcSavingIndicatorIcon :saving="saveStatusClass === 'saving'"
-						:error="saveStatusClass === 'error'" />
+					<NcSavingIndicatorIcon :saving="statusIndicatorSaving" />
 				</template>
 			</NcButton>
 		</div>
@@ -29,6 +33,7 @@
 import { ERROR_TYPE } from '../../services/SyncService.js'
 import moment from '@nextcloud/moment'
 import { NcButton, NcSavingIndicatorIcon } from '@nextcloud/vue'
+import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
 import {
 	useIsMobileMixin,
 	useIsPublicMixin,
@@ -40,6 +45,7 @@
 	name: 'Status',
 
 	components: {
+		SyncAlertIcon,
 		NcButton,
 		NcSavingIndicatorIcon,
 		SessionList: () => import(/* webpackChunkName: "editor-collab" */'./SessionList.vue'),
@@ -77,14 +83,6 @@
 	},
 
 	computed: {
-		lastSavedStatus() {
-			if (this.hasConnectionIssue) {
-				return this.$isMobile
-					? t('text', 'Offline')
-					: t('text', 'Offline, changes will be saved when online')
-			}
-			return this.dirtyStateIndicator ? t('text', 'Saving …') : t('text', 'Saved')
-		},
 		dirtyStateIndicator() {
 			return this.dirty || this.hasUnsavedChanges
 		},
@@ -93,6 +91,11 @@
 			if (this.hasSyncCollission) {
 				message = t('text', 'The document has been changed outside of the editor. The changes cannot be applied.')
 			}
+			if (this.hasConnectionIssue) {
+				return this.$isMobile
+					? t('text', 'Offline')
+					: t('text', 'Offline, changes will be saved when online')
+			}
 			if (this.dirty || this.hasUnsavedChanges) {
 				message += ' - ' + t('text', 'Unsaved changes')
 			}
@@ -105,11 +108,23 @@
 		hasSyncCollission() {
 			return this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISSION
 		},
-		saveStatusClass() {
+		statusIndicatorSaving() {
 			if (this.syncError && this.lastSavedString !== '') {
-				return 'error'
+				return false
 			}
-			return this.dirtyStateIndicator ? 'saving' : 'saved'
+
+			return this.dirtyStateIndicator
+		},
+		statusIndicatorError() {
+			if (this.syncError && this.lastSavedString !== '') {
+				return true
+			}
+
+			if (this.hasConnectionIssue) {
+				return true
+			}
+
+			return false
 		},
 		currentSession() {
 			return Object.values(this.sessions).find((session) => session.isCurrent)

src/services/SyncService.js

@@ -77,6 +77,8 @@ class SyncService {
 
 		this.autosave = debounce(this._autosave.bind(this), AUTOSAVE_INTERVAL)
 
+		this.pushError = 0
+
 		return this
 	}
 
@@ -88,8 +90,12 @@ class SyncService {
 		return this.#connection.session.guestName
 	}
 
+	get hasActiveConnection() {
+		return this.#connection && !this.#connection.isClosed
+	}
+
 	async open({ fileId, initialSession }) {
-		if (this.#connection && !this.#connection.isClosed) {
+		if (this.hasActiveConnection) {
 			// We're already connected.
 			return
 		}
@@ -166,6 +172,7 @@ class SyncService {
 		}
 		return this.#connection.push(data)
 			.then((response) => {
+				this.pushError = 0
 				this.sending = false
 				this.emit('sync', {
 					steps: [],
@@ -175,6 +182,7 @@ class SyncService {
 			}).catch(err => {
 				const { response, code } = err
 				this.sending = false
+				this.pushError++
 				if (!response || code === 'ECONNABORTED') {
 					this.emit('error', { type: ERROR_TYPE.CONNECTION_FAILED, data: {} })
 				}
@@ -191,6 +199,8 @@ class SyncService {
 						this.emit('error', { type: ERROR_TYPE.PUSH_FAILURE, data: {} })
 						OC.Notification.showTemporary('Changes could not be sent yet')
 					}
+				} else {
+					this.emit('error', { type: ERROR_TYPE.PUSH_FAILURE, data: {} })
 				}
 				throw new Error('Failed to apply steps. Retry!', { cause: err })
 			})
@@ -301,7 +311,7 @@ class SyncService {
 		// Make sure to leave no pending requests behind.
 		this.autosave.clear()
 		this.backend?.disconnect()
-		if (!this.#connection || this.#connection.isClosed) {
+		if (!this.hasActiveConnection) {
 			return
 		}
 		return this.#connection.close()

src/services/WebSocketPolyfill.js

@@ -34,6 +34,9 @@ export default function initWebSocketPolyfill(syncService, fileId, initialSessio
 			this.#notifyPushBus?.on('notify_push', this.#onNotifyPush.bind(this))
 			this.url = url
 			logger.debug('WebSocketPolyfill#constructor', { url, fileId, initialSession })
+			if (syncService.hasActiveConnection) {
+				setTimeout(() => this.onopen?.(), 0)
+			}
 			this.#registerHandlers({
 				opened: ({ version, session }) => {
 					this.#version = version
@@ -88,7 +91,10 @@ export default function initWebSocketPolyfill(syncService, fileId, initialSessio
 					...queue.filter(s => !outbox.includes(s)),
 				)
 				return ret
-			}, err => logger.error(err))
+			}, err => {
+				logger.error(`Failed to push the queue with ${queue.length} steps to the server`, err)
+				this.onerror?.(err)
+			})
 		}
 
 		async close() {