fix(sync): allow writing during short connection failures

Delay the error message and allow editing for 5 seconds.

Also speed up the recovery by triggering push after a successful sync.

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

cypress/e2e/sync.spec.js

@@ -69,15 +69,23 @@ describe('Sync', () => {
 			.should('include', 'after the lost connection')
 	})
 
+	it('handles brief network outages', () => {
+		cy.intercept('**/apps/text/session/*/*', req => req.destroy()).as('dead')
+		cy.wait('@dead', { timeout: 30000 })
+		// bring back the network connection
+		cy.intercept('**/apps/text/session/*/*', req => { req.continue() }).as('alive')
+		cy.wait('@alive', { timeout: 30000 })
+		cy.getContent().type('staying alive')
+		cy.getContent().should('contain', 'staying alive')
+	})
+
 	it('reconnects via button after a short lost connection', () => {
 		cy.intercept('**/apps/text/session/*/*', req => req.destroy()).as('dead')
 		cy.wait('@dead', { timeout: 30000 })
 		cy.get('#editor-container .document-status', { timeout: 30000 })
 			.should('contain', 'The document could not be loaded.')
 		cy.get('#editor-container .document-status')
 			.find('.button.primary').click()
-		cy.get('.toastify').should('contain', 'Connection failed.')
-		cy.get('.toastify', { timeout: 30000 }).should('not.exist')
 		cy.get('#editor-container .document-status', { timeout: 30000 })
 			.should('contain', 'The document could not be loaded.')
 		// bring back the network connection

src/components/Editor.vue

@@ -14,7 +14,7 @@
 		<CollisionResolveDialog v-if="isResolvingConflict" :sync-error="syncError" />
 		<Wrapper v-if="displayed"
 			:is-resolving-conflict="isResolvingConflict"
-			:has-connection-issue="hasConnectionIssue"
+			:has-connection-issue="requireReconnect"
 			:content-loaded="contentLoaded"
 			:show-outline-outside="showOutlineOutside"
 			@read-only-toggled="readOnlyToggled"
@@ -28,7 +28,7 @@
 								:dirty="dirty"
 								:sessions="filteredSessions"
 								:sync-error="syncError"
-								:has-connection-issue="hasConnectionIssue" />
+								:has-connection-issue="requireReconnect" />
 						</ReadonlyBar>
 					</slot>
 				</div>
@@ -43,7 +43,7 @@
 							:dirty="dirty"
 							:sessions="filteredSessions"
 							:sync-error="syncError"
-							:has-connection-issue="hasConnectionIssue"
+							:has-connection-issue="requireReconnect"
 							@editor-width-change="handleEditorWidthChange" />
 						<slot name="header" />
 					</MenuBar>
@@ -58,7 +58,7 @@
 			<DocumentStatus :idle="idle"
 				:lock="lock"
 				:sync-error="syncError"
-				:has-connection-issue="hasConnectionIssue"
+				:has-connection-issue="requireReconnect"
 				@reconnect="reconnect" />
 		</Wrapper>
 		<Assistant v-if="hasEditor" />
@@ -241,7 +241,9 @@ export default {
 			const maxWidth = Math.floor(value) - 36
 			el.value.style.setProperty('--widget-full-width', `${maxWidth}px`)
 		})
-		return { el, width }
+		const hasConnectionIssue = ref(false)
+		const { delayed: requireReconnect } = useDelayedFlag(hasConnectionIssue)
+		return { el, width, hasConnectionIssue, requireReconnect }
 	},
 
 	data() {
@@ -259,7 +261,6 @@ export default {
 			dirty: false,
 			contentLoaded: false,
 			syncError: null,
-			hasConnectionIssue: false,
 			hasEditor: false,
 			readOnly: true,
 			openReadOnlyEnabled: OCA.Text.OpenReadOnlyEnabled,
@@ -351,6 +352,14 @@ export default {
 				window.removeEventListener('beforeunload', this.saveBeforeUnload)
 			}
 		},
+		requireReconnect(val) {
+			if (val) {
+				this.emit('sync-service:error')
+			}
+			if (this.$editor?.isEditable === val) {
+				this.$editor.setEditable(!val)
+			}
+		},
 	},
 	mounted() {
 		if (this.active && (this.hasDocumentParameters)) {
@@ -596,7 +605,7 @@ export default {
 			this.document = document
 
 			this.syncError = null
-			const editable = this.editMode && !this.hasConnectionIssue
+			const editable = this.editMode && !this.requireReconnect
 			if (this.$editor.isEditable !== editable) {
 				this.$editor.setEditable(editable)
 			}
@@ -619,7 +628,13 @@ export default {
 		},
 
 		onSync({ steps, document }) {
-			this.hasConnectionIssue = this.$syncService.backend.fetcher === 0 || !this.$providers[0].wsconnected || this.$syncService.pushError > 0
+			this.hasConnectionIssue = this.$syncService.backend.fetcher === 0
+				|| !this.$providers[0].wsconnected
+				|| this.$syncService.pushError > 0
+			if (this.$syncService.pushError > 0) {
+				// successfully received steps - so let's try and also push
+				this.$syncService.sendStepsNow()
+			}
 			this.$nextTick(() => {
 				this.emit('sync-service:sync')
 			})
@@ -629,11 +644,6 @@ export default {
 		},
 
 		onError({ type, data }) {
-			this.$nextTick(() => {
-				this.$editor?.setEditable(false)
-				this.emit('sync-service:error')
-			})
-
 			if (type === ERROR_TYPE.LOAD_ERROR) {
 				this.syncError = {
 					type,
@@ -648,11 +658,8 @@ export default {
 					data,
 				}
 			}
-			if (type === ERROR_TYPE.CONNECTION_FAILED && !this.hasConnectionIssue) {
-				this.hasConnectionIssue = true
-				OC.Notification.showTemporary(t('text', 'Connection failed.'))
-			}
-			if (type === ERROR_TYPE.SOURCE_NOT_FOUND) {
+			if (type === ERROR_TYPE.CONNECTION_FAILED
+				|| type === ERROR_TYPE.SOURCE_NOT_FOUND) {
 				this.hasConnectionIssue = true
 			}