Hi, i came across this component when looking into error handling in vue. I followed the documentations to setup a project and test its functionality and I believe that the component no longer works.

Please see this CodeSanbox

And this StackOverflow for further information

Hi, does this work with Vue 3? Is the support for Vue 3 planned?

I had a look at the code. I haven't actually run it, but I see 4 things that might break this component if tried with Vue 3:

1. The component uses the createElement (aka h) function from render callback

   // Vue component options
   {
     name: 'MyComponent'
     ...
     render(h) {
       ...
       return h(...)
     }
   }
   

   whereas Vue 3 compatible way is to import it from vue (see docs)

   import { h } from 'vue';
   
   // Vue component options
   {
     name: 'MyComponent'
     ...
     render() {
       ...
       return h(...)
     }
   }
   

2. The component uses $scopedSlots, which are merged to slots in Vue 3 (see docs).

3. Custom events emitted. To make it in line with Vue 3, the custom event errorCaptured should be documented in emits Vue component option (see docs).

4. VNode interaction. Don't know if the VNode API has changed in a way that could affect package, but it should be tested.

Totally forgot I left in this.$slots.default[0]. Might want the ability to wrap multiple components at once so we'll want to render all of them. May need to delegate this to a functional component so we can return multiple root elements.

when im trying to use it I get "Cannot read properties of null (reading 'setupContext')"

<vue-error-boundary :fall-back="null"></vue-error-boundary>

import VueErrorBoundary from 'vue-error-boundary';

This package is not available to those using strict compilation settings or linting standards. It's not due to a bug in the package itself, but the lack of a definitions file.

Hey there.

I had need of an ErrorBoundary on my project, but am trying to stay inside TypeScript. With the release of the Composition UI, it's a little more possible. I had a go at creating a version of what you've done using it. Thought you might care to use it as a starting point if you begin supporting it or TS:

https://gist.github.com/lancegliser/9a4d22dbab2113a45d5ddb04f5825071

The relevant bit is:

import {
  createComponent,
  createElement,
  onErrorCaptured,
  reactive,
  SetupContext
} from "@vue/composition-api";
import DefaultFallbackUI from "./ErrorBoundaryFallbackUI.vue";
import { IErrorBoundaryState } from "@/components/errorBoundary/IErrorBoundary";
import { Vue as VueType } from "vue/types/vue";
import { VNode } from "vue";

const isObjectEmpty = (obj: Object) =>
  Object.entries(obj).length === 0 && obj.constructor === Object;
// https://github.com/posva/vue-promised/blob/master/src/index.js
const convertVNodeArray = (h: Function, wrapperTag: string, nodes: VNode[]) => {
  // for arrays and single text nodes
  if (nodes.length > 1 || !nodes[0].tag) return h(wrapperTag, {}, nodes);
  return nodes[0];
};

interface IProps {
  stopPropagation: boolean;
  fallBack: Object;
  onError: Function;
  tag: string;
}

const defaultOnErrorFallback = () => {};
const ErrorBoundary = createComponent<IProps>({
  name: "ErrorBoundary",
  props: {
    stopPropagation: {
      type: Boolean,
      default: false
    },
    fallBack: {
      type: Object,
      default: () => DefaultFallbackUI
    },
    onError: {
      type: Function,
      default: defaultOnErrorFallback
    },
    tag: {
      type: String,
      default: "div"
    }
  },
  setup(props: IProps, context: SetupContext): () => VNode | null {
    const { state } = useState(props);
    return (): VNode | null => {
      const fallback = createElement(props.fallBack, {
        props: { state }
      });
      if (state.error) {
        return Array.isArray(fallback)
          ? convertVNodeArray(createElement, props.tag, fallback)
          : fallback;
      }
      if (isObjectEmpty(context.slots)) {
        console.warn("ErrorBoundary component must have child components.");
        return null;
      }
      const contents = context.slots.default();
      return Array.isArray(contents)
        ? convertVNodeArray(createElement, props.tag, contents)
        : contents;
    };
  }
});
export default ErrorBoundary;
function useState(props: IProps) {
  const state = reactive({
    error: undefined
  } as IErrorBoundaryState);
  onErrorCaptured((error: Error, vm: VueType, info: string = "") => {
    state.error = error;
    props.onError(error, vm, info);
    if (props.stopPropagation) {
      return false;
    }
  });
  return { state };
}

This is a really nice component, thanks! It would be nice not to have to create a whole component just for a bit of fallback text/html. Is it possible to just have a slot for the fallback?