Fine-tune error display

zimui/src/components/ErrorDisplay.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useMainStore } from '../stores/main';
-import errimageData from '../assets/Error.jpg'
+import { ref } from 'vue'
+import { useMainStore } from '../stores/main'
+import errimageData from '../assets/dead_kiwix.png'
 
 const main = useMainStore()
 const errimage = ref(errimageData)
@@ -11,6 +11,7 @@ const errimage = ref(errimageData)
   <div class="error-container">
     <img :src="errimage" class="error-image" />
     <p class="error-text">{{ main.errorMessage }}</p>
+    <p class="error-text">{{ main.errorDetails }}</p>
   </div>
 </template>
 
@@ -22,11 +23,10 @@ const errimage = ref(errimageData)
 
 .error-image {
   width: 300px;
-  margin-bottom: 20px; 
+  margin-bottom: 20px;
 }
 
 .error-text {
-  color: black;
   font-size: 16px;
 }
 </style>

zimui/src/components/TopicHome.vue

@@ -38,8 +38,8 @@ const fetchData = async function () {
       topic.value = resp
     }
   } catch (error) {
-    main.setErrorMessage('An error occured, Please try again.')
-  }finally {
+    main.setErrorMessage('An unexpected error occured.')
+  } finally {
     loader.hide()
     dataLoaded.value = true
   }
@@ -193,7 +193,7 @@ const goToPreviousPage = () => {
         <div
           v-for="(content, contentIndex) in getNonTopicSections(topic.sections)"
           :key="contentIndex"
-          class="col-sm-6 col-md-6 col-lg-3 mt-5 " 
+          class="col-sm-6 col-md-6 col-lg-3 mt-5"
         >
           <TopicCard
             :data="transformTopicSectionOrSubSectionToCardData(content)"

zimui/src/pages/HomePage.vue

@@ -25,7 +25,7 @@ onMounted(async () => {
       topic.value = main.channelData.rootSlug
     }
   } catch (error) {
-    main.setErrorMessage('An error occured, Please try again.')
+    main.setErrorMessage('An unexpected error occured.')
   }
 })
 

zimui/src/stores/main.ts

@@ -1,86 +1,78 @@
 import { defineStore } from 'pinia'
-import axios, { AxiosError }from 'axios'
+import axios, { AxiosError } from 'axios'
 import Channel from '@/types/Channel'
 import Topic from '@/types/Topic'
 
 export type RootState = {
   channelData: Channel | null
   isLoading: boolean
   errorMessage: string
+  errorDetails: string
 }
 export const useMainStore = defineStore('main', {
   state: () =>
     ({
       channelData: null,
       isLoading: false,
       errorMessage: '',
+      errorDetails: '',
     }) as RootState,
   getters: {},
   actions: {
     async fetchChannel() {
       this.isLoading = true
       this.errorMessage = ''
+      this.errorDetails = ''
 
-      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
+      return axios.get('./channel.json').then(
+        (response) => {
+          this.isLoading = false
+          this.channelData = response.data as Channel
+        },
+        (error) => {
+          this.isLoading = false
+          this.channelData = null
+          this.errorMessage = 'Failed to load channel data.'
           if (error instanceof AxiosError) {
-            this.handleAxiosError(error);
+            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
+          return response.data as Topic
         })
         .catch((error) => {
-            this.isLoading = false
-            this.channelData = null
+          this.isLoading = false
+          this.channelData = null
+          this.errorMessage = 'Failed to load node ' + slug + ' data.'
           if (error instanceof AxiosError) {
-            this.handleAxiosError(error);
-          }
-          else {
-            this.errorMessage = 'Failed to load node ' + slug + ' data';
+            this.handleAxiosError(error)
           }
-        });
+        })
     },
     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';
+      if (axios.isAxiosError(error) && error.response) {
+        const status = error.response.status
+        switch (status) {
+          case 400:
+            this.errorDetails =
+              'HTTP 400: Bad Request. The server could not understand the request.'
+            break
+          case 404:
+            this.errorDetails =
+              'HTTP 404: Not Found. The requested resource could not be found on the server.'
+            break
+          case 500:
+            this.errorDetails =
+              'HTTP 500: Internal Server Error. The server encountered an unexpected error.'
+            break
         }
       }
     },