new router

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import EventList from '@/views/EventList.vue'
 import EventDetail from '@/views/EventDetail.vue'
 import CreateEvent from '@/views/CreateEvent.vue'
+import ErrorDisplay from '@/views/ErrorDisplay.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -20,6 +21,12 @@ const routes: Array<RouteRecordRaw> = [
     props: true,
     component: EventDetail,
   },
+  {
+    path: '/error/:error',
+    name: 'ErrorDisplay',
+    props: true,
+    component: ErrorDisplay,
+  },
 ]
 
 const router = createRouter({

src/store/index.ts

@@ -25,27 +25,35 @@ export default createStore({
     createEvent({ commit }, event) {
       EventService.postEvent(event)
         .then(() => commit('ADD_EVENT', event))
-        .catch((err: AxiosError) => console.log({ err }))
+        .catch((err: AxiosError) => {
+          throw err
+        })
     },
+
     fetchEvents({ commit }) {
-      EventService.getEvents()
+      return EventService.getEvents()
         .then((res: AxiosResponse) => {
           commit('SET_EVENTS', res.data.events)
         })
-        .catch((err: AxiosError) => console.log(err))
+        .catch((err: AxiosError) => {
+          throw err
+        })
     },
+
     fetchEvent({ commit, state }, id) {
       // if the event to fetch is already in state.events, there is no need to fetch it once more
       const existingEvent = state.events.find((evt) => evt.id === id)
 
       if (existingEvent) {
         commit('SET_EVENT', existingEvent)
       } else {
-        EventService.getEvent(id)
+        return EventService.getEvent(id)
           .then((res: AxiosResponse) => {
             commit('SET_EVENT', res.data.event)
           })
-          .catch((err: AxiosError) => console.log(err))
+          .catch((err: AxiosError) => {
+            throw err
+          })
       }
     },
   },