vue-error-boundary

A reusable error boundary component for catching JavaScript errors and displaying fallback UIs.

The ErrorBoundary component is based on React's example component featuring a new component hook in React 16 called componentDidCatch.

Fortunately, in Vue 2.5.0+ we have access to something similar with errorCaptured. For more information on this hook refer to the API here.

Install

yarn add vue-error-boundary

npm i vue-error-boundary

For UMD build check out the latest Unpkg link here.

Usage

To use this component simply wrap any other component which may throw an Error.

<ErrorBoundary>
  <ImUnstable />
</ErrorBoundary>

Errors thrown in child components will automatically bubble up to the ErrorBoundary component.

Fallback UI via fall-back

We can provide a fallback UI to display via the fall-back prop. It simply takes a Vue component to render.

<template>
  <ErrorBoundary :fall-back="productError">
    <ProductCard ... />
  </ErrorBoundary>
</template>

<script>
import ProductErrorCard from '...'

export default {
  // ...
  data () {
    return {
      productError: ProductErrorCard
    }
  }
}
</script>

Furthermore, we can directly access the contents of the ErrorBoundary component's errorCaptured hook either throw a callback or Vue's emit.

Callbacks via on-error

The ErrorBoundary can receive a callback function through the on-error prop.

<template>
  <ErrorBoundary :on-error="handleError">...</ErrorBoundary>
<template>

<script>
// ...
methods: {
  handleError (err, vm, info) {
    // do something
  }
}
// ...
</script>

@errorCaptured event

The callback function will receive the same parameters as the errorCaptured method.

We can also listen to a Vue event via an errorCaptured event. This will send the same parameters as above as the event payload.

<ErrorBoundary @errorCaptured="...">

Stop Propagation

The errorCaptured hook will continue to propagate errors up the component tree unless it returns false. Doing so will stop any additional errorCaptured hooks to execute and the global errorHandler from being invoked for the error. To do this we can use the stop-propagation prop.

<error-boundary stop-propagation>
  ...
</error-boundary>