JAVASCRIPT
Global Error Handling in Vue 3 Applications
Implement a centralized error reporting mechanism in Vue 3 using `app.config.errorHandler` to catch and manage errors across your entire application.
// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.config.errorHandler = (err, vm, info) => {
// `err`: error instance
// `vm`: the component instance where the error was thrown
// `info`: a string indicating the error source, e.g., 'render function', 'lifecycle hook'
console.error('Caught global error:', err);
console.error('Component instance:', vm);
console.error('Error info:', info);
// You can also send errors to an external error tracking service here
// For example: Sentry.captureException(err);
// Prevent the error from propagating further in the console in production
// if you've handled it adequately.
// This does not prevent the application from crashing if the error is unrecoverable.
};
app.mount('#app');
How it works: This snippet shows how to set up a global error handler for your Vue 3 application. By assigning a function to `app.config.errorHandler` in your `main.js` file, you can catch all unhandled errors that occur during component rendering, lifecycle hooks, event handlers, and watchers. This centralizes error logging, allowing you to report issues to monitoring services, display user-friendly messages, or perform other necessary recovery actions, significantly improving application robustness.