A Better Way to Handle Errors (and Warnings)

You can provide a custom handler for errors and warnings in Vue:

// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

// Vue 2
Vue.config.errorHandler = (err) => {
  alert(err);
};

Bug tracking services like Bugsnag and Rollbar hook into these handlers to log errors, but you can also use them to handle errors more gracefully for a better UX.

For example, instead of the application just crashing if an error is unhandled, you can show a full page error screen and get the user to refresh or try something else.

In Vue 3 the error handler only works on template and watcher errors, but the Vue 2 error handler will catch almost everything. The warning handler in both versions only works in development.

I created a demo showing how this works. It uses Vue 3, but Vue 2 works nearly the same:

Error Handler Demo