display error message from API requests if available

Author: NicoWeio

src/components/ErrorBoundary.vue

@@ -1,22 +1,34 @@
 <template lang="pug">
 div
-  b-alert(variant="danger", v-for="error in errors", :key='error.time', :show='!error.dismissed', dismissible, @dismissed="error.dismissed = false")
-    | {{ error.msg }}.
-    | See dev console (F12) and/or server logs for more info.
-  slot
+	b-alert(variant="danger", v-for="error in errors", :key='error.time', :show='!error.dismissed', dismissible, @dismissed="error.dismissed = false")
+		| {{ error.msg }}
+	slot
 </template>
 
 <script>
 // Based on: https://medium.com/@dillonchanis/handling-errors-in-vue-with-error-boundaries-91f6ead0093b
 export default {
   name: 'ErrorBoundary',
   data() {
-    return { errors: [] };
+    return {
+      errors: []
+    };
   },
   errorCaptured(err, vm, info) {
-    //console.error("Error captured!");
-    //console.error(err, vm, info);
-    const msg = err.name && err.message ? err.name + ': ' + err.message : err;
+    // console.error("Error captured!");
+    // console.error(err, vm, info);
+
+    //default error message
+    let msg = (err.name && err.message) ? (err.name + ": " + err.message + ". See dev console (F12) and/or server logs for more info.") : err;
+
+    //use server error response if available
+    //err.isAxiosError doesn't help much here…
+    if (err.response && err.response.data && err.response.data.message) {
+      msg = err.response.data.message;
+    }
+
+    //dedupe
+    if (this.errors.some(e => e.msg == msg)) return;
     this.errors.push({
       msg: msg,
       time: new Date().toISOString(),