Is there a way to handle any unhandled exception that occurred anywhere in vuex state? Something similar to Vue.config.errorHandler callback that works for vue files?
Related
I have a simple case:
<component-a>
<component-b/>
</component-a>
Im I able to catch error from component B in component A?
What the best practice to handle error in stencil app?
Is there a kind of react error boundary?
You could try and define a custom #Event (e.g. errorEvent) in component-b that fires every time that the error occurs, and the component-a can #Listen("errorEvent") and do what needs to be done.
I have a problem with the redundant of routes on vuejs.
I have a Vuejs page with Query that I would like to be able to change continuously but when I make the change (this.$router.replace({query: newQuery})), It show me this Error :
**Uncaught (in promise) Error: Avoided redundant navigation to current location:**
Error Screenshot
This is happening because you are trying to replace the current route with the same route you're actually in.
You should avoid the renavigation to the current location, but if you decide to not avoid it then you need to catch the promise so the browser things the exception is being handled:
Any router action is a promise, you just need to catch it:
this.$router.replace({query: newQuery}).catch(()=>{});
Vue Router documentation on navigation failures
I have a problem with cleaning up Vuex state at logout and continuing attempts to access to the state from the component.
A component uses object from state:
<custom-card
color="green"
:name="this.author.name"
:surname="this.author.surname"
>
An "author" object is obtained using getters, from "computed":
computed: {
...mapGetters({
author: 'author'
}),
},
When I'm trying to logout being on the page with the card component, I am redirected to the login page (as intended) and at the same time I got an error in console:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of null"
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'name' of null
It's clear for me, that 'author' is set to null at logout and this is why the error occur. But it isn't clear for, why this is happening. I thought after click on logout button, vue-router should redirect me to the login page and content of the previous page doesn't matter after that.
How can I avoid these errors?
Upd. I think an anwer on this question can be found in "Rectivity in Depth" article on Vuejs documentation:
Since Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value.
If you don’t declare message in the data option, Vue will warn you that the render function is trying to access a property that doesn’t exist.
After user has registered to my app, one component sends an action to Vuex to start listening to update requests from the server using Websocket.
Vuex action:
const socket = io(url);
socket.on(id, data => {
...
I'm using Vuex-persisted to use LocalStorage for storing state. However, if user refreshes the browser, the websocket connection is lost. If I include the socket into Vuex state, I get the following error:
vuex-persistedstate.es.js?0e44:1 Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Socket'
| property 'io' -> object with constructor 'Manager'
| property 'nsps' -> object with constructor 'Object'
--- property '/' closes the circle
Since there are no lifecycle hooks for Vuex, how can I resume the websocket connection after refresh?
Also Vuex should refresh the state from backend always after refresh, to be sure that no update request event was lost while the websocket connection was down.
Suddenly I started getting the following TypeError warning from Vue but my app works fine
[Vue warn]: Error in render: "TypeError: Cannot read property 'Name' of null"
This is coming from a data property named 'dashboard' that is loaded via AJAX call after user selects an item from a drop down. In debugging I have been able to simplify the code to get the warning and learned how to not get the warning.
This line will give me the warning but works fine
Dashboard: {{dashboard.Name}}
This line will display the entire dashboard object with no warning
Dashboard: {{ dashboard}}
This line works fine as well with no warning
Dashboard: {{ dashboard == null ? "Null" :dashboard.Name}}
I'm doing my first project with Vue and have had this code in working just fine for a couple of weeks, with no warnings.
Why all of a sudden do I start seeing this warning?
Secondary question is how do you typically track down such warnings. The stack trace is all in Vue code and gives me no idea where the problem originates from in my code.
The Vue team explained this in an answer from their forums here. I'll repeat a shorter version below as it took awhile to get it into my thick head.
A TypeError will be emitted when Vue does its rendering and the state of the data is not yet complete, in my case data was not yet set by the async AJAX call. When the AJAX call does return the data reactivity kicks in and the render is done again and this time the data is in a valid state.
This explains why the below has a TypeError but renders just fine
Dashboard: {{dashboard.Name}}
The TypeError is because Vue is attempting to render null.Name on initial rendering, i.e. dashboard is initially set to null. After the AJAX call returns, dashboard is now set and Vue reactivity kicks in and second rendering works as expected.
This below does not emit the TypeError warning because accessing\rendering null
Dashboard: {{ dashboard}}
is valid with nothing to render so no TypeError, after the AJAX call returns reactivity causes a re-render which displays the data as expected.
Resolution, quoted from the mentioned post.
Generally speaking you would put a conditional render either around your component, or the data that may require that information with a v-if statement to trigger a truthy expression. As null is “false”. When ajax fills it in it becomes “truthy”