Create a global "catcher" for errors in the UI

[kinow]

Describe exactly what you would like to see in an upcoming release

At the moment we have both promises and async code. Not all promises are being .catch()'ed, meaning the error is just being propagated until it appears in the console.

The async code has the try/catch pattern. And other promises have the setAlert or SET_ALERT action or mutation. But writing that over and over in separate components it a bit tedious. That's not something that can be easily fixed with mixins. HOC could work, but would require a common interface for views/components.

Additional context

This article has, among other good tips and examples, an ErrorBoundary component that could be useful as reference: https://michaelzanggl.com/articles/vue-cleaning-up-components/

It uses Vue's errorCaptured.

• https://vuejs.org/v2/api/#errorCaptured

That should work well with components. Not sure if that will work with views (maybe adding to Default.vue layout).

We could also deprecate the Alert model and associated code, if we are able to get something like BootstrapVue's toast.

Instead of using Vuex and requiring code to call the mutation/action, in BootstrapVue there's a global object to create toasts, which takes care to position the alerts.

That's simpler than having to import and map the action or mutation

to then call it

Plus the code for Alert.model.js and the Vuex code in src/store/index.js.

Pull requests welcome!

[kinow]

Spent a few minutes working on this, then found that instead of using an Alert component, it might be better to use a Snackbar. The Snackbar is the same component used by the ConnectionStatus component, that puts the red tooltip at the top of the screen when the WebSocket connection breaks.

Snackbars appear to be unique on the screen, without being able to be stacked yet, as in Buefy or BootstrapVue, see vuetifyjs/vuetify#2384

Also found that there are new releases of Vuetify, and we are using deprecated API. Better to update soon, rather than late, so that we don't end up with a broken UI due to an update after they remove the deprecated API.