Skip to content

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

License

Notifications You must be signed in to change notification settings

dillonchanis/vue-error-boundary

Repository files navigation

vue-error-boundary

NPM version

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

The ErrorBoundary component is based on React's example component.

Requires Vue3

Install

yarn add vue-error-boundary

npm i vue-error-boundary --save

Usage

To use this component simply wrap any other component which may throw an Error. Errors thrown in child components will automatically bubble up to the VErrorBoundary component.

<VErrorBoundary>
  <ImUnstable />
</VErrorBoundary>

If you are using it inside a v-for, ensure to set the stop-propagation prop on your VErrorBoundary component.

<div v-for="...">
  <VErrorBoundary stop-propagation>
    ...
  </VErrorBoundary>
</div>

Props

Attribute Description Type Required Default
fall-back Fallback component to render in case of error. Component false DefaultFallback
on-error Callback function to perform on error. Function false null
params Props to pass to your fall back component. Object false {}
stop-propagation Stop propagation of errors to other errorCaptured hooks. boolean false false

Scoped Slots

Property Description Type
error The error Error
hasError Whether an error occurred. boolean
info Information on where the error was captured string

How to Use

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.

Basic Example

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

<script>
import ProductErrorCard from '...'

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

With Props

You can pass props to your fallback component through the params prop. params expects an object containing the data you wish to pass.

<template>
  <ul class="contact-list">
    <template v-for="contact in contacts">
      <VErrorBoundary :key="contact.id" 
                      :fall-back="fallBack" 
                      :params="{ id: contact.id }">
        <app-contact :contact="contact" />
      </VErrorBoundary>
    </template>
  </ul>
</template>

<script>
import MyCustomFallbackComponent from '...'

export default {
  data: () => ({
    fallBack: MyCustomFallbackComponent,
    contacts: [...]
  })
}
</script>

Then in your custom fallback component:

<template>
  <div>
    Could not render - {{ id }}
  </div>
</template>

<script>
export default {
  props: ['id'],
}
</script>

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

Scoped Slots

If you do not wish to use a fallback component you can alternatively utilize scoped slots to present data in your current template.

Basic Example

<VErrorBoundary>
  <template #boundary="{ hasError }">
    <div v-if="!hasError">No error occurred.</div>
    <div v-else>Message to appear if error occurred.</div>
  </template>
</VErrorBoundary>

Events

Callbacks via on-error

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

<template>
  <VErrorBoundary :on-error="handleError">...</VErrorBoundary>
<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.

<template>
  <VErrorBoundary @error-captured="handleError">...</VErrorBoundary>
</template>

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

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.

<VErrorBoundary stop-propagation>
  ...
</VErrorBoundary>

Contributors

wallyjue

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published