A reusable error boundary component for catching JavaScript errors and displaying fallback UIs.
npm install 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
``bash
yarn add vue-error-boundary
npm i vue-error-boundary --save
`
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.
`html`
If you are using it inside a v-for, ensure to set the stop-propagation prop on your VErrorBoundary component.
`html`
...
| Attribute | Description | Type | Required | Default |
|------------------|--------------|------|----------|---------|
| fall-back | Fallback component to render in case of error. | Component | false | DefaultFallback |Function
| on-error | Callback function to perform on error. | | false | null |Object
| params | Props to pass to your fall back component. | | false | {} |errorCaptured
| stop-propagation | Stop propagation of errors to other hooks. | boolean | false | false |
| Property | Description | Type |
|----------|-------------|---------|
| error | The error | Error |boolean
| hasError | Whether an error occurred. | |string
| info | Information on where the error was captured | |
We can provide a fallback UI to display via the fall-back prop. It simply takes a Vue component to render.
#### Basic Example
`html
`
#### 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.
`html
:params="{ id: contact.id }">
`
Then in your custom fallback component:
`html
Could not render - {{ id }}
`
Furthermore, we can directly access the contents of the VErrorBoundary component's errorCaptured hook either through a callback or Vue's emit.
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
`html`
No error occurred.
Message to appear if error occurred.
The VErrorBoundary can receive a callback function through the on-error prop.
`html
`
The callback function will receive the same parameters as the errorCaptured method.
We can also listen to a Vue event via an errorCaptured event.
`html
`
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.
`html``
...