To handle errors in Vue applications globally, you need to combine Vue built-in mechanisms and browser standard methods. 1. Use Vue.config.errorHandler to capture errors, record or report in component rendering or life cycle; 2. Listen to global JavaScript errors and unprocessed Promise rejections through window.addEventListener; 3. Set global error flags in Vuex or responsive states to show users friendly prompts; 4. Optionally send error logs to the server to facilitate tracking and fixing problems.

Handling errors globally in a Vue application is one of those things that can make your app feel more poisoned and robust, especially when unexpected issues pop up. Instead of letting errors crash your UI or confuse users, setting up global error handling gives you control over how they're caught and displayed.

Here's how to approach it in a practical way.

Use Vue.config.errorHandler for Component Errors

Vue provides a built-in way to catch errors that happen during component rendering or lifecycle hooks: errorHandler . This function lets you log errors or send them to your backend without the app crashing.

You can set it up in your main.js file like this:

 Vue.config.errorHandler = function (err, vm, info) {
  // err: the error object
  // vm: the Vue instance where the error occurred
  // info: additional Vue-specific error info (eg, "render function")

  console.error('Vue error:', err, info);
  // Optionally send to a logging service
}

This doesn't catch JavaScript syntax errors or errors outside of Vue (like in event handlers or setTimeout), but it's great for tracking Vue-related issues.

Handle Uncaught JavaScript Errors and Promises

For general JavaScript errors — like those not tied directly to Vue — you'll want to use standard browser mechanisms:

• Global error listener for uncaught exceptions:

   window.addEventListener('error', (event) => {
    console.error('Global error:', event.message);
    event.preventDefault(); // Prevent default error handling
  });

• Unhandled promise rejections :

   window.addEventListener('unhandledrejection', (event) => {
    console.warn('Unhandled promise rejection:', event.reason);
    event.preventDefault(); // Stops the browser from logging the warning
  });

These two listeners help catch errors that fall through the cracks — like API calls failing unexpectedly or third-party libraries throwing something weird.

Show Friendly Error Messages to Users

Logging errors is useful for developers, but users just need to know something went wrong — without seeing cryptic messages or a blank screen.

A simple way to handle this is by using a global error flag in your Vuex store or a reactive property if you're not using Vuex. When an error is caught, update the state and show a message on the screen.

For example:

• Set a globalError in your store.
• In your App.vue or layout component, watch for changes to globalError .
• Display a banner or modal with a friendly message like “Something went wrong. Please try again later.”

You can also reset the app or allow users to retry actions from there.

Some tips:

• Avoid technical jargon in user-facing messages.
• Include a button to reload or close the error UI.
• Don't forget to clear the error after showing it once.

Log Errors to a Service (Optional but Helpful)

If you're building a production app, consider sending errors to a logging service like Sentry, Bugsnag, or even your own backend endpoint.

It's usually as simple as adding a few lines:

 Vue.config.errorHandler = function (err, vm, info) {
  sendErrorToServer(err);
}

function sendErrorToServer(error) {
  fetch('/log-error', {
    method: 'POST',
    body: JSON.stringify({
      message: error.message,
      stack: error.stack,
      info: info,
      time: new Date()
    }),
    headers: { 'Content-Type': 'application/json' }
  });
}

This helps you spot patterns and fix issues before users even report them.

So yeah, setting up global error handling in Vue isn't too hard, but it does take a few pieces working together. Once it's in place, your app becomes more resilient and user-friendly — which makes everyone happier.

The above is the detailed content of Global Error Handling in a Vue Application. For more information, please follow other related articles on the PHP Chinese website!