diff --git a/web/src/components/AppsMixin.js b/web/src/components/AppsMixin.js index 623fc6ce8..5093ce451 100644 --- a/web/src/components/AppsMixin.js +++ b/web/src/components/AppsMixin.js @@ -12,14 +12,21 @@ export default { }, async created() { - const apps = await this.loadAppsDataFromBackend(); - - this.appsMixin.activeAppIds = apps.filter((app) => app.active).map((app) => app.id); - - this.appsMixin.apps = apps.reduce((prev, app) => ({ - ...prev, - [app.id]: app, - }), {}); + try { + const apps = await this.loadAppsDataFromBackend(); + + this.appsMixin.activeAppIds = apps.filter((app) => app.active).map((app) => app.id); + + this.appsMixin.apps = apps.reduce((prev, app) => ({ + ...prev, + [app.id]: app, + }), {}); + } catch (err) { + console.error('Failed to load apps data:', err); + // Set defaults to ensure the page can still render + this.appsMixin.activeAppIds = []; + this.appsMixin.apps = {}; + } }, computed: { @@ -30,11 +37,16 @@ export default { methods: { async loadAppsDataFromBackend() { - return (await axios({ - method: 'get', - url: '/api/apps', - responseType: 'json', - })).data; + try { + return (await axios({ + method: 'get', + url: '/api/apps', + responseType: 'json', + })).data; + } catch (err) { + console.error('Failed to load apps from backend:', err); + return []; + } }, getAppColor(id) { diff --git a/web/src/components/ItemListPageBase.js b/web/src/components/ItemListPageBase.js index f7202ca95..a3e7e4d96 100644 --- a/web/src/components/ItemListPageBase.js +++ b/web/src/components/ItemListPageBase.js @@ -136,11 +136,17 @@ export default { }, async loadItems() { - this.items = (await axios({ - method: 'get', - url: this.getItemsUrl(), - responseType: 'json', - })).data; + try { + this.items = (await axios({ + method: 'get', + url: this.getItemsUrl(), + responseType: 'json', + })).data; + } catch (err) { + console.error('Failed to load items:', err); + // Set default empty array to ensure the page can still render + this.items = []; + } }, }, }; diff --git a/web/src/views/project/Templates.vue b/web/src/views/project/Templates.vue index 0bee13385..7ba16b436 100644 --- a/web/src/views/project/Templates.vue +++ b/web/src/views/project/Templates.vue @@ -369,15 +369,21 @@ export default { }, async loadViews() { - this.views = (await axios({ - method: 'get', - url: `/api/project/${this.projectId}/views`, - responseType: 'json', - })).data; - this.views.sort((v1, v2) => v1.position - v2.position); - - if (this.viewId != null && !this.views.some((v) => v.id === this.viewId)) { - await this.$router.push({ path: `/project/${this.projectId}/templates` }); + try { + this.views = (await axios({ + method: 'get', + url: `/api/project/${this.projectId}/views`, + responseType: 'json', + })).data; + this.views.sort((v1, v2) => v1.position - v2.position); + + if (this.viewId != null && !this.views.some((v) => v.id === this.viewId)) { + await this.$router.push({ path: `/project/${this.projectId}/templates` }); + } + } catch (err) { + console.error('Failed to load views:', err); + // Set default empty array to ensure the page can still render + this.views = []; } }, @@ -486,15 +492,32 @@ export default { }, async loadData() { - [ - this.inventory, - this.environment, - this.repositories, - ] = await Promise.all([ - this.loadProjectResources('inventory'), - this.loadProjectResources('environment'), - this.loadProjectResources('repositories'), - ]); + try { + [ + this.inventory, + this.environment, + this.repositories, + ] = await Promise.all([ + this.loadProjectResources('inventory').catch((err) => { + console.error('Failed to load inventory:', err); + return []; + }), + this.loadProjectResources('environment').catch((err) => { + console.error('Failed to load environment:', err); + return []; + }), + this.loadProjectResources('repositories').catch((err) => { + console.error('Failed to load repositories:', err); + return []; + }), + ]); + } catch (err) { + console.error('Failed to load project data:', err); + // Set defaults to ensure the page can still render + this.inventory = this.inventory || []; + this.environment = this.environment || []; + this.repositories = this.repositories || []; + } }, onTableSettingsChange({ headers }) {