From 08f48e2f7ed2fcd8f278deba6c4a4c6f052fd2f3 Mon Sep 17 00:00:00 2001
From: Silver <s.szmajduch@posteo.de>
Date: Thu, 7 Aug 2025 14:48:21 +0200
Subject: [PATCH 01/13] catch 404 when loading context, table, view

Signed-off-by: Silver <s.szmajduch@posteo.de>
---
 src/store/store.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/store/store.js b/src/store/store.js
index 04b62c0e1c..5376fdd18e 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -470,8 +470,12 @@ export const useTablesStore = defineStore('store', {
 				const res = await axios.get(generateOcsUrl('/apps/tables/api/2/contexts/' + id))
 				this.setContext(res.data.ocs.data)
 			} catch (e) {
+				if (e?.response?.status === 404) {
+					throw new Error('NOT_FOUND')
+				}
 				displayError(e, t('tables', 'Could not load application.'))
 				showError(t('tables', 'Could not fetch application'))
+				throw e
 			}
 			return true
 		},
@@ -501,8 +505,12 @@ export const useTablesStore = defineStore('store', {
 				tables.push(res.data.ocs.data)
 				this.setTables([...tables])
 			} catch (e) {
+				if (e?.response?.status === 404) {
+					throw new Error('NOT_FOUND')
+				}
 				displayError(e, t('tables', 'Could not load table.'))
 				showError(t('tables', 'Could not fetch table'))
+				throw e
 			}
 			return res?.data.ocs.data
 		},
@@ -519,8 +527,12 @@ export const useTablesStore = defineStore('store', {
 				views.push(res.data)
 				this.setViews([...views])
 			} catch (e) {
+				if (e?.response?.status === 404) {
+					throw new Error('NOT_FOUND')
+				}
 				displayError(e, t('tables', 'Could not load view'))
 				showError(t('tables', 'Could not fetch view'))
+				throw e
 			}
 			return res?.data
 		},

From 338279b0ade210f6b924eb42657345a92e205e6a Mon Sep 17 00:00:00 2001
From: Silver <s.szmajduch@posteo.de>
Date: Thu, 7 Aug 2025 14:49:43 +0200
Subject: [PATCH 02/13] show error messages in ui for nonexistent context,
 table, view

Signed-off-by: Silver <s.szmajduch@posteo.de>
---
 src/pages/Context.vue | 120 +++++++++++++++++++++++++++++-------------
 src/pages/Table.vue   |  85 +++++++++++++++++++++++++-----
 src/pages/View.vue    |  79 ++++++++++++++++++++++++---
 3 files changed, 228 insertions(+), 56 deletions(-)

diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 6bc84a53d9..ee995a378a 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -5,7 +5,13 @@
 <template>
 	<div class="row">
 		<div v-if="loading" class="icon-loading" />
-		<div v-if="!loading && context">
+
+		<div v-else-if="errorMessage" class="error-container">
+			<IconTables :size="64" style="margin-bottom: 1rem;" />
+			<p>{{ errorMessage }}</p>
+		</div>
+
+		<div v-else>
 			<div class="content context">
 				<div class="row first-row">
 					<h1 class="context__title" data-cy="context-title">
@@ -50,11 +56,13 @@ import exportTableMixin from '../shared/components/ncTable/mixins/exportTableMix
 import svgHelper from '../shared/components/ncIconPicker/mixins/svgHelper.js'
 import { useTablesStore } from '../store/store.js'
 import { useDataStore } from '../store/data.js'
+import IconTables from '../shared/assets/icons/IconTables.vue'
 
 export default {
 	components: {
 		MainModals,
 		NcIconSvgWrapper,
+		IconTables,
 		TableWrapper,
 		CustomView,
 	},
@@ -73,6 +81,7 @@ export default {
 			viewSetting: {},
 			context: null,
 			contextResources: [],
+			errorMessage: null,
 		}
 	},
 
@@ -146,49 +155,66 @@ export default {
 				return
 			}
 			this.loading = true
-			this.icon = await this.getContextIcon(this.activeContext.iconName)
 			this.contextResources = []
-			await this.loadContext({ id: this.activeContextId })
-			const index = this.contexts.findIndex(c => parseInt(c.id) === parseInt(this.activeContextId))
-			this.context = this.contexts[index]
 
