#7 added errorPages

src/components/Nav.vue

@@ -113,9 +113,9 @@ export default {
         }
 
         if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
-          const [res, resData] = await GetUser(store.state.vanityUrl || store.state.id64)
+          const resData = await GetUser(store.state.vanityUrl || store.state.id64)
 
-          if (res === 200) {
+          if (resData) {
             data.searchInput = ''
             document.activeElement.blur()
 
@@ -131,17 +131,6 @@ export default {
               closeNav('mainNav')
               GoToPlayer(store.state.id64)
             }
-
-          } else if (res === 404) {
-            data.searchInput = ''
-            data.error = `${resData} - Try again`
-            // TODO: needs 404
-          } else if (res === 502) {
-            data.searchInput = ''
-            data.error = 'Server not available'
-          } else {
-            console.log(res, resData)
-            // TODO: needs 404
           }
         }
 

src/router/index.js

@@ -8,6 +8,10 @@ function lazyLoadComponent(view) {
   return () => import(`@/components/${view}.vue`)
 }
 
+function lazyLoadErrorPages(view) {
+  return () => import(`@/views/errorPages/${view}.vue`)
+}
+
 const routes = [
   {
     path: '/',
@@ -75,13 +79,27 @@ const routes = [
           score: lazyLoadComponent('DamageSite')
         }
       }
-    ],
+    ]
-    scrollBehavior(to, from, savedPosition) {
+  },
-      if (savedPosition) {
+  {
-        return savedPosition
+    path: '/404',
-      } else {
+    name: '404',
-        return {x: 0, y: 0}
+    components: {
+      main: lazyLoadErrorPages('404')
     }
+  },
+  {
+    path: '/500',
+    name: '500',
+    components: {
+      main: lazyLoadErrorPages('500')
+    }
+  },
+  {
+    path: '/502',
+    name: '502',
+    components: {
+      main: lazyLoadErrorPages('502')
     }
   },
   {
@@ -92,7 +110,14 @@ const routes = [
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return {x: 0, y: 0}
+    }
+  }
 })
 
 export default router

src/utils/ApiRequests.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import {errorHandling} from "@/utils/Utils";
 
 const API_URL = process.env.VUE_APP_API_URL
 
@@ -9,8 +10,7 @@ export const GetMatches = async () => {
     if (res.status === 200)
       return res.data
   } catch (err) {
-    // TODO: Error handling
+    errorHandling(err.response.status)
-    // console.log(err.response.status, err.response.statusText)
   }
 }
 
@@ -19,10 +19,9 @@ export const GetUser = async (id) => {
     const res = await axios.get(`${API_URL}/player/${id}`)
 
     if (res.status === 200)
-      return [res.status, res.data]
+      return res.data
   } catch (err) {
-    if (err.response)
+    errorHandling(err.response.status)
-      return [err.response.status, err.response.statusText]
   }
 }
 
@@ -59,7 +58,7 @@ export const TrackMe = async (id64, authcode, sharecode = '') => {
       statusError = 'Userinput was wrong'
       status = err.response.status
     } else {
-      console.log(`${err.response.status}: ${err.response.statusText}`)
+      errorHandling(err.response.status)
     }
   }
 
@@ -74,7 +73,7 @@ export const GetPlayerValue = async (match_id) => {
       return res.data
     }
   } catch (err) {
-    console.log(err.response.status, err.response.statusText)
+    errorHandling(err.response.status)
   }
 }
 
@@ -86,8 +85,7 @@ export const GetMatchDetails = async (match_id) => {
       return res.data
     }
   } catch (err) {
-  //  TODO: 400, 404
+    errorHandling(err.response.status)
-    console.log(err.response.status, err.response.statusText)
   }
 }
 
@@ -99,8 +97,7 @@ export const LoadMoreMatches = async (player_id, date) => {
       return res.data
     }
   } catch (err) {
-  //  TODO: 400, 404
+    errorHandling(err.response.status)
-    console.log(err.response.status, err.response.statusText)
   }
 }
 
@@ -113,8 +110,7 @@ export const GetPlayerMeta = async (player_id, limit = 4) => {
       return res.data
     }
   } catch (err) {
-  //  TODO: 400, 404
+    errorHandling(err.response.status)
-    console.log(err.response.status, err.response.statusText)
   }
 }
 
@@ -125,9 +121,8 @@ export const GetWeaponDmg = async (match_id) => {
     if (res.status === 200) {
       return res.data
     }
-  } catch (e) {
+  } catch (err) {
-    // TODO: 400, 404
+    errorHandling(err.response.status)
-    console.log(e)
   }
 }
 
@@ -139,7 +134,6 @@ export const LoadMoreMatchesExplore = async (date) => {
       return res.data
     }
   } catch (err) {
-    //  TODO: 400, 404
+    errorHandling(err.response.status)
-    console.log(err.response.status, err.response.statusText)
   }
 }

src/utils/GoTo.js

@@ -8,6 +8,10 @@ export const GoToPlayer = (id) => {
     router.push({name: 'Player', params: {id: id}})
 }
 
