Properly stop document fetching in error states and always require to reconnect manually

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

2 files changed, 12 insertions, 9 deletions

diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index 26d6f0f12..c5055ce3e 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -26,11 +26,11 @@
 			<p v-if="hasSyncCollission" class="msg icon-error">
 				{{ t('text', 'The document has been changed outside of the editor. The changes cannot be applied.') }}
 			</p>
-			<p v-if="hasConnectionIssue" class="msg icon-info">
+			<p v-else-if="hasConnectionIssue" class="msg icon-info">
 				{{ t('text', 'File could not be loaded. Please check your internet connection.') }} <a class="button primary" @click="reconnect">{{ t('text', 'Retry') }}</a>
 			</p>
 		</div>
-		<div v-if="currentSession && active" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading || hasConnectionIssue, 'richEditor': isRichEditor}">
+		<div v-if="currentSession && active" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading && !hasConnectionIssue, 'richEditor': isRichEditor}">
 			<div id="editor">
 				<MenuBar v-if="!syncError && !readOnly"
 					ref="menubar"
@@ -52,7 +52,7 @@
 				<div>
 					<MenuBubble v-if="!readOnly && isRichEditor"
 						:editor="tiptap"
-						:filePath="relativePath" />
+						:file-path="relativePath" />
 					<EditorContent v-show="initialLoading"
 						class="editor__content"
 						:editor="tiptap" />
@@ -375,10 +375,9 @@ export default {
 						}
 					}
 					if (error === ERROR_TYPE.SOURCE_NOT_FOUND) {
-						this.initialLoading = false
-						this.$emit('close')
-						this.$emit('error')
+						this.hasConnectionIssue = true
 					}
+					this.$emit('ready')
 				})
 				.on('stateChange', (state) => {
 					if (state.initialLoading && !this.initialLoading) {
@@ -421,6 +420,8 @@ export default {
 		},
 
 		reconnect() {
+			this.initialLoading = false
+			this.hasConnectionIssue = false
 			if (this.syncService) {
 				this.syncService.close().then(() => {
 					this.syncService = null
diff --git a/src/services/PollingBackend.js b/src/services/PollingBackend.js
index 555dd509d..dc0c743f7 100644
--- a/src/services/PollingBackend.js
+++ b/src/services/PollingBackend.js
@@ -145,7 +145,7 @@ class PollingBackend {
 			if (!e.response || e.code === 'ECONNABORTED') {
 				if (this.fetchRetryCounter++ >= MAX_RETRY_FETCH_COUNT) {
 					console.error('[PollingBackend:fetchSteps] Network error when fetching steps, emitting CONNECTION_FAILED')
-					this._authority.emit('error', ERROR_TYPE.CONNECTION_FAILED, {})
+					this._authority.emit('error', ERROR_TYPE.CONNECTION_FAILED, { retry: false })
 
 				} else {
 					console.error(`[PollingBackend:fetchSteps] Network error when fetching steps, retry ${this.fetchRetryCounter}`)
@@ -158,14 +158,16 @@ class PollingBackend {
 				})
 			} else if (e.response.status === 403) {
 				this._authority.emit('error', ERROR_TYPE.SOURCE_NOT_FOUND, {})
+				this.disconnect()
 			} else if (e.response.status === 404) {
 				this._authority.emit('error', ERROR_TYPE.SOURCE_NOT_FOUND, {})
+				this.disconnect()
 			} else if (e.response.status === 503) {
 				this.increaseRefetchTimer()
-				this._authority.emit('error', ERROR_TYPE.CONNECTION_FAILED, { retry: true })
+				this._authority.emit('error', ERROR_TYPE.CONNECTION_FAILED, { retry: false })
 				console.error('Failed to fetch steps due to unavailable service', e)
 			} else {
-				this.increaseRefetchTimer()
+				this.disconnect()
 				this._authority.emit('error', ERROR_TYPE.CONNECTION_FAILED, { retry: false })
 				console.error('Failed to fetch steps due to other reason', e)
 			}