feat(core): Add React ErrorBoundary component + theme default boundaries (#3104)

Co-authored-by: Paden Clayton <paden.clayton@monkedia.com>
Co-authored-by: Josh-Cena <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Paden Clayton 2021-11-04 10:07:32 -05:00 committed by GitHub
parent 4922764095
commit fa6d15b35f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 317 additions and 11 deletions

View file

@ -8,6 +8,55 @@ Docusaurus provides some APIs on the clients that can be helpful to you when bui
## Components {#components}
### `<ErrorBoundary />` {#errorboundary}
This component creates a [React error boundary](https://reactjs.org/docs/error-boundaries.html).
Use it to wrap components that might throw, and display a fallback when that happens instead of crashing the whole app.
```jsx
import React from 'react';
import ErrorBoundary from '@docusaurus/ErrorBoundary';
const SafeComponent = () => (
<ErrorBoundary
fallback={({error, tryAgain}) => (
<div>
<p>This component crashed because of error: {error.message}.</p>
<button onClick={tryAgain}>Try Again!</button>
</div>
)}>
<SomeDangerousComponentThatMayThrow />
</ErrorBoundary>
);
```
```mdx-code-block
import ErrorBoundaryTestButton from "@site/src/components/ErrorBoundaryTestButton"
```
:::tip
To see it in action, click here: <ErrorBoundaryTestButton/>
:::
:::info
Docusaurus uses this component to catch errors within the theme's layout, and also within the entire app.
:::
:::note
This component doesn't catch build-time errors, and only protects against client-side render errors that can happen when using stateful React components.
:::
#### Props {#errorboundary-props}
- `fallback`: an optional callback returning a JSX element. It will receive two props: `error`, the error that was caught, and `tryAgain`, a function (`() => void`) callback to reset the error in the component and try rendering it again.
### `<Head/>` {#head}
This reusable React component will manage all of your changes to the document head. It takes plain HTML tags and outputs plain HTML tags and is beginner-friendly. It is a wrapper around [React Helmet](https://github.com/nfl/react-helmet).