Error boundaries with onErrorCaptured in Vue - Performance & Optimization

Performance: Error boundaries with onErrorCaptured

MEDIUM IMPACT

This concept affects the rendering stability and responsiveness by catching errors in component trees without crashing the whole app.

Handling runtime errors in Vue components to avoid app crashes

Vue

import { defineComponent, onErrorCaptured } from 'vue';

const ErrorChild = defineComponent({
  setup() {
    throw new Error('Oops!');
  },
  template: `<div>Child</div>`
});

export default defineComponent({
  components: { ErrorChild },
  setup() {
    onErrorCaptured((err, instance, info) => {
      console.error('Captured error:', err);
      return false; // prevent further propagation
    });
  },
  template: `<div>Test with error boundary <ErrorChild /></div>`
});

Catches errors locally, prevents app crash, and allows fallback UI or graceful degradation.

📈 Performance GainAvoids full app re-render or crash, improving INP and user experience.

Handling runtime errors in Vue components to avoid app crashes

Vue

const MyComponent = {
  setup() {
    // No error boundary
    throw new Error('Oops!');
  },
  template: `<div>Test</div>`
}

Without error boundaries, any error crashes the entire Vue app, causing a blank screen and poor user experience.

📉 Performance CostBlocks rendering completely on error, causing poor INP and user frustration.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No error boundary	Full tree re-render on error	Multiple reflows if error causes remount	High paint cost due to full blank screen	[X] Bad
Using onErrorCaptured	Error caught locally, limited re-render	Single reflow for fallback UI	Low paint cost, stable UI	[OK] Good

Rendering Pipeline

When an error occurs in a component, onErrorCaptured intercepts it during the rendering phase, preventing the error from propagating and crashing the app. This allows Vue to continue rendering other components or show fallback UI.

→Render

→Commit

→Error Handling

⚠️ BottleneckError handling logic adds slight overhead during render but prevents costly full re-renders or crashes.

Core Web Vital Affected

INP

This concept affects the rendering stability and responsiveness by catching errors in component trees without crashing the whole app.

Optimization Tips

1Use onErrorCaptured to catch errors locally and prevent full app crashes.

2Keep error handling logic lightweight to avoid slowing rendering.

3Test error boundaries with DevTools Performance panel to ensure minimal impact.

Performance Quiz - 3 Questions

What is the main performance benefit of using onErrorCaptured in Vue?

A Prevents full app crash and reduces re-rendering on errors

B Improves initial page load speed

C Reduces CSS paint cost

D Eliminates all JavaScript errors

DevTools: Performance

How to check: Record a session causing a component error, then inspect the flame chart for re-render and error handling duration.

What to look for: Look for reduced full app re-renders and stable frame times indicating error boundaries prevent crashes.