Best practice for error handling? about vuex-crud HOT 7 CLOSED

I am noting that vuex-crud calls error handlers from inside mutations (e.g. onFetchListError).

As far as I understand it, dispatching actions from inside mutation goes against the vuex design principle.

So, I imagine, the way one should handle errors is to catch them inside components that call upon the store. E.g.

this.$store.dispatch('foo/fetchList')
  .then(function() { /* ... */ })
  .catch(function(parsedError) { /* ... dispatch actions to handle errors ... */ })

from vuex-crud.

Hey @martinhbramwell @k8n,

sorry for my late reply, but I was on holiday without my laptop :-).

onFetchListError, onFetchListSuccess are actually not meant to be an error handlers, but rather a simple callbacks to modify the store in a custom way.

And I agree with @k8n that you should handle errors using promises on your component level

from vuex-crud.

I will update the documentation, so it's more clear that there should be no side-effects in onFetchListError callbacks

from vuex-crud.

My requirements include keeping the user's browser console free of any errors or warnings.

I took your example and replaced those lines with

  onFetchArticles() {
    LG(' * * Try to fetch articles * *');
    this.fetchArticles()
      .then(() => { LG(' * * Fetched articles * *'); })
      .catch((e) => {
        LG(`*** Error while fetching articles :: ${e}***`);
      });
  },

When logged out and clicking Fetch articles I see :

* * Try to fetch articles * *
GET ...myserver/api/articles 401 (Unauthorized) .   .   .   xhr.js?ec6c:178`
*** Error while fetching articles :: Error: Request failed with status code 401***`

Where GET ...myserver/api/articles 401 (Unauthorized) . . . xhr.js?ec6c:178 is a big red line!

How can I completely clean up the console?

from vuex-crud.

@martinhbramwell I think those errors comes from default server logging see: axios/axios#599

I am really not sure if we can do anything about it. 🤔

from vuex-crud.

Also: https://stackoverflow.com/questions/41515732/hide-401-console-error-in-chrome-dev-tools-getting-401-on-fetch-call

from vuex-crud.

Right! Understood. Thanks for looking into it and thanks for clarifying.

from vuex-crud.