Snippet

Component Error Boundary with onErrorCaptured

The onErrorCaptured lifecycle hook registers an error handler that captures errors propagating from descendant components. Returning false stops the error from propagating further up the component hierarchy.

snippet.js

javascript

import { ref, onErrorCaptured } from 'vue';
 
export default {
  setup() {
    const errorMessage = ref(null);
 
    onErrorCaptured((err) => {
      errorMessage.value = err.message;
      return false;
    });
 
    return { errorMessage };
  }
};

vue

Breakdown

const errorMessage = ref(null);

Creates a reactive variable to store the error message if an error occurs.

onErrorCaptured((err) => {

Registers a hook to intercept runtime errors thrown by child components.

errorMessage.value = err.message;

Captures and stores the error message into the reactive reference for display.

return false;

Prevents the error from propagating further up to parent components or crashing the app.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Component Error Boundary with onErrorCaptured

Related