vue-error-boundary
v2.0.3
Published
A reusable error boundary component for catching JavaScript errors and displaying fallback UIs.
Downloads
4,974
Maintainers
Readme
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.
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>