javascript / intermediate
Snippet
Error Propagation Control with onErrorCaptured
The onErrorCaptured hook allows a parent component to catch errors from its descendants. Returning 'false' is an intermediate technique to stop the error from reaching the global error handler, effectively creating an error boundary.
snippet.js
1
2
3
4
5
6
7
8
9
import { onErrorCaptured, ref } from 'vue';const error = ref(null);onErrorCaptured((err, instance, info) => {error.value = `Error in ${info}: ${err.message}`;console.error('Captured:', err);return false; // Prevents the error from bubbling up further});
vue
Breakdown
1
onErrorCaptured((err, instance, info) => { ... })
Hooks into the error propagation chain of the component tree.
2
return false;
Stops the error from propagating to the global config.errorHandler.