mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-02 16:29:47 +02:00
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:
parent
4922764095
commit
fa6d15b35f
34 changed files with 317 additions and 11 deletions
|
@ -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).
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue