// ErrorBoundary.vue
import { ref, onErrorCaptured, h } from 'vue';

export default {
  name: 'ErrorBoundary',
  setup(_, { slots }) {
    const error = ref(null);

    onErrorCaptured((err, instance, info) => {
      console.error("Caught an error!", err, info, instance);
      error.value = err;
      // Return false to stop the error from propagating further up the tree
      // or true to allow propagation to other error boundaries.
      return true;
    });

    return () => {
      if (error.value) {
        return h('div', { style: 'color: red; border: 1px solid red; padding: 10px;' }, [
          h('h3', 'Something went wrong!'),
          h('p', error.value.message),
          h('button', { onClick: () => error.value = null }, 'Reset Error'),
        ]);
      }
      return slots.default ? slots.default() : h('span', 'No content provided for ErrorBoundary');
    };
  },
};

// Usage in Parent Component
/*
<template>
  <ErrorBoundary>
    <MyComponentThatMightFail />
  </ErrorBoundary>
</template>
<script setup>
import ErrorBoundary from './ErrorBoundary.vue';
// Define MyComponentThatMightFail.vue to test it:
// <template>
//   <button @click="throwError">Click to throw error</button>
//   <p v-if="shouldFail">{{ data.nonExistentProperty.value }}</p>
// </template>
// <script setup>
// import { ref } from 'vue';
// const shouldFail = ref(false);
// const throwError = () => {
//   throw new Error("This is a simulated component error!");
//   // Or cause a runtime error by accessing undefined property
//   // shouldFail.value = true;
// };
// </script>
//
import MyComponentThatMightFail from './MyComponentThatMightFail.vue';
</script>
*/