Global way to handle errors and display them




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.

The idea is that I just display sub components within the AppLayout component and if they cause any errors then they will call a global errHandler defined in main.js which will call an action to set the err state in the store. This should then result in the ErrorDisplay component being shown, and when the user clicks OK in that it will set the err state to null, therefore hiding the ErrorDisplay.

That is one approach. If anyone has better approaches, please let me know.

However, I am having probably getting this to work.

To test it, I tried throwing an error in a sub component when I click the submit button. However, it seems that there is a known bug in Vue and thrown errors are not caught by any of the error handlers.

In my Main.js I have

handlers for window.orerror, window.addEventListner, Vue.config.errorhandler, Vue.config.warnhandler

All of these log the error to the console and then call the errHandler function defined in main.js as mentioned above.

Instead of throwing an error I tried modifying an axios call so that it called an invalid end point. However, instead of the error being caught, I instead find that 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.

In window.addEventLister(‘unhandledException’ , function(event), I just call errHandler with
new Error(event.reason). I am not sure if this is correct. I am somewhat confused by this apparently having a function as a parameter. How should I handle that? For the moment, I have worked around it using event.preventDefault();

Are there any good approaches to global error handling in Vue? A lot of the examples I have seen just do a console log which is no use. We need to be able to display the error to the user.

I have tried ErrorBoundaries but I encountered similar problems.

Any help or advice would be appreciated.


Paul Simon