You should monitor your errors in production. Vue, therefore, provides the errorHandler for uncaught errors during component render function and watchers. The handler gets called with the error and the application instance.
1/**
2 * Handles Vue errors
3 * @param err - the error trace
4 * @param vm - VM component
5 * @param info - Vue-specific error info, e.g. which lifecycle hook the error was found in
6 */
7app.config.errorHandler = (err, vm, info) => {
8 // handle error
9}Error tracking services Sentry and Bugsnag provide official integrations for the errorHandler.
It's also possible to add the errorCaptured lifecycle hook to your component. It is called when an error from any descendent component is captured.
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Simple Expressions in Templates
Vue component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods.
Vue Tip: Use Teleport to Render a Component in a Different Place
With teleport, you can render a component in a different place in the DOM tree, even if this place is not in your app's scope.