Proper error handling when fetching comments fails

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

src/components/card/CardSidebarTabComments.vue

@@ -23,8 +23,8 @@
 		</ul>
 		<div v-else-if="isLoading" class="icon icon-loading" />
 		<div v-else class="emptycontent">
-			<div class="icon-comment" />
+			<div :class="{ 'icon-comment': !error, 'icon-error': error }" />
-			<p>{{ t('deck', 'No comments yet. Begin the discussion!') }}</p>
+			<p>{{ error || t('deck', 'No comments yet. Begin the discussion!') }}</p>
 		</div>
 	</div>
 </template>
@@ -60,6 +60,7 @@ export default {
 			newComment: '',
 			isLoading: false,
 			currentUser: getCurrentUser(),
+			error: null,
 		}
 	},
 	computed: {
@@ -85,19 +86,33 @@ export default {
 	},
 	methods: {
 		async infiniteHandler($state) {
-			await this.loadMore()
+			this.error = null
-			if (this.hasMoreComments(this.card.id)) {
+			try {
-				$state.loaded()
+				await this.loadMore()
-			} else {
+				if (this.hasMoreComments(this.card.id)) {
+					$state.loaded()
+				} else {
+					$state.complete()
+				}
+			} catch (e) {
+				console.error('Failed to fetch more comments during infinite loading', e)
+				this.error = t('deck', 'Failed to load comments')
 				$state.complete()
 			}
 		},
 		async loadComments() {
+			this.error = null
 			this.isLoading = true
-			await this.$store.dispatch('fetchComments', { cardId: this.card.id })
+			try {
-			this.isLoading = false
+				await this.$store.dispatch('fetchComments', { cardId: this.card.id })
-			if (this.card.commentsUnread > 0) {
+				this.isLoading = false
-				await this.$store.dispatch('markCommentsAsRead', this.card.id)
+				if (this.card.commentsUnread > 0) {
+					await this.$store.dispatch('markCommentsAsRead', this.card.id)
+				}
+			} catch (e) {
+				this.isLoading = false
+				console.error('Failed to fetch more comments during infinite loading', e)
+				this.error = t('deck', 'Failed to load comments')
 			}
 		},
 		async createComment(content) {