Vue JS How to catch errors globally and display them in a top level componentHow to get useful error messages in PHP?How to get vuex state from a javascript file (instead of a vue component)Vue.js - Making helper functions globally available to single-file componentsHow can I update state in vuex ? vue.js 2How do you use laravel csrftoken in vue componentHow to enable disable component in a complex vue app?Vue-Axios errors do not propagate to catch async try catch blockhow to eslint with Vue components?How to get Vue to catch event?Catching errors in computed properties in Vue
Any examples of headwear for races with animal ears?
Was there a Viking Exchange as well as a Columbian one?
Counterexample: a pair of linearly ordered sets that are isomorphic to subsets of the other, but not isomorphic between them
Reverse the word in a string with the same order in javascript
Was it really necessary for the Lunar Module to have 2 stages?
Transfer over $10k
How can I record the screen and the rear camera on an iPhone simultaneously?
How to stop co-workers from teasing me because I know Russian?
Do generators produce a fixed load?
Does jamais mean always or never in this context?
Has any spacecraft ever had the ability to directly communicate with civilian air traffic control?
Binary Numbers Magic Trick
Were there two appearances of Stan Lee?
Is thermodynamics only applicable to systems in equilibrium?
What is the strongest case that can be made in favour of the UK regaining some control over fishing policy after Brexit?
Will a top journal at least read my introduction?
get exit status from system() call
Why do Ichisongas hate elephants and hippos?
Why does processed meat contain preservatives, while canned fish needs not?
When India mathematicians did know Euclid's Elements?
What does "rf" mean in "rfkill"?
What is a Recurrent Neural Network?
Please, smoke with good manners
Can fracking help reduce CO2?
Vue JS How to catch errors globally and display them in a top level component
How to get useful error messages in PHP?How to get vuex state from a javascript file (instead of a vue component)Vue.js - Making helper functions globally available to single-file componentsHow can I update state in vuex ? vue.js 2How do you use laravel csrftoken in vue componentHow to enable disable component in a complex vue app?Vue-Axios errors do not propagate to catch async try catch blockhow to eslint with Vue components?How to get Vue to catch event?Catching errors in computed properties in Vue
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
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?
vue.js error-handling global
asked Mar 22 at 18:51
PaulPaul
1
add a comment |
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?
vue.js error-handling global
asked Mar 22 at 18:51
PaulPaul
1
Instead of using Throw, I tried modifying a call to axios so it had an invalid end point, then catching the error and calling my global errHandler with the e error returned. However, it seems that somehow the window.addEventListener('unhandledrejection',function(event) is getting called. However, this is then erroring saying that Uncaught (in promise) TypeError: Object(...) is not a function. I don't know what to do about that?
– Paul
Mar 22 at 20:04
add a comment |
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?
vue.js error-handling global
asked Mar 22 at 18:51
PaulPaul
1
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?
vue.js error-handling global
vue.js error-handling global
asked Mar 22 at 18:51
PaulPaul
1
asked Mar 22 at 18:51
PaulPaul
1
asked Mar 22 at 18:51
PaulPaul
1
asked Mar 22 at 18:51
PaulPaul
1
asked Mar 22 at 18:51
PaulPaul
1
1
Instead of using Throw, I tried modifying a call to axios so it had an invalid end point, then catching the error and calling my global errHandler with the e error returned. However, it seems that somehow the window.addEventListener('unhandledrejection',function(event) is getting called. However, this is then erroring saying that Uncaught (in promise) TypeError: Object(...) is not a function. I don't know what to do about that?
– Paul
Mar 22 at 20:04
add a comment |
Instead of using Throw, I tried modifying a call to axios so it had an invalid end point, then catching the error and calling my global errHandler with the e error returned. However, it seems that somehow the window.addEventListener('unhandledrejection',function(event) is getting called. However, this is then erroring saying that Uncaught (in promise) TypeError: Object(...) is not a function. I don't know what to do about that?
– Paul
Mar 22 at 20:04
Instead of using Throw, I tried modifying a call to axios so it had an invalid end point, then catching the error and calling my global errHandler with the e error returned. However, it seems that somehow the window.addEventListener('unhandledrejection',function(event) is getting called. However, this is then erroring saying that Uncaught (in promise) TypeError: Object(...) is not a function. I don't know what to do about that?
– Paul
Mar 22 at 20:04
Instead of using Throw, I tried modifying a call to axios so it had an invalid end point, then catching the error and calling my global errHandler with the e error returned. However, it seems that somehow the window.addEventListener('unhandledrejection',function(event) is getting called. However, this is then erroring saying that Uncaught (in promise) TypeError: Object(...) is not a function. I don't know what to do about that?
– Paul
Mar 22 at 20:04
add a comment |
2 Answers
2
active
oldest
votes
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!
answered Mar 22 at 19:14
varit05varit05
2,3501918
As per my original question, I already have Vue,config.errorHandler in my code, but the very first line is a console.log and that is not getting called. It seems that Vue doesn't call this for a thrown error. See this link for an example. link. Seems rather poor. I had less trouble creating a global error handler in Excel VBA than I have had in Vue and Microsoft have not updated VBA for years.
– Paul
Mar 22 at 19:31
add a comment |
Did more research and I think someone may have already raised a bug report with Vue for this
PR on Vue
https://github.com/vuejs/vue/pull/5709
So it looks like the problem is that the way that I am trying to test this isn't being caught.
answered Mar 22 at 19:26
PaulPaul
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55306092%2fvue-js-how-to-catch-errors-globally-and-display-them-in-a-top-level-component%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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!
answered Mar 22 at 19:14
varit05varit05
2,3501918
As per my original question, I already have Vue,config.errorHandler in my code, but the very first line is a console.log and that is not getting called. It seems that Vue doesn't call this for a thrown error. See this link for an example. link. Seems rather poor. I had less trouble creating a global error handler in Excel VBA than I have had in Vue and Microsoft have not updated VBA for years.
– Paul
Mar 22 at 19:31
add a comment |
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!
answered Mar 22 at 19:14
varit05varit05
2,3501918
As per my original question, I already have Vue,config.errorHandler in my code, but the very first line is a console.log and that is not getting called. It seems that Vue doesn't call this for a thrown error. See this link for an example. link. Seems rather poor. I had less trouble creating a global error handler in Excel VBA than I have had in Vue and Microsoft have not updated VBA for years.
– Paul
Mar 22 at 19:31
add a comment |
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!
answered Mar 22 at 19:14
varit05varit05
2,3501918
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!
answered Mar 22 at 19:14
varit05varit05
2,3501918
answered Mar 22 at 19:14
varit05varit05
2,3501918
answered Mar 22 at 19:14
varit05varit05
2,3501918
answered Mar 22 at 19:14
varit05varit05
2,3501918
2,3501918
As per my original question, I already have Vue,config.errorHandler in my code, but the very first line is a console.log and that is not getting called. It seems that Vue doesn't call this for a thrown error. See this link for an example. link. Seems rather poor. I had less trouble creating a global error handler in Excel VBA than I have had in Vue and Microsoft have not updated VBA for years.
– Paul
Mar 22 at 19:31
add a comment |
As per my original question, I already have Vue,config.errorHandler in my code, but the very first line is a console.log and that is not getting called. It seems that Vue doesn't call this for a thrown error. See this link for an example. link. Seems rather poor. I had less trouble creating a global error handler in Excel VBA than I have had in Vue and Microsoft have not updated VBA for years.
– Paul
Mar 22 at 19:31
As per my original question, I already have Vue,config.errorHandler in my code, but the very first line is a console.log and that is not getting called. It seems that Vue doesn't call this for a thrown error. See this link for an example. link. Seems rather poor. I had less trouble creating a global error handler in Excel VBA than I have had in Vue and Microsoft have not updated VBA for years.
– Paul
Mar 22 at 19:31
As per my original question, I already have Vue,config.errorHandler in my code, but the very first line is a console.log and that is not getting called. It seems that Vue doesn't call this for a thrown error. See this link for an example. link. Seems rather poor. I had less trouble creating a global error handler in Excel VBA than I have had in Vue and Microsoft have not updated VBA for years.
– Paul
Mar 22 at 19:31
add a comment |
Did more research and I think someone may have already raised a bug report with Vue for this
PR on Vue
https://github.com/vuejs/vue/pull/5709
So it looks like the problem is that the way that I am trying to test this isn't being caught.
answered Mar 22 at 19:26
PaulPaul
1
add a comment |
Did more research and I think someone may have already raised a bug report with Vue for this
PR on Vue
https://github.com/vuejs/vue/pull/5709
So it looks like the problem is that the way that I am trying to test this isn't being caught.
answered Mar 22 at 19:26
PaulPaul
1
add a comment |
Did more research and I think someone may have already raised a bug report with Vue for this
PR on Vue
https://github.com/vuejs/vue/pull/5709
So it looks like the problem is that the way that I am trying to test this isn't being caught.
answered Mar 22 at 19:26
PaulPaul
1
Did more research and I think someone may have already raised a bug report with Vue for this
PR on Vue
https://github.com/vuejs/vue/pull/5709
So it looks like the problem is that the way that I am trying to test this isn't being caught.
answered Mar 22 at 19:26
PaulPaul
1
answered Mar 22 at 19:26
PaulPaul
1
answered Mar 22 at 19:26
PaulPaul
1
answered Mar 22 at 19:26
PaulPaul
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55306092%2fvue-js-how-to-catch-errors-globally-and-display-them-in-a-top-level-component%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Instead of using Throw, I tried modifying a call to axios so it had an invalid end point, then catching the error and calling my global errHandler with the e error returned. However, it seems that somehow the window.addEventListener('unhandledrejection',function(event) is getting called. However, this is then erroring saying that Uncaught (in promise) TypeError: Object(...) is not a function. I don't know what to do about that?
– Paul
Mar 22 at 20:04