Vue Error Catch
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.
Install
npm install vue-error-catch --save
Usage
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) {
this.hasError = true;
return false;
}
}
}
};
const parentComponent = {
template: `<div><child/></div>`,
components: {
child: childComponent
},
methods: {
$catch(e: any) {
}
}
};
const mainComponent = {
template: "<div><parent/></div>",
components: {
parent: parentComponent
},
mounted() {
this.$error({
code: 101,
message: "A custom error"
});
}
};
API
$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. The error
argument is passed to $catch
hooks on the component tree until it is handled or the last hook is reached.
Error Propagation
$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 return false
to prevent the error from propagating further.