Trigger / catch custom errors in vue components.
Setup error listeners within Vue component to listen on errors generated anywhere in the component tree. The plugin makes it easy to trigger custom errors and notify interested components. Errors are propagated hierarchically from bottom to top. Every handler in the chain gets an opportunity to handle the error and or let it propagate it to the parent.
npm install vue-error-catch --save
import Vue from "vue";
import ErrorCatch from "vue-error-catch";
Vue.use(ErrorCatch);
const errorView = {
template: "<div>Error view</div>"
};
const childComponent = {
template: `<div><error-view v-if="renderErrorView"/></div>`,
components: {
errorView
},
data: () => ({
hasError: false
}),
computed: {
renderErrorView() {
return this.hasError;
}
},
methods: {
$catch(e: any) {
if (e.code === 101) {
// handle the error
this.hasError = true;
// stop propagation
return false;
}
}
}
};
const parentComponent = {
template: `<div><child/></div>`,
components: {
child: childComponent
},
methods: {
$catch(e: any) {
// this will never be triggered because child component
// handled the error and returned false.
}
}
};
const mainComponent = {
template: "<div><parent/></div>",
components: {
parent: parentComponent
},
mounted() {
// trigger an error on the component tree
this.$error({
code: 101,
message: "A custom error"
});
}
};
$catch
: Called when a custom error is triggered anywhere in the component tree. Receives the thrown error as the only argument.$error
: trigger a custom error. Theerror
argument is passed to$catch
hooks on the component tree until it is handled or the last hook is reached.
$catch
hooks are invoked from bottom to top, i.e. if a parent and child component both declares $catch hooks then the child's hook will be executed before the parent's.- A
$catch
hook may returnfalse
to prevent the error from propagating further.