6. Introducing Error Boundaries

README.md

@@ -53,3 +53,14 @@
 2. use context with the first approach: the context `Consumer` component by adding `<UsersContext.Consumer>` 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 `<ErrorBoundary>` component around the `<Users>` component
+8. cacth the error with `componentDidCatch()`

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 <p>Something went wrong!</p>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

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 {
         <div className={classes.finder}>
           <input type="search" onChange={this.searchChangeHandler.bind(this)} />
         </div>
-        <Users users={this.state.filteredUsers} />
+        <ErrorBoundary>
+          <Users users={this.state.filteredUsers} />
+        </ErrorBoundary>
       </Fragment>
     );
   }

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 => {