From 29c695bbc6dcf0da94bd2335b4524e5f7e1d548b Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Fri, 31 Jul 2020 14:55:21 +0200
Subject: [PATCH] add error handling

---
 src/app/App.vue      |  3 +++
 src/app/ErrorBar.vue | 28 ++++++++++++++++++++++++++++
 src/main.ts          |  4 ++++
 src/player/store.ts  |  3 +++
 src/shared/store.ts  | 10 ++++++++--
 5 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/app/ErrorBar.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 0e90fb8..90fb2d4 100644
--- a/src/app/App.vue
+++ b/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,
diff --git a/src/app/ErrorBar.vue b/src/app/ErrorBar.vue
new file mode 100644
index 0000000..bb71276
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 2d0b7d4..13b9433 100644
--- a/src/main.ts
+++ b/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,
diff --git a/src/player/store.ts b/src/player/store.ts
index abfdbba..e4f7cea 100644
--- a/src/player/store.ts
+++ b/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);
+  }
 }
diff --git a/src/shared/store.ts b/src/shared/store.ts
index ede4535..ff2b926 100644
--- a/src/shared/store.ts
+++ b/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;