+export const GoToError = (code) => {
+    router.push({name: code})
+}
+
 export const GoToLink = (link) => {
     router.replace(link)
 }

src/utils/Utils.js

@@ -1,3 +1,17 @@
+import {GoToError} from "@/utils/GoTo";
+
+export const errorHandling = (code) => {
+  if (code === 404) {
+    GoToError('404')
+  } else if (code === 500) {
+    GoToError('500')
+  } else if (code === 502) {
+    GoToError('502')
+  } else {
+    GoToError('404')
+  }
+}
+
 export const setTitle = (title) => {
   document.title = `${title} | csgoWTF`
 }

src/utils/index.js

@@ -34,7 +34,8 @@ import {
   truncate,
   scrollToPos,
   StripControlCodes,
-  ProcessName
+  ProcessName,
+  errorHandling
 } from "./Utils";
 
 export {
@@ -72,5 +73,6 @@ export {
   LoadMoreMatchesExplore,
   scrollToPos,
   StripControlCodes,
-  ProcessName
+  ProcessName,
+  errorHandling
 }

src/views/Explore.vue

@@ -25,7 +25,6 @@ import router from "@/router";
 export default {
   name: 'Explore',
   components: {MatchesTable},
-  // TODO: Events / Lans etc. +
   setup() {
     document.title = "Matches | csgoWTF"
 

src/views/Match.vue

@@ -57,7 +57,7 @@
 
           <div v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="btn-group">
             <i id="downloadMenuBtn" aria-hidden="true" class="fa fa-ellipsis-h mx-2"
-               @click.prevent="handleDownloadMenu" title="Click for more"></i>
+               title="Click for more" @click.prevent="handleDownloadMenu"></i>
             <div id="downloadGroup" class="group">
               <a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" target="_blank"
                  title="Download Demo">
@@ -128,13 +128,14 @@ import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import {
   closeNav,
   CreatePlayersArray,
-  DisplayRank,
+  DisplayRank, errorHandling,
   FixMapName,
   FormatDuration,
   FormatFullDate,
   GetMatchDetails,
   GoToLink,
-  LoadImage, ProcessName
+  LoadImage,
+  ProcessName
 } from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
@@ -163,6 +164,7 @@ export default {
       if (matchIdPattern.test(props.match_id)) {
         const res = await GetMatchDetails(props.match_id)
 
+        if (res) {
           if (res.map)
             document.title = `${FixMapName(res.map)} ► ${res.score[0]} : ${res.score[1]} ◄ ${DateTime.fromSeconds(res.date).toLocaleString(DateTime.DATETIME_SHORT)} | csgoWTF`
           else
@@ -190,9 +192,9 @@ export default {
           })
 
           console.log(data.matchDetails)
+        }
       } else {
-        console.log('Match not found')
+        errorHandling(404)
-        // TODO: needs 404
       }
     }
 
@@ -202,15 +204,13 @@ export default {
         if (matchIdPattern.test(props.match_id))
           GoToLink(`/match/${props.match_id}/${sub}`)
         else {
-          console.log('Match not found')
+          errorHandling(404)
-          // TODO: needs 404
         }
       } else if (route.fullPath.split('/')[3] === undefined) {
         if (matchIdPattern.test(props.match_id))
           GoToLink(`/match/${props.match_id}/overview`)
         else {
-          console.log('Match not found')
+          errorHandling(404)
-          // TODO: needs 404
         }
       }
     }

src/views/Player.vue

@@ -149,7 +149,6 @@ import {
   GetPlayerMeta,
   GetUser,
   GetWinLoss,
-  GoToLink,
   GoToPlayer,
   LoadImage,
   LoadMoreMatches,
@@ -246,9 +245,9 @@ export default {
 
     const GetPlayer = async (reset = false) => {
       if (props.id) {
-        const [res, resData] = await GetUser(props.id)
+        const resData = await GetUser(props.id)
 
-        if (res === 200 && resData) {
+        if (resData) {
           if (resData.steamid64 !== store.state.playerDetails.steamid64 || reset) {
             resData.name = ProcessName(resData.name)
 
@@ -262,13 +261,7 @@ export default {
           await SetPlayerData()
 
           console.log(store.state.playerDetails)
-        } else {
-          GoToLink('/')
-          // TODO: needs 404
         }
-      } else {
-        GoToLink('/')
-        // TODO: needs 404
       }
     }
 

src/views/errorPages/404.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="text-center mt-5">
+    <h1 class="pt-5">404</h1>
+    <h4 class="mt-4">The page you were looking for was not found!</h4>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "404"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/errorPages/500.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="text-center mt-5">
+    <h1 class="pt-5">500</h1>
+    <h4 class="mt-4">An internal server error occurred!</h4>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "500"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/errorPages/502.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="text-center mt-5">
+    <h1 class="pt-5">502</h1>
+    <h4 class="mt-4">You reached a bad gateway!</h4>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "502"
+}
+</script>
+
+<style scoped>
+
+</style>