Displaying Axios and HTTP 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/dead_kiwix.png'
+
+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>
+    <p class="error-text">{{ main.errorDetails }}</p>
+  </div>
+</template>
+
+<style scoped>
+.error-container {
+  text-align: center;
+  padding: 20px;
+}
+
+.error-image {
+  width: 300px;
+  margin-bottom: 20px;
+}
+
+.error-text {
+  font-size: 16px;
+}
+</style>

zimui/src/components/TopicHome.vue

@@ -37,6 +37,8 @@ const fetchData = async function () {
     if (resp) {
       topic.value = resp
     }
+  } catch (error) {
+    main.setErrorMessage('An unexpected error occured.')
   } finally {
     loader.hide()
     dataLoaded.value = true
@@ -191,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

@@ -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 unexpected error occured.')
   }
 })
 
 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,52 +1,83 @@
 import { defineStore } from 'pinia'
-import axios 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
         },
-        (_) => {
+        (error) => {
           this.isLoading = false
           this.channelData = null
-          this.errorMessage = 'Failed to load channel data'
+          this.errorMessage = 'Failed to load channel data.'
+          if (error instanceof AxiosError) {
+            this.handleAxiosError(error)
+          }
         },
       )
     },
     async fetchTopic(slug: string) {
       this.isLoading = true
       this.errorMessage = ''
-      return axios.get('./topics/' + slug + '.json').then(
-        (response) => {
+      return axios
+        .get('./topics/' + slug + '.json')
+        .then((response) => {
           this.isLoading = false
           return response.data as Topic
-        },
-        (_) => {
+        })
+        .catch((error) => {
           this.isLoading = false
           this.channelData = null
-          this.errorMessage = 'Failed to load node ' + slug + ' data'
-          return null
-        },
-      )
+          this.errorMessage = 'Failed to load node ' + slug + ' data.'
+          if (error instanceof AxiosError) {
+            this.handleAxiosError(error)
+          }
+        })
+    },
+    handleAxiosError(error: AxiosError<object>) {
+      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
+        }
+      }
+    },
+    setErrorMessage(message: string) {
+      this.errorMessage = message
     },
   },
 })