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() {