Implementing global error handling in Vue 3 with Composition API
I'm sure I'm missing something obvious here, but Working on a project where we're utilizing Vue 3's Composition API, I've been tasked with enhancing our error handling across the application. Currently, our setup lacks a consistent strategy for managing errors that arise during API calls, which leads to performance bottlenecks and a poor user experience. To tackle this, I've started implementing a global error handler that can catch errors from any component. I came across the `provide/inject` pattern, which seems promising for sharing the error handling logic across components. Here's a simplified version of what I've got so far: ```javascript import { createApp, reactive, provide, inject } from 'vue'; const errorStore = reactive({ errors: [] }); const ErrorHandler = createApp({ setup() { const addError = (error) => { errorStore.errors.push(error); }; provide('addError', addError); }, }); ErrorHandler.mount('#app'); ``` In my components, I've attempted to inject the `addError` method like this: ```javascript import { inject } from 'vue'; export default { setup() { const addError = inject('addError'); // Example API call fetch('/api/data') .then(response => response.json()) .catch(err => addError(err.message)); }, }; ``` However, I noticed that the error messages are not displayed anywhere in the UI, which makes me wonder if I should be rendering them directly in a parent component. I've tried creating a global error display component, but the errors don't seem to propagate correctly. The current approach is reactive but doesn’t provide feedback to the user. How do I ensure that the error messages collected in the `errorStore` can be displayed globally? Is there a recommended way to structure the components for effective error visualization? Also, should I consider using Vue Router's navigation guards for handling errors during route changes? Any insights would be greatly appreciated! Additionally, while researching, I found some libraries like `vue-notification` that can handle notifications more elegantly. Should I integrate such a library instead of building from scratch, or is it worth the effort to maintain our own solution? Looking forward to your recommendations! This is part of a larger CLI tool I'm building. I'd really appreciate any guidance on this. I'd really appreciate any guidance on this. For context: I'm using Javascript on Ubuntu. Any ideas what could be causing this?