added some more error-handling

src/components/ScoreTeam.vue

@@ -175,7 +175,7 @@ export default {
         }
       } else if (team === 2) {
         arr = []
-        for (let i = 5; i < 10; i++) {
+        for (let i = 5; i < store.state.matchDetails.stats.length; i++) {
           arr.push(store.state.matchDetails.stats[i])
         }
       }

src/utils/ApiRequests.js

@@ -2,26 +2,35 @@ import axios from "axios";
 import {errorHandling} from "@/utils/Utils";
 
 const API_URL = process.env.VUE_APP_API_URL
+const TIMEOUT = 10_000
 
 export const GetMatches = async () => {
   try {
-    const res = await axios.get(`${API_URL}/matches`)
+    const res = await axios({
+      method: 'get',
+      url: `${API_URL}/matches`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 200)
       return res.data
-  } catch (err) {
-    errorHandling(err.response.status)
+  } catch {
+    console.log('Could not load matches')
   }
 }
 
 export const GetUser = async (id) => {
   try {
-    const res = await axios.get(`${API_URL}/player/${id}`)
+    const res = await axios({
+      method: 'get',
+      url: `${API_URL}/player/${id}`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 200)
       return res.data
-  } catch (err) {
-    errorHandling(err.response.status)
+  } catch {
+    console.log('Could not load user')
   }
 }
 
@@ -44,8 +53,15 @@ export const TrackMe = async (id64, authcode, sharecode = '') => {
   }
 
   try {
-    const res = await axios
-      .post(`${API_URL}/player/${id64}/track`, `authcode=${authcode}&sharecode=${sharecode}`)
+    // const res = await axios
+    //   .post(`${API_URL}/player/${id64}/track`, `authcode=${authcode}&sharecode=${sharecode}`)
+
+    const res = await axios({
+      method: 'post',
+      url: `${API_URL}/player/${id64}/track`,
+      data: `authcode=${authcode}&sharecode=${sharecode}`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 202) {
       status = res.status
@@ -67,73 +83,96 @@ export const TrackMe = async (id64, authcode, sharecode = '') => {
 
 export const GetPlayerValue = async (match_id) => {
   try {
-    const res = await axios.get(`${API_URL}/match/${match_id}/rounds`)
+    const res = await axios({
+      method: 'get',
+      url: `${API_URL}/match/${match_id}/rounds`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 200) {
       return res.data
     }
-  } catch (err) {
-    errorHandling(err.response.status)
+  } catch {
+    console.log('Could not get player value')
   }
 }
 
 export const GetMatchDetails = async (match_id) => {
   try {
-    const res = await axios.get(`${API_URL}/match/${match_id}`)
+    const res = await axios({
+      method: 'get',
+      url: `${API_URL}/match/${match_id}`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 200) {
       return res.data
     }
-  } catch (err) {
-    errorHandling(err.response.status)
+  } catch {
+    console.log('Could not load match details')
   }
 }
 
 export const LoadMoreMatches = async (player_id, date) => {
   try {
-    const res = await axios.get(`${API_URL}/player/${player_id}/next/${date}`)
+    const res = await axios({
+      method: 'get',
+      url: `${API_URL}/player/${player_id}/next/${date}`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 200) {
       return res.data
     }
-  } catch (err) {
-    errorHandling(err.response.status)
+  } catch {
+    console.log('Could not load more matches')
   }
 }
 
 export const GetPlayerMeta = async (player_id, limit = 4) => {
   try {
-    const res = await axios.get(`${API_URL}/player/${player_id}/meta/${limit}`)
+    const res = await axios({
+      method: 'get',
+      url: `${API_URL}/player/${player_id}/meta/${limit}`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 200) {
-      // console.log(res.data)
       return res.data
     }
-  } catch (err) {
-    errorHandling(err.response.status)
+  } catch {
+    console.log('Could not load player metadata')
   }
 }
 
 export const GetWeaponDmg = async (match_id) => {
   try {
-    const res = await axios.get(`${API_URL}/match/${match_id}/weapons`)
+    const res = await axios({
+      method: 'get',
+      url: `${API_URL}/match/${match_id}/weapons`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 200) {
       return res.data
     }
-  } catch (err) {
-    errorHandling(err.response.status)
+  } catch {
+    console.log('Could not calculate weapon damage')
   }
 }
 
 export const LoadMoreMatchesExplore = async (date) => {
   try {
-    const res = await axios.get(`${API_URL}/matches/next/${date}`)
+    const res = await axios({
+      method: 'get',
+      url: `${API_URL}/matches/next/${date}`,
+      timeout: TIMEOUT
+    })
 
     if (res.status === 200) {
       return res.data
     }
-  } catch (err) {
-    errorHandling(err.response.status)
+  } catch {
+    console.log('Could not load more matches')
   }
 }

src/views/Explore.vue

@@ -4,12 +4,20 @@
   <div class="wrapper">
     <div class="container-lg text-center">
       <h3>Recent matches</h3>
-      <MatchesTable :key="data.matches" :explore="true" :matches="data.matches"/>
+      <div v-if="data.matches">
+        <MatchesTable :key="data.matches" :explore="true" :matches="data.matches"/>
 
-      <div v-if="data.matches" class="load-more text-center">
-        <button :key="scrollToPos(store.state.scroll_state)" class="btn border-2 btn-outline-info"
-                @click="setMoreMatches">Load More
-        </button>
+        <div class="load-more text-center">
+          <button :key="scrollToPos(store.state.scroll_state)" class="btn border-2 btn-outline-info"
+                  @click="setMoreMatches">Load More
+          </button>
+        </div>
+      </div>
+
+      <div v-else>
+        <hr>
+        <h6>There seems to be a problem loading the content</h6>
+        <h6>Please try again later</h6>
       </div>
     </div>
   </div>
@@ -47,17 +55,21 @@ export default {
     onMounted(async () => {
       data.matches = await GetMatches()
 
-      if (data.matches[0].map) {
-        await LoadImage(data.matches[0].map)
-      } else if (!data.matches[0].map && MatchNotParsedTime(data.matches[0].date) && data.matches[1].map) {
-        await LoadImage(data.matches[1].map)
-      } else {
-        await LoadImage('random')
+      if (data.matches) {
+        if (data.matches[0].map) {
+          await LoadImage(data.matches[0].map)
+        } else if (!data.matches[0].map && MatchNotParsedTime(data.matches[0].date) && data.matches[1].map) {
+          await LoadImage(data.matches[1].map)
+        } else {
+          await LoadImage('random')
+        }
       }
 
       scrollToPos(store.state.scroll_state)
 
-      console.log(data.matches)
+      if (data.matches) {
+        console.log(data.matches)
+      }
     })
 
     onBeforeUnmount(() => {

src/views/Player.vue

@@ -3,136 +3,145 @@
 
   <div class="wrapper">
     <div class="container">
-      <div class="card mb-3 bg-transparent border-0">
-        <div class="row g-0">
-          <div class="img-container col-md-2 pt-3">
-            <img
-                :class="data.tracked ? 'tracked' : ''"
-                :src="constructAvatarUrl(store.state.playerDetails.avatar, 'full')"
-                :title="data.tracked ? 'Tracked' : ''"
-                alt="Player avatar"
-                class="img-fluid avatar">
-          </div>
-          <div class="col-md-8 d-flex">
-            <div class="card-body">
-              <h3 class="card-title"><a
-                  :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
-                  class="text-decoration-none text-white"
-                  target="_blank"
-                  title="Open steam profile">{{
-                  store.state.playerDetails.name
-                }}
-                <i class="fa fa-steam"></i>
-              </a></h3>
-              <table class="table table-borderless text-center">
-                <tr>
-                  <th class="wlt-win text-uppercase text-muted">Wins</th>
-                  <th class="wlt-loss text-uppercase text-muted">Losses</th>
-                  <th class="wlt-tie text-uppercase text-muted">Ties</th>
-                  <th class="wlt-win-rate text-uppercase text-muted">Win-Rate</th>
-                  <th class="wlt-tie-rate text-uppercase text-muted">Tie-Rate</th>
-                </tr>
-                <tr>
-                  <td class="wlt-win">{{ data.match_stats.win }}</td>
-                  <td class="wlt-loss">{{ data.match_stats.loss }}</td>
-                  <td class="wlt-tie">{{ data.match_stats.tie }}</td>
-                  <td class="wlt-win-rate">{{
-                      data.match_stats.win > 0 ? (data.match_stats.win / data.match_stats.total * 100).toFixed(0) : 0
-                    }}%
-                  </td>
-                  <td class="wlt-tie-rate">{{
-                      data.match_stats.tie > 0 ? (data.match_stats.tie / data.match_stats.total * 100).toFixed(0) : 0
-                    }}%
-                  </td>
-                </tr>
-              </table>
-              <div class="badges">
-                <img v-if="store.state.playerDetails.vac"
-                     :title="'VAC-Ban: ' + FormatVacDate(store.state.playerDetails.vac_date, store.state.matchDetails.date)"
-                     alt="Vac banned"
-                     src="../assets/images/icons/vac_banned.svg">
-                <img v-if="store.state.playerDetails.game_ban"
-                     :title="'Game-Ban: ' + FormatVacDate(store.state.playerDetails.game_ban_date, store.state.matchDetails.date)"
-                     alt="Game banned"
-                     src="../assets/images/icons/game_banned.svg">
-              </div>
+      <div v-if="store.state.playerDetails.name">
+        <div class="card mb-3 bg-transparent border-0">
+          <div class="row g-0">
+            <div class="img-container col-md-2 pt-3">
+              <img
+                  :class="data.tracked ? 'tracked' : ''"
+                  :src="constructAvatarUrl(store.state.playerDetails.avatar, 'full')"
+                  :title="data.tracked ? 'Tracked' : ''"
+                  alt="Player avatar"
+                  class="img-fluid avatar">
             </div>
-            <div v-if="!data.tracked" class="dropdown trackme-btn">
-              <button
-                  id="login-dropdown"
-                  aria-expanded="false"
-                  class="btn border-2 btn-outline-info"
-                  data-bs-toggle="dropdown"
-                  type="button"
-              >
-                Track Me!
-              </button>
-              <div v-if="data.statusErrorCode === 202" class="alert alert-success" role="alert">
-                {{ data.statusError }}
+            <div class="col-md-8 d-flex">
+              <div class="card-body">
+                <h3 class="card-title"><a
+                    :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
+                    class="text-decoration-none text-white"
+                    target="_blank"
+                    title="Open steam profile">{{
+                    store.state.playerDetails.name
+                  }}
+                  <i class="fa fa-steam"></i>
+                </a></h3>
+                <table class="table table-borderless text-center">
+                  <tr>
+                    <th class="wlt-win text-uppercase text-muted">Wins</th>
+                    <th class="wlt-loss text-uppercase text-muted">Losses</th>
+                    <th class="wlt-tie text-uppercase text-muted">Ties</th>
+                    <th class="wlt-win-rate text-uppercase text-muted">Win-Rate</th>
+                    <th class="wlt-tie-rate text-uppercase text-muted">Tie-Rate</th>
+                  </tr>
+                  <tr>
+                    <td class="wlt-win">{{ data.match_stats.win }}</td>
+                    <td class="wlt-loss">{{ data.match_stats.loss }}</td>
+                    <td class="wlt-tie">{{ data.match_stats.tie }}</td>
+                    <td class="wlt-win-rate">{{
+                        data.match_stats.win > 0 ? (data.match_stats.win / data.match_stats.total * 100).toFixed(0) : 0
+                      }}%
+                    </td>
+                    <td class="wlt-tie-rate">{{
+                        data.match_stats.tie > 0 ? (data.match_stats.tie / data.match_stats.total * 100).toFixed(0) : 0
+                      }}%
+                    </td>
+                  </tr>
+                </table>
+                <div class="badges">
+                  <img v-if="store.state.playerDetails.vac"
+                       :title="'VAC-Ban: ' + FormatVacDate(store.state.playerDetails.vac_date, store.state.matchDetails.date)"
+                       alt="Vac banned"
+                       src="../assets/images/icons/vac_banned.svg">
+                  <img v-if="store.state.playerDetails.game_ban"
+                       :title="'Game-Ban: ' + FormatVacDate(store.state.playerDetails.game_ban_date, store.state.matchDetails.date)"
+                       alt="Game banned"
+                       src="../assets/images/icons/game_banned.svg">
+                </div>
               </div>
-              <div v-if="data.statusErrorCode === 418" class="alert alert-warning" role="alert">
-                {{ data.statusError }}
-              </div>
-              <div v-if="data.statusErrorCode !== 0 && data.statusErrorCode !== 202 && data.statusErrorCode !== 418"
-                   class="alert alert-danger"
-                   role="alert">
-                {{ data.statusError }}
-              </div>
-              <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
-                   style="width: 320px">
-                <form class="px-4 py-3">
-                  <!-- AuthCode input -->
-                  <div class="form-outline mb-4">
-                    <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
-                           placeholder="AuthCode*"
-                           required type="text"/>
-                  </div>
+              <div v-if="!data.tracked" class="dropdown trackme-btn">
+                <button
+                    id="login-dropdown"
+                    aria-expanded="false"
+                    class="btn border-2 btn-outline-info"
+                    data-bs-toggle="dropdown"
+                    type="button"
+                >
+                  Track Me!
+                </button>
+                <div v-if="data.statusErrorCode === 202" class="alert alert-success" role="alert">
+                  {{ data.statusError }}
+                </div>
+                <div v-if="data.statusErrorCode === 418" class="alert alert-warning" role="alert">
+                  {{ data.statusError }}
+                </div>
+                <div v-if="data.statusErrorCode !== 0 && data.statusErrorCode !== 202 && data.statusErrorCode !== 418"
+                     class="alert alert-danger"
+                     role="alert">
+                  {{ data.statusError }}
+                </div>
+                <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
+                     style="width: 320px">
+                  <form class="px-4 py-3">
+                    <!-- AuthCode input -->
+                    <div class="form-outline mb-4">
+                      <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
+                             placeholder="AuthCode*"
+                             required type="text"/>
+                    </div>
 
-                  <!-- ShareCode input -->
-                  <div class="form-outline mb-2">
-                    <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
-                           placeholder="ShareCode"
-                           type="text"/>
-                  </div>
+                    <!-- ShareCode input -->
+                    <div class="form-outline mb-2">
+                      <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
+                             placeholder="ShareCode"
+                             type="text"/>
+                    </div>
 
-                  <div class="form-outline mb-4">
-                    <small>You can find your AuthCode and ShareCode <a
-                        href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
-                        target="_blank">here</a>.</small>
-                  </div>
+                    <div class="form-outline mb-4">
+                      <small>You can find your AuthCode and ShareCode <a
+                          href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
+                          target="_blank">here</a>.</small>
+                    </div>
 
-                  <!-- Submit button -->
-                  <button class="btn btn-outline-warning border-2" type="submit"
-                          @click.prevent="TrackPlayer">
-                    TrackMe
-                  </button>
-                </form>
+                    <!-- Submit button -->
+                    <button class="btn btn-outline-warning border-2" type="submit"
+                            @click.prevent="TrackPlayer">
+                      TrackMe
+                    </button>
+                  </form>
+                </div>
+              </div>
+              <div v-if="data.tracked" class="refresh-btn" title="Refresh Match-List" @click="RefreshData">
+                <i class="fa fa-refresh fa-2x"></i>
               </div>
-            </div>
-            <div v-if="data.tracked" class="refresh-btn" title="Refresh Match-List" @click="RefreshData">
-              <i class="fa fa-refresh fa-2x"></i>
             </div>
           </div>
         </div>
-      </div>
-      <div class="match-container d-flex">
-        <div class="matches">
+        <div class="match-container d-flex">
+          <div class="matches">
 
-          <MatchesTable v-if="store.state.playerDetails.matches" :matches="store.state.playerDetails.matches"/>
-          <h5 v-else>No matches on record</h5>
+            <MatchesTable v-if="store.state.playerDetails.matches" :matches="store.state.playerDetails.matches"/>
+            <h5 v-else>No matches on record</h5>
 
+          </div>
+
+          <div v-if="store.state.playerDetails.matches" class="side-info-container">
+
+            <PlayerSideInfo :player_meta="data.playerMeta"/>
+
+          </div>
         </div>
-
-        <div v-if="store.state.playerDetails.matches" class="side-info-container">
-
-          <PlayerSideInfo :player_meta="data.playerMeta" />
-
+        <div class="load-more col-lg-9 col-md-12 text-center">
+          <button v-if="data.match_stats.total !== data.matches.length" :key="scrollToPos(store.state.scroll_state)"
+                  class="btn border-2 btn-outline-info" @click="setMoreMatches">Load More
+          </button>
         </div>
       </div>
-      <div class="load-more col-lg-9 col-md-12 text-center">
-        <button v-if="data.match_stats.total !== data.matches.length" :key="scrollToPos(store.state.scroll_state)"
-                class="btn border-2 btn-outline-info" @click="setMoreMatches">Load More
-        </button>
+
+      <div v-else class="text-center pt-5">
+        <h3>Player-Page</h3>
+        <hr>
+        <h6>There seems to be a problem loading the player</h6>
+        <h6>Please try again later</h6>
       </div>
     </div>
   </div>
@@ -153,11 +162,11 @@ import {
   LoadImage,
   LoadMoreMatches,
   MatchNotParsedTime,
+  ProcessName,
   SaveLastVisitedToLocalStorage,
   scrollToPos,
   setTitle,
-  TrackMe,
-  ProcessName
+  TrackMe
 } from "../utils";
 import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
 import MatchesTable from "@/components/MatchesTable";
@@ -459,6 +468,7 @@ export default {
   .matches {
     width: 75%;
   }
+
   .side-info-container {
     width: 25%;
   }