Vue 'errorCaptured' Lifecycle Hook
Example
Using the errorCaptured lifecycle hook to catch an error from a child component and create an alert to the user.
<script>
export default {
errorCaptured() {
alert("An error occurred");
}
}
</script>
See more examples below.
Definition and Usage
The errorCaptured lifecycle hook is called when an error happens in a child/descendant component.
This hook can be used for error handling, logging, or to display the error to the user.
When using the errorCaptured hook, it is important not to trigger a render of the component where the error comes from, because that will most likely cause an infinite loop.
Information about the error is available to us as three arguments in the errorCaptured() function:
- The error
- The component that triggered the error
- The error source type
Default behavior for an error that occurs, is to propagate, or 'bubble up', from the component the error occurred in. An error that occurs in a component will move up to the parent component, and continue to move further up, and eventually ends up as an error message in the console.
By running return false; from inside the errorCaptured() function, the error will not end up in the parent component (stop propagating), and the error will also not end up as an error message in console.
Error handling can also set up using the app.config.errorHandler function.
More Examples
Example 1
Using the errorCaptured lifecycle hook to catch an error and write information about the error to the console.
App.vue:
<template>
<h1>The 'errorCaptured' Lifecycle Hook</h1>
<p>Whenever there is an error in a child component, the errorCaptured() function is called on the parent.</p>
<p>Open the browser console to see the captured error details.</p>
<div>
<comp-one></comp-one>
</div>
</template>
<script>
export default {
errorCaptured(error,compInst,errorInfo) {
console.log("error: ", error);
console.log("compInst: ", compInst);
console.log("errorInfo: ", errorInfo);
}
}
</script>
<style>
#app > div {
border: dashed black 1px;
border-radius: 10px;
padding: 10px;
margin-top: 10px;
background-color: lightgreen;
}
</style>
ComOne.vue:
<template>
<h2>Component</h2>
<p>This is the component</p>
<button @click="generateError">Generate Error</button>
</template>
<script>
export default {
methods: {
generateError() {
this.$refs.objEl.innerHTML = "hi";
}
}
}
</script>
Example 2
Using the errorCaptured lifecycle hook with return false; to stop the error from propagating.
App.vue:
<template>
<h1>The 'errorCaptured' Lifecycle Hook</h1>
<p>Whenever there is an error in a child component, the errorCaptured() function is called on the parent.</p>
<p>Open the browser console to see the captured error details.</p>
<div>
<comp-one></comp-one>
</div>
</template>
<script>
export default {
errorCaptured(error,compInst,errorInfo) {
console.log("error: ", error);
console.log("compInst: ", compInst);
console.log("errorInfo: ", errorInfo);
return false;
}
}
</script>
<style>
#app > div {
border: dashed black 1px;
border-radius: 10px;
padding: 10px;
margin-top: 10px;
background-color: lightgreen;
}
</style>
ComOne.vue:
<template>
<h2>Component</h2>
<p>This is the component</p>
<button @click="generateError">Generate Error</button>
</template>
<script>
export default {
methods: {
generateError() {
this.$refs.objEl.innerHTML = "hi";
}
}
}
</script>
Related Pages
Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'errorCaptured' Hook