VeBoundary
Simple and convenient Vue error boundary.
The idea comes from[react-error-boundary](https://github.com/bvaughn/react-error-boundary), catch
errors thrown by subcomponents and provide a UI for fallback slot when the error is displayed.
# Features
- 🔗 easy, out of the box.
- 🔧 support devtools.
- 🔑 type safe.
- 🔨 unit testing.
# Catalogue
- [Installation](#install)
- [Usage](#usage)
- [Slot Scope](#slot-scope)
- [Emit](#emit)
- [Props](#props)
- [propagation](#propagation)
- [include & exclude](#include-exclude)
- [keepEmit](#keepemit)
- [Suspense](#suspense)
- [useBoundary](#useboundary)
- [Devtools](#Devtools)
- [LICENSE](#license)
# Install
Install plugins into dependencies, you can use which you like package manager.
```
pnpm add veboundary
```
# Usage
```vue
```
## Slot Scope
if you want to get error information, you can get it through slot scope. the slot scope provides two
variables, one of `error:Error`. one of `reset:() = > void`;
`reset` rerenders the default slot, and you can provide a button in the fallback component to try to
rerender
```vue
```
## Emit
If you want a more detailed error report, you can get it from emit.
```vue
```
## Props
### propagation
`Veboundary` captures errors through `onErrorCaptured`. If you also use `onErrorCaptured` in the
parent component, errors will not be captured. If you want to capture errors in the parent
component, you can pass in the `propagation` prop.
**TIPS: If exclude is true, the `onErrorCaptured` of the parent component must catch errors, even if
`false` is passed in from the `propagation`.About exclude, we will mention it later.**
```vue
```
### include-exclude
If you only want to catch some errors, you can pass in `include:string[] | RegExp` or
`exclude:string[] | RegExp` props.
**TIPS: If include or exclude is of type string[], will match error.message and error.name, if
include or exclude is of type RegExp, only match error.message**
```vue
```
### keepEmit
If exclude is true, `errorCaptured` emit will not be triggered. If you want to trigger emit when
exclude is true, you can pass in `keepEmit`.
```vue
```
## Suspense
You can view the examples used with suspense+vue-query in the
[codesandbox](https://codesandbox.io/s/pcmg9e)
## useBoundary
It is not necessary to obtain reset and error through props,more convenient to use hook.
```ts
const {error, reset} = useBoundary();
console.log(error?.message, error?.name);
...
```
# Devtools
Support Vue devtools.You can view the error information and other contents in the developer tool.
You can add an `id` to the component for marking. If no `id` is passed in, VeBoundary will
automatically generate an id as a mark.Be careful not to duplicate `id`, data with the same `id`
will be overwritten.
# LICENSE
MIT