what kind of errors does componentdidcatch catch

I have wrapped my main component like this:

class App extends React.Component {
render() {
return (


just wondering what sort of errors componentDidCatch catches? doesn't catch compilation errors, and when I changed this in my child component from

componentDidCatch

this.props.users.people.length to this.props.users.userslength it should showed my loading spinner for ages (in my child component there is a ternary operator, not sure if that's affecting it)

this.props.users.people.length

this.props.users.userslength

just wondering what sort of errors it catches and how i can fake the browser to see it working?

2 Answers
2

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

So it basically works like the .catch() of javascript, only that it catches errors while rendering a component, and that it cannot catch errors within itself.

.catch()

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

Check out their demo.

https://codepen.io/gaearon/pen/wqvxGa?editors=0010

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Be sure that you check for errors from child components and that they are caused during rendering and not inside of event handlers or some other asynchronous code. For that code you're still free to use just regular try/catch.

try/catch

Please read carefully the article on the official site about Error Boundaries

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.