Intermediate LevelVue JS
How do you implement error boundaries using onErrorCaptured and app.config.errorHandler?
❓ Interview Prompt: Explain Vue error handling: component-level onErrorCaptured error boundaries and global app.config.errorHandler.
Uncaught runtime errors inside component lifecycle hooks or render functions can crash UI rendering if not trapped cleanly.
Error Handling Layers:
1
'onErrorCaptured(callback)': Acts as an Error Boundary for descendant components. Captures errors thrown by children in the component tree. Returning 'false' prevents the error from propagating further up!
2
'app.config.errorHandler': Global fallback error handler in 'main.js'. Catches all uncaught runtime errors across the entire app for reporting to Sentry/Datadog.
Code Implementation Example
javascript
// App.vue — Component-level Error Boundary
import { ref, onErrorCaptured } from 'vue';
const hasError = ref(false);
const errorMessage = ref('');
onErrorCaptured((err, instance, info) => {
hasError.value = true;
errorMessage.value = err.message;
return false; // Stop error from bubbling further up!
});💡Capturing descendant component errors using onErrorCaptured lifecycle hook.
🎯 Interview Key Takeaway
Use onErrorCaptured to build component error boundaries and app.config.errorHandler for global telemetry reporting.
#onErrorCaptured#Error Handling#Intermediate
Back to all Vue JS Questions→