Displaying axios errors

zimui/src/components/ErrorDisplay.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMainStore } from '../stores/main';
+import errimageData from '../assets/Error.jpg'
+
+const main = useMainStore()
+const errimage = ref(errimageData)
+</script>
+
+<template>
+  <div class="error-container">
+    <img :src="errimage" class="error-image" />
+    <p class="error-text">{{ main.errorMessage }}</p>
+  </div>
+</template>
+
+<style scoped>
+.error-container {
+  text-align: center;
+  padding: 20px;
+}
+
+.error-image {
+  width: 300px;
+  margin-bottom: 20px; 
+}
+
+.error-text {
+  color: black;
+  font-size: 16px;
+}
+</style>

zimui/src/components/TopicHome.vue

@@ -37,7 +37,9 @@ const fetchData = async function () {
     if (resp) {
       topic.value = resp
     }
-  } finally {
+  } catch (error) {
+    main.setErrorMessage('An error occured, Please try again.')
+  }finally {
     loader.hide()
     dataLoaded.value = true
   }

zimui/src/pages/HomePage.vue

@@ -19,17 +19,25 @@ watch(params, () => {
 
 // fetch channel data and set default topic if needed
 onMounted(async () => {
-  await main.fetchChannel()
-  if (topic.value === undefined && main.channelData != null) {
-    topic.value = main.channelData.rootSlug
+  try {
+    await main.fetchChannel()
+    if (topic.value === undefined && main.channelData != null) {
+      topic.value = main.channelData.rootSlug
+    }
+  } catch (error) {
+    main.setErrorMessage('An error occured, Please try again.')
   }
 })
 
 import TopicHome from '../components/TopicHome.vue'
+import ErrorDisplay from '@/components/ErrorDisplay.vue'
 </script>
 
 <template>
-  <div class="d-flex flex-column h-100">
+  <div v-if="main.errorMessage">
+    <ErrorDisplay />
+  </div>
+  <div v-else class="d-flex flex-column h-100">
     <div class="flex-fill flex-shrink-0">
       <TopicHome v-if="main.channelData" :slug="topic" />
     </div>

zimui/src/stores/main.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import axios from 'axios'
+import axios, { AxiosError }from 'axios'
 import Channel from '@/types/Channel'
 import Topic from '@/types/Topic'
 
@@ -20,33 +20,72 @@ export const useMainStore = defineStore('main', {
     async fetchChannel() {
       this.isLoading = true
       this.errorMessage = ''
-      return axios.get('./channel.json').then(
-        (response) => {
-          this.isLoading = false
-          this.channelData = response.data as Channel
-        },
-        (_) => {
-          this.isLoading = false
-          this.channelData = null
-          this.errorMessage = 'Failed to load channel data'
-        },
-      )
+
+      return axios
+        .get('./channel.json')
+        .then((response) => {
+          this.isLoading = false;
+          this.channelData = response.data as Channel;
+          return this.channelData; // Return the fetched channel data
+        })
+        .catch((error) => {
+            this.isLoading = false
+            this.channelData = null
+          if (error instanceof AxiosError) {
+            this.handleAxiosError(error);
+          }
+          else {
+            this.errorMessage = 'Failed to load channel data';
+          }
+        });
     },
     async fetchTopic(slug: string) {
       this.isLoading = true
       this.errorMessage = ''
-      return axios.get('./topics/' + slug + '.json').then(
-        (response) => {
-          this.isLoading = false
-          return response.data as Topic
-        },
-        (_) => {
-          this.isLoading = false
-          this.channelData = null
-          this.errorMessage = 'Failed to load node ' + slug + ' data'
-          return null
-        },
-      )
+      return axios
+        .get('./topics/' + slug + '.json')
+        .then((response) => {
+          this.isLoading = false;
+          return response.data as Topic;
+        })
+        .catch((error) => {
+            this.isLoading = false
+            this.channelData = null
+          if (error instanceof AxiosError) {
+            this.handleAxiosError(error);
+          }
+          else {
+            this.errorMessage = 'Failed to load node ' + slug + ' data';
+          }
+        });
+    },
+    handleAxiosError(error: AxiosError<object>) {
+      this.isLoading = false;
+      this.channelData = null;
+      if (axios.isAxiosError(error)) {
+        if (error.response) {
+          const status = error.response.status;
+          switch (status) {
+            case 400:
+              this.errorMessage = 'Bad Request: The server could not understand the request due to invalid syntax.';
+              break;
+            case 404:
+              this.errorMessage = 'Not Found: The requested resource could not be found on the server.';
+              break;
+            case 500:
+              this.errorMessage = 'Internal Server Error: The server encountered an unexpected condition that prevented it from fulfilling the request.';
+              break;
+            default:
+              this.errorMessage = 'An error occurred: ' + error.message;
+              break;
+          }
+        } else {
+          this.errorMessage = 'An Unexpected error occured';
+        }
+      }
+    },
+    setErrorMessage(message: string) {
+      this.errorMessage = message
     },
   },
 })