add error handling

src/app/App.vue

@@ -9,6 +9,7 @@
         </div>
       </div>
     </div>
+    <ErrorBar/>
     <footer class="footer elevated">
       <Player />
     </footer>
@@ -27,12 +28,14 @@
   }
 </style>
 <script lang="ts">
+  import ErrorBar from "./ErrorBar.vue";
   import TopNav from "./TopNav.vue";
   import Sidebar from "./Sidebar.vue";
   import Player from "@/player/Player.vue";
 
   export default {
     components: {
+      ErrorBar,
       TopNav,
       Sidebar,
       Player,

src/app/ErrorBar.vue

@@ -0,0 +1,28 @@
+<template>
+  <b-alert
+    class="fixed-top m-0 rounded-0"
+    variant="danger"
+    :show="error != null"
+    dismissible
+    @dismissed="clearError">
+    <template v-if="error">
+      <strong>{{ error.message }}</strong><br>
+      {{ error.stack }}
+    </template>
+  </b-alert>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+  import { mapState, mapMutations } from 'vuex';
+
+  export default Vue.extend({
+    computed: {
+      ...mapState(['error'])
+    },
+    methods: {
+      ...mapMutations([
+        'clearError'
+      ]),
+    },
+  });
+</script>

src/main.ts

@@ -33,6 +33,10 @@ connectAudioToStore(store);
 Vue.prototype.$auth = authService;
 Vue.prototype.$api = api;
 
+Vue.config.errorHandler = (err, vm, info) => {
+  store.commit("setError", err)
+}
+
 new Vue({
   router,
   store,

src/player/store.ts

@@ -124,4 +124,7 @@ export function connectAudioToStore(store: Store<any>) {
   audio.onended = (event) => {
     store.dispatch("player/playNext");
   }
+  audio.onerror = (event) => {
+    store.commit("setError", audio.error);
+  }
 }

src/shared/store.ts

@@ -10,7 +10,7 @@ interface State {
   isLoggedIn: boolean;
   username: null | string;
   showMenu: boolean;
-  errors: any[];
+  error: Error | null;
   playlists: any[];
 }
 
@@ -19,10 +19,16 @@ const setupRootModule = (authService: AuthService, api: API): Module<State, any>
     isLoggedIn: false,
     username: null,
     showMenu: false,
-    errors: [],
+    error: null,
     playlists: [],
   },
   mutations: {
+    setError(state, error) {
+      state.error = error;
+    },
+    clearError(state) {
+      state.error = null;
+    },
     setLoginSuccess(state, { username }) {
       state.isLoggedIn = true;
       state.username = username;