Vuex: what is the best way to handle errors in vuex ?

[bardiarastin]

i have implemented vuex on my project but i'm having doubt that so how do i handle server errors .
for example i have a form and after submitting it the server (laravel) may send back 422 Unprocessable Entity for any reason . then i want to open a modal in js and display response that you've something wrong in your submitted data or the server didn't send any response or whatever ...

due to image above handling that errors is possible in component it self, actions and mutations but the question is which one is the best place to handle it ? while i have lots of components that can be in the same situation ...

[andreiglingeanu]

I also wonder if there are some ready - made libraries for handling optimistic updates and undoing them in case of errors. Redux has redux-saga for this purpose.

[CodinCat]

I think mutations should be as pure/simple as possible. Action is the place to throw errors, and you catch them in a component. (actions can also handle the errors in the first place, for example dispatching some other actions like FETCH_FAILED)

A simple example here: http://codepen.io/CodinCat/pen/bqwGBW?editors=1010

The action FETCH may do some async thing and return a promise so that the component can handle it. You can open the modal in the catch block.

[ktsn]

Side effects like ajax request should be handled in actions. Only thing mutations can do is mutating state by using payload.
http://vuex.vuejs.org/en/actions.html

[dotnetCarpenter]

I have a slightly different use-case. I got a (http) loader running in a webworker which is sent batches of requests from a vuex action. Before using vuex, I had a pub/sub system where the loader would emit successful requests and errors. Since the _fetching_ is ongoing and can be both successful and unsuccessful, promises are out since they can only resolve/reject once.

Successful requests are easy. Just commit the change and let vuex handle the reactive stuff. I have not found any documentation or text regarding failure state management. I will just go ahead and implement something but I would appreciate having a look at how other people are handling this. I guess, if I set a computed property to an empty error struct in vuex in any component that cares and then they will find out if the requests is their responsibility and do what-ever action required.

Does anyone have a pointer to research or implementations of my use-case?

[dotnetCarpenter]

I quickly ran into an issue, when switching from pub/sub pattern to vuex reactive pattern. I need to react to property changes inside an array (pages). I add a watcher to pages but is there a idiomatic way to only watch the object being modified? I'm asking because I don't want to manually compare each object in the array to find the modified object. I just want the object which has its property altered.

[dotnetCarpenter]

One _hack_ I came up with is to use the internal property _vm on a store. Bringing back the pub/sub pattern.

Inside my mutation:

loaded (state, { id, type, bool }) {
    const page = state.pages[id]
    const propName = pageDisplayEnum.getName(type)
    page[propName + 'Loaded'] = bool
    Vue.set(state.pages, id, page)
    this._vm.$emit('loaded', id)
  },

Inside a component:

mounted () {
  this.$store._vm.$on('loaded', id => console.log('PM::loaded', id))
}

Is there a less _hacky_ way to achieve this?

[dotnetCarpenter]

Found a way - described in: https://forum.vuejs.org/t/solved-publisher-subscriber-pattern-in-vuex/29176/

[daanaerts]

I don't think actions should throw errors to components, because it's not the vuex way. Just like actions shouldn't return/resolve data, but instead commit the result. Better to have:

mutations:

actions/USERS_GET_REQUEST // loading (optional)
actions/USERS_GET_SUCCESS // request was resolved
actions/USERS_GET_ERROR // request was rejected

Alternatively, I dispatch a global action to error.

catch (error) {
   dispatch('handleApiError',error)
}

[jaapspiering]

Well, that is no way to conclude this issue. The last post has 7 thumbs up and 7 thumbs down. This topic seems quite controversial.

[sdwru]

This and form validation seems to be a couple areas where vuex could be greatly improved.

[stepanjakl]

Is there any global Vuex error handler? Such as Vue.config.errorHandler = (error, vm, info) => {} ... for Vue in main.js file.

This would be useful for catching errors like [vuex] unknown action type: 🙏