{"id":534,"hash":"104653ad13dd7e7b2f23f308fe7152a7f87f3046471346849fdc4cba0f4c0c75","pattern":"Vue.js: Nuxt error handling","full_message":"Struggling a bit to set up error handling with vuex. There seems to be quite a few ways to do so and little documentation on proper error handling. I've been experimenting with four alternatives, though I haven't found a satisfying solution yet.\n\nAlternative 1 - Catching and processing errors on component\n\nin pages/login.vue:\n\nexport default {\n    methods: {\n        onLogin() {\n            this.$store.dispatch('auth/login', {\n                email: this.email,\n                password: this.password,\n            }).then(() => {\n                this.$router.push('/home');\n            }).catch((error) {\n                // handle error in component\n            });\n        },\n    },\n}\n\nin store/auth.js:\n\nexport const actions = {\n    login({ commit }, { email, password }) {\n        return this.$axios.post('/api/login', {\n            email,\n            password,\n        }).then((res) => {\n            doSomething(res);\n        });\n    },\n}\n\nPROS\n\nHmm.\n\nCONS\n\nErrors not handled and stored in vuex.\nIntroduces lots of boilerplate code in component methods.\n\nAlternative 2 - Catching and processing errors in vuex\n\nin pages/login.vue:\n\nexport default {\n    methods: {\n        onLogin() {\n            this.$store.dispatch('auth/login', {\n                email: this.email,\n                password: this.password,\n            }).then(() => {\n                this.$router.push('/home');\n            });\n        },\n    },\n}\n\nin store/auth.js:\n\nexport const actions = {\n    login({ commit }, { email, password }) {\n        return this.$axios.post('/api/login', {\n            email,\n            password,\n        }).then((res) => {\n            doSomething(res);\n        }).catch((error) => {\n            // store error in application state\n            commit('SET_ERROR', error);\n        });\n    },\n}\n\nPROS\n\nError object is accessible with vuex from any component\nCould use a reactive error component in layout, which is revealed when the error state changes.\n\nCONS\n\nI'm not sure if there is a way to track the source of the error, from which component it was thrown.\n\nAlternative 3 - Catching errors using axios interceptors\n\nin plugins/axios.js:\n\nexport default function({ $axios, store }) {\n    $axios.onError(error => {\n        store.dispatch('setError', error);\n    });\n}\n\nin pages/login.vue:\n\nexport default {\n    methods: {\n        onLogin() {\n            this.$store.dispatch('auth/login', {\n                email: this.email,\n                password: this.password,\n            }).then(() => {\n                this.$router.push('/home');\n            });\n        },\n    },\n}\n\nin store/auth.js:\n\nexport const actions = {\n    login({ commit }, { email, password }) {\n        return this.$axios.post('/api/login', {\n            email,\n            password,\n        }).then((res) => {\n            doSomething(res);\n        });\n    },\n}\n\nPROS\n\nGlobal error handling\nNo need to catch errors in either vuex or component\nNo boiler-plate code\n\nCONS\n\nAll exceptions are unhandled, meaning non-axios errors are uncaught.\n\nAlternative 4 - Custom error plugin\n\nI've been experimenting in implementing a custom plugin that catches all exceptions, but I'm not succeeding in making it work.\n\nin plugins/catch.js:\n\nexport default (ctx, inject) => {\n    const catchPlugin = function (func) {\n        return async function (args) {\n            try {\n                await func(args)\n            } catch (e) {\n                return console.error(e)\n            }\n        }\n    };\n    ctx.$catch = catchPlugin;\n    inject('catch', catchPlugin);\n}\n\nin pages/login.vue:\n\nexport default {\n    methods: {\n        onLogin: this.$catch(async function () {\n            await this.$store.dispatch('auth/login', { email: this.email, password: this.password });\n            this.$router.push('/home');\n        }),\n    },\n}\n\nPROS\n\nNo boilerplate.\nAll errors caught in plugin.\n\nCONS\n\nI cannot make it work. :(\n\nMy impression is that there is a lack of documentation on error handling in vue/nuxt. Could anyone get the fourth alternative to work? Would this be ideal? Any other alternatives? What is conventional?\n\nThank you for your time!","ecosystem":"npm","package_name":"vue.js","package_version":null,"solution":"The reason why option #4 is not working is because you're returning a function that never gets executed: \n\nfunction catchPlugin(outerFunction) {\n   return function async innerFunction(args) {\n     try {\n       const data = await outerFunction(args);\n       return { data } \n     } catch (error) {\n       return { error }\n     }\n   }\n}\n\nUsage: \n\nconst execute = catchPlugin((args) => {\n  // do something\n})\n\nexecute('myArgument');\n\nAs you can see you need to execute the inner function as well, to make your example work:\n\nonLogin: this.$catch(async function () {\n    await this.$store.dispatch('auth/login', { email: this.email, password: this.password });\n    this.$router.push('/home');\n})(), // mind the () :-)\n\nBut... I believe handling errors in components is not a bad thing, since this is tightly coupled to your view component. For instance, think about a login component, what we see these days is a global error handler (toastr) which will display a toast message if the username/password is incorrect. From my experience this is not the best behavior, it's a good starting point but better would be to add error messages close to the component displaying what exactly went wrong. Meaning you will always have to add error handling (UI related) in the component itself. \n\nWe're also struggling with this in our company with colleagues working on the same product. One is adding error handling, the other one is not.. The only solution, in my opinion, is to educate developers to always add proper error handling. The syntax with async/await is not that bad: \n\nmethods: {\n   async login (email, password) {\n      try {\n         await this.$store.dispatch('auth/login', { email, password })\n         // do something after login\n      } catch (error) {\n         // handle error\n      }\n   }\n}\n\nOne last thing about your con: Errors not handled and stored in vuex.. Why is this a con? Do you need to have the error globally available? What I see a lot is people putting so much useless state in vuex that's only used in the component itself. It's not bad to have local component state. Since it's about login, this error should only be known in the login component.","confidence":0.7000000000000001,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/51247371/vue-js-nuxt-error-handling","votes":48,"created_at":"2026-04-19T04:51:19.423447+00:00","updated_at":"2026-04-19T04:51:19.423447+00:00"}