-			if (this.context && this.context.nodes) {
-				for (const [, node] of Object.entries(this.context.nodes)) {
-					const nodeType = parseInt(node.node_type)
-					if (nodeType === NODE_TYPE_TABLE) {
-						const table = this.tables.find(table => table.id === node.node_id)
-						if (table) {
-							await this.loadColumnsFromBE({
-								view: null,
-								tableId: table.id,
-							})
-							await this.loadRowsFromBE({
-								viewId: null,
-								tableId: table.id,
-							})
-							table.key = (table.id).toString()
-							table.isView = false
-							this.contextResources.push(table)
-						}
+			try {
+				await this.loadContext({ id: this.activeContextId })
+				const index = this.contexts.findIndex(c => parseInt(c.id) === parseInt(this.activeContextId))
+				this.context = this.contexts[index]
+
+				if (!this.context) {
+					this.errorMessage = t('tables', 'This application could not be found')
+					return
+				}
 
-					} else if (nodeType === NODE_TYPE_VIEW) {
-						const view = this.views.find(view => view.id === node.node_id)
-						if (view) {
-							await this.loadColumnsFromBE({
-								view,
-							})
-							await this.loadRowsFromBE({
-								viewId: view.id,
-								tableId: view.tableId,
-							})
-							view.key = 'view-' + (view.id).toString()
-							view.isView = true
-							this.contextResources.push(view)
+				this.icon = await this.getContextIcon(this.activeContext.iconName)
+
+				if (this.context && this.context.nodes) {
+					for (const [, node] of Object.entries(this.context.nodes)) {
+						const nodeType = parseInt(node.node_type)
+						if (nodeType === NODE_TYPE_TABLE) {
+							const table = this.tables.find(table => table.id === node.node_id)
+							if (table) {
+								await this.loadColumnsFromBE({
+									view: null,
+									tableId: table.id,
+								})
+								await this.loadRowsFromBE({
+									viewId: null,
+									tableId: table.id,
+								})
+								table.key = (table.id).toString()
+								table.isView = false
+								this.contextResources.push(table)
+							}
+
+						} else if (nodeType === NODE_TYPE_VIEW) {
+							const view = this.views.find(view => view.id === node.node_id)
+							if (view) {
+								await this.loadColumnsFromBE({
+									view,
+								})
+								await this.loadRowsFromBE({
+									viewId: view.id,
+									tableId: view.tableId,
+								})
+								view.key = 'view-' + (view.id).toString()
+								view.isView = true
+								this.contextResources.push(view)
+							}
 						}
 					}
 				}
+			} catch (e) {
+				if (e.message === 'NOT_FOUND') {
+					this.errorMessage = t('tables', 'This application could not be found')
+				} else {
+					this.errorMessage = t('tables', 'An error occurred while loading the application')
+					console.error(e)
+				}
+			} finally {
+				this.loading = false
 			}
-			this.loading = false
 		},
 		createColumn(isView, element) {
 			emit('tables:column:create', { isView, element })
@@ -235,4 +261,24 @@ export default {
 		padding-left: 0px;
 	}
 }
+
+.error-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 2rem;
+	height: 100dvh;
+	min-height: 100%;
+	color: var(--color-text);
+	opacity: 0.6;
+
+	p {
+		font-size: clamp(1.2rem, 4vw, 2rem);
+		font-weight: 600;
+		max-width: 90%;
+		word-wrap: break-word;
+	}
+}
 </style>
diff --git a/src/pages/Table.vue b/src/pages/Table.vue
index 4c0255cf77..d1e2885265 100644
--- a/src/pages/Table.vue
+++ b/src/pages/Table.vue
@@ -4,21 +4,40 @@
 -->
 <template>
 	<div class="main-table-view">
-		<MainWrapper :element="activeTable" :is-view="false" />
-		<MainModals />
+		<div v-if="errorMessage" class="error-container">
+			<IconTables :size="64" style="margin-bottom: 1rem;" />
+			<p>{{ errorMessage }}</p>
+		</div>
+
+		<div v-else-if="!activeTable">
+			<div class="icon-loading" />
+		</div>
+
+		<div v-else>
+			<MainWrapper :element="activeTable" :is-view="false" />
+			<MainModals />
+		</div>
 	</div>
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../store/store.js'
 import MainWrapper from '../modules/main/sections/MainWrapper.vue'
 import MainModals from '../modules/modals/Modals.vue'
+import IconTables from '../shared/assets/icons/IconTables.vue'
 
 export default {
 	components: {
 		MainWrapper,
 		MainModals,
+		IconTables,
+	},
+
+	data() {
+		return {
+			errorMessage: null,
+		}
 	},
 
 	computed: {
@@ -26,20 +45,42 @@ export default {
 	},
 
 	watch: {
-		activeTableId() {
-			if (this.activeTableId && !this.activeTable) {
-				// table does not exists, go to startpage
-				this.$router.push('/').catch(err => err)
-			}
+		'$route.params.tableId': {
+			immediate: true,
+			handler() {
+				this.errorMessage = null // reset previous error
+				this.checkTable()
+			},
 		},
-		activeTable() {
-			if (this.activeTableId && !this.activeTable) {
-				// table does not exists, go to startpage
-				this.$router.push('/').catch(err => err)
+	},
+
+	methods: {
+		...mapActions(useTablesStore, ['loadContextTable', 'setActiveTableId']),
+
+		async checkTable() {
+			const id = this.activeTableId || this.$route.params.tableId
+			if (!id) return
+
+			try {
+				if (!this.activeTableId) {
+					this.setActiveTableId(parseInt(id))
+				}
+
+				if (!this.activeTable) {
+					await this.loadContextTable({ id })
+				}
+			} catch (e) {
+				if (e.message === 'NOT_FOUND') {
+					this.errorMessage = t('tables', 'This table could not be found')
+				} else {
+					this.errorMessage = t('tables', 'An error occurred while loading the table')
+					console.error(e)
+				}
 			}
 		},
 	},
 }
+
 </script>
 <style lang="scss" scoped>
 .main-table-view {
@@ -52,6 +93,26 @@ export default {
 	margin: 5mm;
 }
 
+.error-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 2rem;
+	height: 100dvh;
+	min-height: 100%;
+	color: var(--color-text);
+	opacity: 0.6;
+
+	p {
+		font-size: clamp(1.2rem, 4vw, 2rem);
+		font-weight: 600;
+		max-width: 90%;
+		word-wrap: break-word;
+	}
+}
+
 @media print {
 	html, body {
 		background: var(--color-main-background, white) !important;
diff --git a/src/pages/View.vue b/src/pages/View.vue
index 844be25c74..845f35571a 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -4,22 +4,41 @@
 -->
 <template>
 	<div class="main-view-view">
-		<MainWrapper :element="activeView" :is-view="true" />
-		<MainModals />
+		<div v-if="!activeView && errorMessage" class="error-container">
+			<IconTables :size="64" style="margin-bottom: 1rem;" />
+			<p>{{ errorMessage }}</p>
+		</div>
+
+		<div v-else-if="!activeView">
+			<div class="icon-loading" />
+		</div>
+
+		<div v-else>
+			<MainWrapper :element="activeView" :is-view="true" />
+			<MainModals />
+		</div>
 	</div>
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../store/store.js'
 import MainWrapper from '../modules/main/sections/MainWrapper.vue'
 import MainModals from '../modules/modals/Modals.vue'
+import IconTables from '../shared/assets/icons/IconTables.vue'
 
 export default {
 
 	components: {
 		MainWrapper,
 		MainModals,
+		IconTables,
+	},
+
+	data() {
+		return {
+			errorMessage: null,
+		}
 	},
 
 	computed: {
@@ -27,10 +46,36 @@ export default {
 	},
 
 	watch: {
-		activeViewId() {
-			if (this.activeViewId && !this.activeView) {
-				// view does not exist, go to startpage
-				this.$router.push('/').catch(err => err)
+		'$route.params.viewId': {
+			immediate: true,
+			handler() {
+				this.errorMessage = null
+				this.checkView()
+			},
+		},
+	},
+
+	methods: {
+		...mapActions(useTablesStore, ['setActiveViewId', 'loadContextView']),
+		async checkView() {
+			const id = this.activeViewId || this.$route.params.viewId
+			if (!id) return
+
+			try {
+				if (!this.activeViewId) {
+					this.setActiveViewId(parseInt(id))
+				}
+
+				if (!this.activeView) {
+					await this.loadContextView({ id })
+				}
+			} catch (e) {
+				if (e.message === 'NOT_FOUND') {
+					this.errorMessage = t('tables', 'This view could not be found')
+				} else {
+					this.errorMessage = t('tables', 'An error occurred while loading the view')
+					console.error(e)
+				}
 			}
 		},
 	},
@@ -40,5 +85,25 @@ export default {
 .main-view-view {
 	width: max-content;
 	min-width: var(--app-content-width, 100%);
+
+.error-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 2rem;
+	height: 100dvh;
+	min-height: 100%;
+	color: var(--color-text);
+	opacity: 0.6;
+
+	p {
+		font-size: clamp(1.2rem, 4vw, 2rem);
+		font-weight: 600;
+		max-width: 90%;
+		word-wrap: break-word;
+	}
+}
 }
 </style>

From 94974a1e34c32907f2ad66e7cda29f926f55b8cb Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Mon, 11 Aug 2025 14:51:12 +0200
Subject: [PATCH 03/13] check for missing table/view children in existing
 context

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/pages/Context.vue | 63 +++++++++++++++++++++++--------------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index ee995a378a..f97ad4a678 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -171,37 +171,42 @@ export default {
 
 				if (this.context && this.context.nodes) {
 					for (const [, node] of Object.entries(this.context.nodes)) {
-						const nodeType = parseInt(node.node_type)
-						if (nodeType === NODE_TYPE_TABLE) {
-							const table = this.tables.find(table => table.id === node.node_id)
-							if (table) {
-								await this.loadColumnsFromBE({
-									view: null,
-									tableId: table.id,
-								})
-								await this.loadRowsFromBE({
-									viewId: null,
-									tableId: table.id,
-								})
-								table.key = (table.id).toString()
-								table.isView = false
-								this.contextResources.push(table)
-							}
+						try {
+							const nodeType = parseInt(node.node_type)
+							if (nodeType === NODE_TYPE_TABLE) {
+								const table = this.tables.find(table => table.id === node.node_id)
+								if (table) {
+									await this.loadColumnsFromBE({
+										view: null,
+										tableId: table.id,
+									})
+									await this.loadRowsFromBE({
+										viewId: null,
+										tableId: table.id,
+									})
+									table.key = (table.id).toString()
+									table.isView = false
+									this.contextResources.push(table)
+								}
 
-						} else if (nodeType === NODE_TYPE_VIEW) {
-							const view = this.views.find(view => view.id === node.node_id)
-							if (view) {
-								await this.loadColumnsFromBE({
-									view,
-								})
-								await this.loadRowsFromBE({
-									viewId: view.id,
-									tableId: view.tableId,
-								})
-								view.key = 'view-' + (view.id).toString()
-								view.isView = true
-								this.contextResources.push(view)
+							} else if (nodeType === NODE_TYPE_VIEW) {
+								const view = this.views.find(view => view.id === node.node_id)
+								if (view) {
+									await this.loadColumnsFromBE({
+										view,
+									})
+									await this.loadRowsFromBE({
+										viewId: view.id,
+										tableId: view.tableId,
+									})
+									view.key = 'view-' + (view.id).toString()
+									view.isView = true
+									this.contextResources.push(view)
+								}
 							}
+						} catch (err) {
+							console.error(`Failed to load resource ${node.node_id}:`, err)
+							this.errorMessage = t('tables', 'Some resources in this application could not be loaded')
 						}
 					}
 				}

From 1bbd4cba1922b0fe02c482bd6c2733f3de6c5969 Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Mon, 11 Aug 2025 16:15:41 +0200
Subject: [PATCH 04/13] add ErrorMessage component

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/modules/main/partials/ErrorMessage.vue | 48 ++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/modules/main/partials/ErrorMessage.vue

diff --git a/src/modules/main/partials/ErrorMessage.vue b/src/modules/main/partials/ErrorMessage.vue
new file mode 100644
index 0000000000..c6d9e8779c
--- /dev/null
+++ b/src/modules/main/partials/ErrorMessage.vue
@@ -0,0 +1,48 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="error-container">
+		<IconTables :size="64" style="margin-bottom: 1rem;" />
+		<p>{{ message }}</p>
+	</div>
+</template>
+
+<script>
+import IconTables from '../../../shared/assets/icons/IconTables.vue'
+
+export default {
+	name: 'ErrorMessage',
+	components: { IconTables },
+	props: {
+		message: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.error-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 2rem;
+	height: 100dvh;
+	min-height: 100%;
+	color: var(--color-text);
+	opacity: 0.6;
+
+	p {
+		font-size: clamp(1.2rem, 4vw, 2rem);
+		font-weight: 600;
+		max-width: 90%;
+		word-wrap: break-word;
+	}
+}
+</style>

From 131d535aa100f86d6cc8a8482daba27768cdaf8a Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Mon, 11 Aug 2025 16:17:09 +0200
Subject: [PATCH 05/13] refactor table, view, context and use ErrorMessage

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/pages/Context.vue            | 38 +++++++----------------------
 src/pages/Table.vue              | 41 +++++++-------------------------
 src/pages/View.vue               | 36 ++++++----------------------
 src/shared/utils/displayError.js |  8 +++++++
 4 files changed, 31 insertions(+), 92 deletions(-)

diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index f97ad4a678..86908daa37 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -4,12 +4,9 @@
 -->
 <template>
 	<div class="row">
-		<div v-if="loading" class="icon-loading" />
+		<ErrorMessage v-if="errorMessage" :message="errorMessage" />
 
-		<div v-else-if="errorMessage" class="error-container">
-			<IconTables :size="64" style="margin-bottom: 1rem;" />
-			<p>{{ errorMessage }}</p>
-		</div>
+		<div v-else-if="loading" class="icon-loading" />
 
 		<div v-else>
 			<div class="content context">
@@ -56,13 +53,14 @@ import exportTableMixin from '../shared/components/ncTable/mixins/exportTableMix
 import svgHelper from '../shared/components/ncIconPicker/mixins/svgHelper.js'
 import { useTablesStore } from '../store/store.js'
 import { useDataStore } from '../store/data.js'
-import IconTables from '../shared/assets/icons/IconTables.vue'
+import ErrorMessage from '../modules/main/partials/ErrorMessage.vue'
+import displayError, { getNotFoundError, getGenericLoadError } from '../shared/utils/displayError.js'
 
 export default {
 	components: {
 		MainModals,
 		NcIconSvgWrapper,
-		IconTables,
+		ErrorMessage,
 		TableWrapper,
 		CustomView,
 	},
@@ -212,10 +210,10 @@ export default {
 				}
 			} catch (e) {
 				if (e.message === 'NOT_FOUND') {
-					this.errorMessage = t('tables', 'This application could not be found')
+					this.errorMessage = getNotFoundError('application')
 				} else {
-					this.errorMessage = t('tables', 'An error occurred while loading the application')
-					console.error(e)
+					this.errorMessage = getGenericLoadError('application')
+					displayError(e, this.errorMessage)
 				}
 			} finally {
 				this.loading = false
@@ -266,24 +264,4 @@ export default {
 		padding-left: 0px;
 	}
 }
-
-.error-container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	padding: 2rem;
-	height: 100dvh;
-	min-height: 100%;
-	color: var(--color-text);
-	opacity: 0.6;
-
-	p {
-		font-size: clamp(1.2rem, 4vw, 2rem);
-		font-weight: 600;
-		max-width: 90%;
-		word-wrap: break-word;
-	}
-}
 </style>
diff --git a/src/pages/Table.vue b/src/pages/Table.vue
index d1e2885265..e6e4bda287 100644
--- a/src/pages/Table.vue
+++ b/src/pages/Table.vue
@@ -4,10 +4,7 @@
 -->
 <template>
 	<div class="main-table-view">
-		<div v-if="errorMessage" class="error-container">
-			<IconTables :size="64" style="margin-bottom: 1rem;" />
-			<p>{{ errorMessage }}</p>
-		</div>
+		<ErrorMessage v-if="errorMessage" :message="errorMessage" />
 
 		<div v-else-if="!activeTable">
 			<div class="icon-loading" />
@@ -25,13 +22,14 @@ import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../store/store.js'
 import MainWrapper from '../modules/main/sections/MainWrapper.vue'
 import MainModals from '../modules/modals/Modals.vue'
-import IconTables from '../shared/assets/icons/IconTables.vue'
+import ErrorMessage from '../modules/main/partials/ErrorMessage.vue'
+import displayError, { getNotFoundError, getGenericLoadError } from '../shared/utils/displayError.js'
 
 export default {
 	components: {
 		MainWrapper,
 		MainModals,
-		IconTables,
+		ErrorMessage,
 	},
 
 	data() {
@@ -62,19 +60,16 @@ export default {
 			if (!id) return
 
 			try {
-				if (!this.activeTableId) {
-					this.setActiveTableId(parseInt(id))
-				}
-
 				if (!this.activeTable) {
 					await this.loadContextTable({ id })
 				}
+				this.setActiveTableId(parseInt(id))
 			} catch (e) {
 				if (e.message === 'NOT_FOUND') {
-					this.errorMessage = t('tables', 'This table could not be found')
+					this.errorMessage = getNotFoundError('table')
 				} else {
-					this.errorMessage = t('tables', 'An error occurred while loading the table')
-					console.error(e)
+					this.errorMessage = getGenericLoadError('table')
+					displayError(e, this.errorMessage)
 				}
 			}
 		},
@@ -93,26 +88,6 @@ export default {
 	margin: 5mm;
 }
 
-.error-container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	padding: 2rem;
-	height: 100dvh;
-	min-height: 100%;
-	color: var(--color-text);
-	opacity: 0.6;
-
-	p {
-		font-size: clamp(1.2rem, 4vw, 2rem);
-		font-weight: 600;
-		max-width: 90%;
-		word-wrap: break-word;
-	}
-}
-
 @media print {
 	html, body {
 		background: var(--color-main-background, white) !important;
diff --git a/src/pages/View.vue b/src/pages/View.vue
index 845f35571a..b64cba1d27 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -4,10 +4,7 @@
 -->
 <template>
 	<div class="main-view-view">
-		<div v-if="!activeView && errorMessage" class="error-container">
-			<IconTables :size="64" style="margin-bottom: 1rem;" />
-			<p>{{ errorMessage }}</p>
-		</div>
+		<ErrorMessage v-if="errorMessage" :message="errorMessage" />
 
 		<div v-else-if="!activeView">
 			<div class="icon-loading" />
@@ -25,14 +22,15 @@ import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../store/store.js'
 import MainWrapper from '../modules/main/sections/MainWrapper.vue'
 import MainModals from '../modules/modals/Modals.vue'
-import IconTables from '../shared/assets/icons/IconTables.vue'
+import ErrorMessage from '../modules/main/partials/ErrorMessage.vue'
+import displayError, { getNotFoundError, getGenericLoadError } from '../shared/utils/displayError.js'
 
 export default {
 
 	components: {
 		MainWrapper,
 		MainModals,
-		IconTables,
+		ErrorMessage,
 	},
 
 	data() {
@@ -71,10 +69,10 @@ export default {
 				}
 			} catch (e) {
 				if (e.message === 'NOT_FOUND') {
-					this.errorMessage = t('tables', 'This view could not be found')
+					this.errorMessage = getNotFoundError('view')
 				} else {
-					this.errorMessage = t('tables', 'An error occurred while loading the view')
-					console.error(e)
+					this.errorMessage = getGenericLoadError('view')
+					displayError(e, this.errorMessage)
 				}
 			}
 		},
@@ -85,25 +83,5 @@ export default {
 .main-view-view {
 	width: max-content;
 	min-width: var(--app-content-width, 100%);
-
-.error-container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	padding: 2rem;
-	height: 100dvh;
-	min-height: 100%;
-	color: var(--color-text);
-	opacity: 0.6;
-
-	p {
-		font-size: clamp(1.2rem, 4vw, 2rem);
-		font-weight: 600;
-		max-width: 90%;
-		word-wrap: break-word;
-	}
-}
 }
 </style>
diff --git a/src/shared/utils/displayError.js b/src/shared/utils/displayError.js
index e94dff219f..f61d84a230 100644
--- a/src/shared/utils/displayError.js
+++ b/src/shared/utils/displayError.js
@@ -4,6 +4,14 @@
  */
 import { showError } from '@nextcloud/dialogs'
 
+export function getNotFoundError(type) {
+	return t('tables', `This ${type} could not be found`)
+}
+
+export function getGenericLoadError(type) {
+	return t('tables', `An error occurred while loading the ${type}`)
+}
+
 /**
  * @param {Error} e error object
  * @param {string} message Error print message

From 8e1e4dbea333302fbb75690f131e3bc5047aa21f Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Tue, 12 Aug 2025 11:56:39 +0200
Subject: [PATCH 06/13] provide fallback titles for missing tables, views, apps

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/App.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index faece768d5..34903116a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -88,7 +88,8 @@ export default {
 			}
 			if (currentRoute.path.startsWith('/table/')) {
 				this.setActiveTableId(parseInt(currentRoute.params.tableId))
-				this.setPageTitle(this.activeTable.title)
+				const tableName = this.activeTable?.title || t('tables', 'Table')
+				this.setPageTitle(tableName)
 				if (!currentRoute.path.includes('/row/')) {
 					const targetElement = document.querySelector(`header .header-start .app-menu a[href="${url}"]`)
 						|| document.querySelector(`header .header-left .app-menu a[href="${url}"]`)
@@ -96,7 +97,8 @@ export default {
 				}
 			} else if (currentRoute.path.startsWith('/view/')) {
 				this.setActiveViewId(parseInt(currentRoute.params.viewId))
-				this.setPageTitle(this.activeView.title)
+				const viewName = this.activeView?.title || t('tables', 'View')
+				this.setPageTitle(viewName)
 				if (!currentRoute.path.includes('/row/')) {
 					const targetElement = document.querySelector(`header .header-start .app-menu a[href="${url}"]`)
 						|| document.querySelector(`header .header-left .app-menu a[href="${url}"]`)
@@ -105,11 +107,12 @@ export default {
 			} else if (currentRoute.path.startsWith('/application/')) {
 				const contextId = parseInt(currentRoute.params.contextId)
 				this.setActiveContextId(contextId)
-				this.setPageTitle(this.activeContext.name)
+				const contextName = this.activeContext?.name || t('tables', 'Tables')
+				this.setPageTitle(contextName)
 
 				// This breaks if there are multiple contexts with the same name or another app has the same name. We need a better way to identify the correct element.
-				const targetElement = document.querySelector(`header .header-start .app-menu [title="${this.activeContext.name}"]`)
-					|| document.querySelector(`header .header-left .app-menu [title="${this.activeContext.name}"]`)
+				const targetElement = document.querySelector(`header .header-start .app-menu [title="${contextName}"]`)
+					|| document.querySelector(`header .header-left .app-menu [title="${contextName}"]`)
 				if (targetElement) {
 					this.switchActiveMenuEntry(targetElement)
 				}
@@ -127,8 +130,8 @@ export default {
 		switchActiveMenuEntry(targetElement) {
 			targetElement = targetElement?.tagName?.toLowerCase() === 'a' ? targetElement.parentElement : targetElement
 			const currentlyActive = document.querySelector('header .header-start .app-menu li.app-menu-entry--active') || document.querySelector('header .header-left .app-menu li.app-menu-entry--active')
-			currentlyActive.classList.remove('app-menu-entry--active')
-			targetElement.classList.add('app-menu-entry--active')
+			currentlyActive?.classList.remove('app-menu-entry--active')
+			targetElement?.classList.add('app-menu-entry--active')
 		},
 		setPageTitle(title) {
 			if (this.defaultPageTitle === false) {

From 2467e1a7f2bc1738712b04fea692d72dd064a53d Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Wed, 13 Aug 2025 13:13:10 +0200
Subject: [PATCH 07/13] add cypress test for 404 error handling

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 cypress/e2e/entity-not-found.cy.js         | 51 ++++++++++++++++++++++
 src/modules/main/partials/ErrorMessage.vue |  2 +-
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 cypress/e2e/entity-not-found.cy.js

diff --git a/cypress/e2e/entity-not-found.cy.js b/cypress/e2e/entity-not-found.cy.js
new file mode 100644
index 0000000000..6323ce4749
--- /dev/null
+++ b/cypress/e2e/entity-not-found.cy.js
@@ -0,0 +1,51 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+let localUser
+
+describe('Entity not found error handling', () => {
+	before(function() {
+		cy.createRandomUser().then(user => {
+			localUser = user
+			cy.login(localUser)
+		})
+	})
+
+	beforeEach(function() {
+		cy.login(localUser)
+
+		cy.intercept('GET', '**/tables/999', { statusCode: 404 }).as('getTable')
+		cy.intercept('GET', '**/views/999', { statusCode: 404 }).as('getView')
+		cy.intercept('GET', '**/contexts/999*', { statusCode: 404 }).as('getContext')
+
+		cy.visit('apps/tables')
+	})
+
+	it('Shows error message when Table is not found', () => {
+		cy.visit('/apps/tables/#/table/999')
+
+		cy.get('.error-container', { timeout: 10000 })
+			.should('contain.text', 'This table could not be found')
+	})
+
+	it('Shows error message when View is not found', () => {
+		cy.visit('/apps/tables/#/view/999')
+
+		cy.get('.error-container', { timeout: 10000 })
+			.should('contain.text', 'This view could not be found')
+	})
+
+	// In Cypress, a programmatic navigation (this.$router.push('/')) is triggered
+	// when an activeContextId exists but the context itself cannot be found.
+	// This causes a redirect to the start page. In contrast, Table.vue and View.vue
+	// only display an error message when a resource is not found, without redirecting.
+	// In a normal browser scenario, manually navigating to a non-existent context
+	// will also show the error message, keeping the user on the current page.
+
+	it('Redirect to startpage when Context is not found', () => {
+		cy.visit('/apps/tables/#/application/999')
+		cy.location('hash', { timeout: 10000 })
+			.should('eq', '#/')
+	})
+})
diff --git a/src/modules/main/partials/ErrorMessage.vue b/src/modules/main/partials/ErrorMessage.vue
index c6d9e8779c..e64db209d6 100644
--- a/src/modules/main/partials/ErrorMessage.vue
+++ b/src/modules/main/partials/ErrorMessage.vue
@@ -1,5 +1,5 @@
 <!--
-  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 

From 281a2da402b1b95d27cdb7eb2b286a1dd70eff1d Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Tue, 19 Aug 2025 11:24:15 +0200
Subject: [PATCH 08/13] fix(table/view): always render MainModals for proper
 nav and creation btns

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/pages/Table.vue | 11 ++++++-----
 src/pages/View.vue  | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/pages/Table.vue b/src/pages/Table.vue
index e6e4bda287..04bdec5c28 100644
--- a/src/pages/Table.vue
+++ b/src/pages/Table.vue
@@ -4,16 +4,17 @@
 -->
 <template>
 	<div class="main-table-view">
-		<ErrorMessage v-if="errorMessage" :message="errorMessage" />
-
-		<div v-else-if="!activeTable">
+		<div v-if="!activeTable && !errorMessage">
 			<div class="icon-loading" />
 		</div>
 
-		<div v-else>
+		<div v-else-if="activeTable">
 			<MainWrapper :element="activeTable" :is-view="false" />
-			<MainModals />
 		</div>
+
+		<ErrorMessage v-else-if="errorMessage" :message="errorMessage" />
+
+		<MainModals />
 	</div>
 </template>
 
diff --git a/src/pages/View.vue b/src/pages/View.vue
index b64cba1d27..1f88d9b0c3 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -4,16 +4,17 @@
 -->
 <template>
 	<div class="main-view-view">
-		<ErrorMessage v-if="errorMessage" :message="errorMessage" />
-
-		<div v-else-if="!activeView">
+		<div v-if="!activeView && !errorMessage">
 			<div class="icon-loading" />
 		</div>
 
-		<div v-else>
+		<div v-else-if="activeView">
 			<MainWrapper :element="activeView" :is-view="true" />
-			<MainModals />
 		</div>
+
+		<ErrorMessage v-else-if="errorMessage" :message="errorMessage" />
+
+		<MainModals />
 	</div>
 </template>
 

From 8486b12ffc944a95e4a2a5706e23abf3c2de24a6 Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Thu, 21 Aug 2025 11:11:39 +0200
Subject: [PATCH 09/13] fix(context): always render MainModals for proper nav
 and creation btns

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/pages/Context.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 86908daa37..527cc6d674 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -4,11 +4,9 @@
 -->
 <template>
 	<div class="row">
-		<ErrorMessage v-if="errorMessage" :message="errorMessage" />
+		<div v-if="loading" class="icon-loading" />
 
-		<div v-else-if="loading" class="icon-loading" />
-
-		<div v-else>
+		<div v-else-if="activeContext">
 			<div class="content context">
 				<div class="row first-row">
 					<h1 class="context__title" data-cy="context-title">
@@ -35,9 +33,11 @@
 					</div>
 				</div>
 			</div>
-
-			<MainModals />
 		</div>
+
+		<ErrorMessage v-else-if="errorMessage" :message="errorMessage" />
+
+		<MainModals />
 	</div>
 </template>
 

From c11e9d669c4682cfbc1dfc4f2f78bfa17315b570 Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Thu, 28 Aug 2025 10:53:43 +0200
Subject: [PATCH 10/13] stay on errorpage after reload on a non-existing app
 page

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 cypress/e2e/entity-not-found.cy.js | 18 ++++++------------
 src/pages/Context.vue              | 10 ++++------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/cypress/e2e/entity-not-found.cy.js b/cypress/e2e/entity-not-found.cy.js
index 6323ce4749..3776e587bc 100644
--- a/cypress/e2e/entity-not-found.cy.js
+++ b/cypress/e2e/entity-not-found.cy.js
@@ -22,30 +22,24 @@ describe('Entity not found error handling', () => {
 		cy.visit('apps/tables')
 	})
 
-	it('Shows error message when Table is not found', () => {
+	it('Shows error message when table is not found', () => {
 		cy.visit('/apps/tables/#/table/999')
 
 		cy.get('.error-container', { timeout: 10000 })
 			.should('contain.text', 'This table could not be found')
 	})
 
-	it('Shows error message when View is not found', () => {
+	it('Shows error message when view is not found', () => {
 		cy.visit('/apps/tables/#/view/999')
 
 		cy.get('.error-container', { timeout: 10000 })
 			.should('contain.text', 'This view could not be found')
 	})
 
-	// In Cypress, a programmatic navigation (this.$router.push('/')) is triggered
-	// when an activeContextId exists but the context itself cannot be found.
-	// This causes a redirect to the start page. In contrast, Table.vue and View.vue
-	// only display an error message when a resource is not found, without redirecting.
-	// In a normal browser scenario, manually navigating to a non-existent context
-	// will also show the error message, keeping the user on the current page.
-
-	it('Redirect to startpage when Context is not found', () => {
+	it('Shows error message when application is not found', () => {
 		cy.visit('/apps/tables/#/application/999')
-		cy.location('hash', { timeout: 10000 })
-			.should('eq', '#/')
+
+		cy.get('.error-container', { timeout: 10000 })
+			.should('contain.text', 'This application could not be found')
 	})
 })
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 527cc6d674..f13a8435f9 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -121,14 +121,12 @@ export default {
 	},
 
 	watch: {
-		// Watch for changes to active context to make page reactive
 		async activeContext() {
-			if (this.activeContextId && !this.activeContext) {
-				// context does not exists, go to startpage
-				this.$router.push('/').catch(err => err)
-			} else {
-				await this.reload()
+			if (this.errorMessage) {
+				// Already showing an error, don't redirect
+				return
 			}
+			await this.reload()
 		},
 		'context.iconName': {
 			async handler(value) {

From e7e73342d45565d523dd1d4ca3edb857c087872c Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Fri, 29 Aug 2025 14:08:09 +0200
Subject: [PATCH 11/13] (fix/table): redirect to startpage after deleting table

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/pages/Table.vue | 21 ++++++++++++++++++---
 src/pages/View.vue  |  4 ++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/Table.vue b/src/pages/Table.vue
index 04bdec5c28..e560e2da87 100644
--- a/src/pages/Table.vue
+++ b/src/pages/Table.vue
@@ -51,6 +51,19 @@ export default {
 				this.checkTable()
 			},
 		},
+		activeTable: {
+			handler(newVal, oldVal) {
+				if (this.activeTableId && !newVal) {
+					if (oldVal) {
+						// Table was deleted, redirect to home
+						this.$router.push({ path: '/' })
+					} else {
+						// Table did not exist from the beginning -> ErrorMessage
+						this.errorMessage = getNotFoundError('table')
+					}
+				}
+			},
+		},
 	},
 
 	methods: {
@@ -61,10 +74,12 @@ export default {
 			if (!id) return
 
 			try {
-				if (!this.activeTable) {
-					await this.loadContextTable({ id })
+				if (this.activeTableId !== id) {
+					this.setActiveTableId(parseInt(id))
 				}
-				this.setActiveTableId(parseInt(id))
+
+				await this.loadContextTable({ id })
+
 			} catch (e) {
 				if (e.message === 'NOT_FOUND') {
 					this.errorMessage = getNotFoundError('table')
diff --git a/src/pages/View.vue b/src/pages/View.vue
index 1f88d9b0c3..739baf66a9 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -56,15 +56,15 @@ export default {
 
 	methods: {
 		...mapActions(useTablesStore, ['setActiveViewId', 'loadContextView']),
+
 		async checkView() {
 			const id = this.activeViewId || this.$route.params.viewId
 			if (!id) return
 
 			try {
-				if (!this.activeViewId) {
+				if (this.activeViewId !== id) {
 					this.setActiveViewId(parseInt(id))
 				}
-
 				if (!this.activeView) {
 					await this.loadContextView({ id })
 				}

From 69ecdf3341ebe41481a52a7a6f3d10809d755612 Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Mon, 1 Sep 2025 10:43:05 +0200
Subject: [PATCH 12/13] refactor table and view components

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/pages/Table.vue | 6 +-----
 src/pages/View.vue  | 8 ++------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/pages/Table.vue b/src/pages/Table.vue
index e560e2da87..b50bcd94c2 100644
--- a/src/pages/Table.vue
+++ b/src/pages/Table.vue
@@ -74,12 +74,8 @@ export default {
 			if (!id) return
 
 			try {
-				if (this.activeTableId !== id) {
-					this.setActiveTableId(parseInt(id))
-				}
-
 				await this.loadContextTable({ id })
-
+				this.setActiveTableId(parseInt(id))
 			} catch (e) {
 				if (e.message === 'NOT_FOUND') {
 					this.errorMessage = getNotFoundError('table')
diff --git a/src/pages/View.vue b/src/pages/View.vue
index 739baf66a9..0598a7b5bf 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -62,12 +62,8 @@ export default {
 			if (!id) return
 
 			try {
-				if (this.activeViewId !== id) {
-					this.setActiveViewId(parseInt(id))
-				}
-				if (!this.activeView) {
-					await this.loadContextView({ id })
-				}
+				await this.loadContextView({ id })
+				this.setActiveViewId(parseInt(id))
 			} catch (e) {
 				if (e.message === 'NOT_FOUND') {
 					this.errorMessage = getNotFoundError('view')

From e9d736a60193e4f7bdb1b591f796b936b655ac01 Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Mon, 1 Sep 2025 10:43:13 +0200
Subject: [PATCH 13/13] correct translations in error messages

Signed-off-by: silver <s.szmajduch@posteo.de>
---
 src/shared/utils/displayError.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/utils/displayError.js b/src/shared/utils/displayError.js
index f61d84a230..d65ca917d4 100644
--- a/src/shared/utils/displayError.js
+++ b/src/shared/utils/displayError.js
@@ -5,11 +5,11 @@
 import { showError } from '@nextcloud/dialogs'
 
 export function getNotFoundError(type) {
-	return t('tables', `This ${type} could not be found`)
+	return t('tables', 'This {type} could not be found', { type })
 }
 
 export function getGenericLoadError(type) {
-	return t('tables', `An error occurred while loading the ${type}`)
+	return t('tables', 'An error occurred while loading the {type}', { type })
 }
 
 /**