Global Error Handling in Vue 3 Components with `onErrorCaptured`

// ErrorBoundary.vue
<template>
  <div class="error-boundary">
    <template v-if="hasError">
      <p>Something went wrong!</p>
      <details style="white-space: pre-wrap;">{{ error }}</details>
      <button @click="resetError">Try Again</button>
    </template>
    <template v-else>
      <slot></slot>
    </template>
  </div>
</template>

<script setup>
import { ref, onErrorCaptured } from 'vue';

const hasError = ref(false);
const error = ref(null);

onErrorCaptured((err, instance, info) => {
  hasError.value = true;
  error.value = err.message + '
' + info; // Log error details
  console.error('Captured error:', err, instance, info);
  // Return false to stop the error from propagating further up the component tree
  return false;
});

const resetError = () => {
  hasError.value = false;
  error.value = null;
};
</script>

<style scoped>
.error-boundary { border: 2px dashed red; padding: 15px; margin: 10px; background-color: #ffe0e0; }
</style>

// FaultyComponent.vue
<template>
  <div>
    <button @click="throwError">Trigger Error</button>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('');
const throwError = () => {
  message.value = 'About to explode...';
  setTimeout(() => {
    throw new Error('An intentional error occurred in FaultyComponent!');
  }, 100);
};
</script>

// App.vue
<template>
  <h1>App Root</h1>
  <ErrorBoundary>
    <FaultyComponent />
  </ErrorBoundary>
  <ErrorBoundary>
    <p>This is another section that won't be affected by errors in the above boundary.</p>
    <FaultyComponent />
  </ErrorBoundary>
  <p>Application continues here...</p>
</template>

<script setup>
import ErrorBoundary from './ErrorBoundary.vue';
import FaultyComponent from './FaultyComponent.vue';
</script>