Abfangen von Fehlern in der Komponentenhierarchie mit dem onErrorCaptured-Hook

import { ref, onErrorCaptured, defineComponent, h } from 'vue';
 
export const ErrorBoundary = defineComponent({
  name: 'ErrorBoundary',
  setup(_, { slots }) {
    const activeError = ref(null);
    const errorInfo = ref('');
 
    onErrorCaptured((err, instance, info) => {
      activeError.value = err instanceof Error ? err : new Error(String(err));
      errorInfo.value = info;
 
      // Return false to prevent the error from bubbling up to parent handlers
      return false;
    });
 
    const resetError = () => {
      activeError.value = null;
      errorInfo.value = '';
    };
 
    return () => {
      if (activeError.value) {
        return slots.fallback?.({
          error: activeError.value,
          info: errorInfo.value,
          reset: resetError
        }) ?? h('div', { class: 'error-banner' }, activeError.value.message);
      }
      return slots.default?.();
    };
  }
});