Skip to content

Make error boundary doc more in style with the post #213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 27, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 19 additions & 12 deletions content/docs/error-boundaries.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@ Error boundaries are React components that **catch JavaScript errors anywhere in

> Note
>
> Error boundaries do **NOT** work in the following scenarios:
> * Event Handlers (See below ["How About Try / Catch"](#how-about-trycatch) for details about dealing with errors in event handlers)
> Error boundaries do **not** catch errors for:
>
> * Event handlers ([learn more](#how-about-event-handlers))
> * Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks)
> * Server Side Rendering
> * Server side rendering
> * Errors thrown in the error boundary itself (rather than its children)

A class component becomes an error boundary if it defines a new lifecycle method called `componentDidCatch(error, info)`:

Expand Down Expand Up @@ -136,37 +138,42 @@ However, React components are declarative and specify *what* should be rendered:

Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate` hook caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.

However, an event handler inside of a React component could leverage `try` / `catch` to deal with errors that occur during event handling.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sounded a bit like an ad for try/catch :-)

## How About Event Handlers?

Error boundaries **do not** catch errors inside event handlers.

React doesn't need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle hooks, the event handlers don't happen during rendering. So if they throw, React still knows what to display on the screen.

If you need to catch an error inside event handler, use the regular JavaScript `try` / `catch` statement:

```js{8-12,16-19}
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { error: null }
this.state = { error: null };
}

handleClick = () => {
try {
// event handling that could possibly produces an error
} catch(error) {
this.setState({ error })
// Do something that could throw
} catch (error) {
this.setState({ error });
}
}

render() {
if (this.state.error) {
// render a fallback UI
return <h1>The Click Handler Produces an Error</h1>
return <h1>Caught an error.</h1>
}
// ...
return <div onClick={this.handleClick}>Click Me</div>
}
}
```

Note that the above example is demonstrating regular JavaScript behavior and doesn't use error boundaries.

## Naming Changes from React 15

React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch` in your code starting from the first 16 beta release.

For this change, we’ve provided a [codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.
For this change, we’ve provided a [codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.