Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dillonchanis/vue-error-boundary
A reusable error boundary component for catching JavaScript errors and displaying fallback UIs.
https://github.com/dillonchanis/vue-error-boundary
error-handling frontend javascript vue
Last synced: 5 days ago
JSON representation
A reusable error boundary component for catching JavaScript errors and displaying fallback UIs.
- Host: GitHub
- URL: https://github.com/dillonchanis/vue-error-boundary
- Owner: dillonchanis
- License: mit
- Created: 2018-04-20T00:58:06.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-01-03T10:35:45.000Z (12 months ago)
- Last Synced: 2024-12-09T06:11:34.459Z (14 days ago)
- Topics: error-handling, frontend, javascript, vue
- Language: Vue
- Homepage:
- Size: 140 KB
- Stars: 92
- Watchers: 4
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-error-boundary
[](https://www.npmjs.com/package/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](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).
**Requires Vue3**
## Install
```bash
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.
```html
```
If you are using it inside a `v-for`, ensure to set the `stop-propagation` prop on your `VErrorBoundary` component.
```html
...
```
## 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
```html
import ProductErrorCard from '...'
export default {
// ...
data () {
return {
productError: ProductErrorCard
}
}
}
```
#### 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
import MyCustomFallbackComponent from '...'
export default {
data: () => ({
fallBack: MyCustomFallbackComponent,
contacts: [...]
})
}
```
Then in your custom fallback component:
```html
Could not render - {{ id }}
export default {
props: ['id'],
}
```
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
```html
```
## Events
### Callbacks via on-error
The `VErrorBoundary` can receive a callback function through the `on-error` prop.
```html
...
// ...
methods: {
handleError (err, vm, info) {
// do something
}
}
// ...
```
### @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.
```html
...
// ...
methods: {
handleError (err, vm, info) {
// do something
}
}
// ...
```
### 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.
```html
...
```
## Contributors
[wallyjue](https://github.com/wallyjue)