diff --git a/README.md b/README.md index 452271b..452e879 100644 --- a/README.md +++ b/README.md @@ -53,3 +53,14 @@ 2. use context with the first approach: the context `Consumer` component by adding `` in `UserFinder.js` 3. or use `static contextType` in `UserFinder.js` 4. now access the context with `this.context.users` instead of `DUMMY_USERS` + +## 6. Introducing Error Boundaries + +1. simulate a server error by throwing an error in the `componentDidUpdate` lifecycle method in `Users.js` +2. use `try` / `catch` to prevent the app from crashing +3. if you throw an error in a component and want to handle it in a parent component, build an error boundary +4. add a `ErrorBoundary.js` file +5. build a class-based component named `ErrorBoundary` +6. use the `componentDidCatch()` lifecycle method which is going to be triggered whenever a child component throws an error +7. in `UserFinder.js`, wrap the `` component around the `` component +8. cacth the error with `componentDidCatch()` diff --git a/src/components/ErrorBoundary.js b/src/components/ErrorBoundary.js new file mode 100644 index 0000000..cb21e31 --- /dev/null +++ b/src/components/ErrorBoundary.js @@ -0,0 +1,23 @@ +import { Component } from 'react'; + +class ErrorBoundary extends Component { + constructor() { + super(); + this.state = { hasError: false }; + } + + componentDidCatch(error) { + console.log(error); + this.setState({ hasError: true }); + } + + render() { + if (this.state.hasError) { + return

Something went wrong!

; + } + + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/src/components/UserFinder.js b/src/components/UserFinder.js index 2f1dbfd..475d7b2 100644 --- a/src/components/UserFinder.js +++ b/src/components/UserFinder.js @@ -3,6 +3,7 @@ import { Fragment, useState, useEffect, Component } from 'react'; import Users from './Users'; import classes from './UserFinder.module.css'; import UsersContext from '../store/users-context'; +import ErrorBoundary from './ErrorBoundary'; class UserFinder extends Component { static contextType = UsersContext; @@ -40,7 +41,9 @@ class UserFinder extends Component {
- + + + ); } diff --git a/src/components/Users.js b/src/components/Users.js index dc025af..8311461 100644 --- a/src/components/Users.js +++ b/src/components/Users.js @@ -11,6 +11,18 @@ class Users extends Component { }; } + componentDidUpdate() { + // try { + // someCodeWhichMightFail(); + // } catch (err) { + // // handle error + // } + + if (this.props.users.length === 0) { + throw new Error('No users provided!'); + } + } + toggleUsersHandler() { // this.state.showUsers = false; // NOT! this.setState(curState => {