0 votes
in Education by (1.7m points)
I have set up Vue so that I have a top level AppLayout component which just includes a Navigation Menu component, the router-view and, which uses v-if to optionally display an ErrorDisplay component if the error data item is set. I set this from an err state variable in the Vuex store.

That is where I want to get to. However, I think the problem is more fundamental.

In a lower component, I have a submit function that gets called when I click the submit button. To test error handling I have put

throw new Error('Cannot Submit');

In my Main.js I have

handlers for window.orerror, window.addEventListner, Vue.config.errorhandler, Vue.config.warnhandler

All of these should just call the errHandler function, which just calls an action to update the err variable in the state. The hope being that this will then result in the ErrorDisplay component showing on my top level component.

However, I have console.log statements as the first statement in all the above handlers and in my errHandler function. None of these console.logs are getting executed.

In the Console in Chrome, I am just seeing [vue warn]: Error in v-on handler: "Error: Cannot Submit"

So it is getting the text from my throw, but none of the error handlers seem to be capturing this?

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by (1.7m points)
Vue provides Global configuration config.errorHandler to capture error inside Vue components Globally.

As per Official Docs

Assign a handler for uncaught errors during component to render function and watchers. The handler gets called with the error and the Vue instance.

This is how it can be used:

Vue.config.errorHandler = function (err, vm, info) {

  // handle error

  // `info` is a Vue-specific error info, e.g. which lifecycle hook

  // the error was found in. Only available in 2.2.0+


Official docs

Hope this helps!