Fix Templates page infinite loading by adding error handling to API calls

web/src/components/AppsMixin.js

@@ -12,14 +12,21 @@
   },
 
   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 @@
 
   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) {

web/src/components/ItemListPageBase.js

@@ -136,11 +136,17 @@
     },
 
     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 = [];
+      }
     },
   },
 };

web/src/views/project/Templates.vue

@@ -369,15 +369,21 @@
     },
 
     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 @@
     },
 
     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 }) {