Vue provides errorCaptured hooks and global error handlers to deal with application errors. 1. The errorCaptured hook can capture JavaScript errors in the child component tree, including errors in the life cycle hook and rendering function, receive error objects, error components and error location information, and can prevent errors from bubble upward by returning false. 2. Global error handling is configured through app.config.errorHandler, which is used to capture unexpected errors in the entire application, receive error objects, component instances and error type information. It is suitable for rendering functions, life cycle hooks, watcher callbacks and other scenarios, but does not automatically capture errors in event processing or asynchronous operations. 3. Asynchronous and event errors need to be handled manually, such as using .catch() or try/catch to wrap fetch calls or event logic, and can also be combined with window.onerror and window.onunhandledrejection as supplementary solutions.

Vue's error handling mechanism gives you ways to catch and respond to errors in your app, especially those that happen during rendering or in lifecycle hooks. It doesn't magically fix bugs, but it does help you log them, report them, or show fallback UIs when things go wrong.

errorCaptured Hook: Catching Errors from Child Components

The errorCaptured hook lets a component catch JavaScript errors from its child component tree — including errors thrown in lifecycle hooks and render functions.

This is super useful if you want to do something like logging the error, showing a fallback message, or even triggering some kind of recovery flow.

• It receives three arguments: the error object, the component that caused the error, and a string indicating where the error was captured (like 'render' , 'lifecycleHook' , etc.)
• You can return false from this hook to stop the error from propagating further up the parent chain

For example, imagine a parent component with several children. One of the children throws an error during mounted . The errorCaptured hook in the parent will trigger, letting you handle it gracefully instead of crashing the whole app.

One thing to note: this hook only catches errors in Vue-specific code — not general JavaScript errors outside of components.

Global Error Handler with app.config.errorHandler

If you want to handle errors at the app level, Vue 3 gives you app.config.errorHandler . This is your go-to for catching unexpected issues across the entire app.

You set it up when creating your Vue app:

 const app = createApp(App)

app.config.errorHandler = (err, instance, info) => {
  // Send error to a logging service
  console.error('Error:', err)
  console.info('Component:', instance)
  console.info('Where:', info)
}

• err : the actual error object
• instance : the component instance where the error occurred
• info : a Vue-specific error code (eg, "renderFn" or "lifecycleHook:create" )

This handler works for:

• Render function errors
• Lifecycle hook errors
• Watcher callbacks
• Setup functions and template expressions

But keep in mind: it won't catch regular JS errors like event handlers or async timeouts unless you wrap them manually.

Also, don't try to display error-boundary-like UIs directly inside this handler — it's more about logging/reporting than user-facing recovery.

Handling Async and Event Errors Separately

Vue's built-in error tools don't automatically catch errors in event handlers or async operations like setTimeout , fetch() calls, or promise chains.

So if you have something like:

 methods: {
  fetchData() {
    fetch('/api/data')
      .then(res => res.json())
      .catch(err => {
        // Need to handle it here!
      })
  }
}

…you'll need to add .catch() blocks yourself or use try/catch inside async/await .

Same goes for event listeners. If you're doing:

 <button @click="badFunction">Click me</button>

And badFunction throws an error, Vue won't send it to errorHandler or errorCaptured . So it's good practice to wrap such logic in try-catch or use global window.onerror / window.onunhandledrejection as backup layers.

That said, most Vue apps combine these strategies:

• Use errorCaptured for component-level fallbacks
• Set errorHandler for global logging
• Wrap external API calls and events with custom error handling

Basically that's it.

The above is the detailed content of How does Vue's error handling mechanism (e.g., errorCaptured hook, app.config.errorHandler) work?. For more information, please follow other related articles on the PHP Chinese website!