From 4890bbf50941b4c651686ccefffa640f01954975 Mon Sep 17 00:00:00 2001
From: Sofiane Abou Abderrahim <sofianeabouabderrahim@gmail.com>
Date: Sat, 13 Apr 2024 14:33:56 +0100
Subject: [PATCH] 6. Introducing Error Boundaries

---
 README.md                       | 11 +++++++++++
 src/components/ErrorBoundary.js | 23 +++++++++++++++++++++++
 src/components/UserFinder.js    |  5 ++++-
 src/components/Users.js         | 12 ++++++++++++
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ErrorBoundary.js

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 `<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()`
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 <p>Something went wrong!</p>;
+    }
+
+    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 {
         <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>
     );
   }
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 => {