Skip to content

Commit

Permalink
display error message from API requests if available
Browse files Browse the repository at this point in the history
  • Loading branch information
NicoWeio committed Apr 27, 2020
1 parent 353634b commit 452ac82
Showing 1 changed file with 20 additions and 8 deletions.
28 changes: 20 additions & 8 deletions 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(),
Expand Down

0 comments on commit 452ac82

Please sign in to comment.