What are some examples of error handling in Vue.js?

What are some examples of error handling in Vue.js?

In Vue.js, error handling can be done using the errorCaptured lifecycle hook, try-catch blocks, and global error handlers. Would you like to see specific examples?

Yes, please provide an example using the errorCaptured hook.

Sure! Here's an example:

Vue.component('child', {
  template: '<div>{{ msg }}</div>',
  data() {
    return { msg: null };
  },
  created() {
    throw new Error('Child component error!');
  }
});

Vue.component('parent', {
  template: '<child v-if="!error" />',
  data() {
    return { error: null };
  },
  errorCaptured(err, vm, info) {
    this.error = err.message;
    return false; // prevent the error from propagating
  }
});

This captures errors from the child component and prevents them from affecting the parent.

What about using try-catch blocks?

You can use try-catch blocks in methods to handle errors. For example:

methods: {
  async fetchData() {
    try {
      const response = await axios.get('/api/data');
      this.data = response.data;
    } catch (error) {
      console.error('Error fetching data:', error);
      this.errorMessage = 'Failed to load data.';
    }
  }
}

This way, you can manage errors that occur during asynchronous operations.