From 0675572f8b832f758c800eadfca3720ed3e36370 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 21 Sep 2023 07:11:33 +0600
Subject: [PATCH] wip: add error boundary example

---
 .../react/content/error-boundaries.md         | 37 +++++++++++++++++++
 src/data/question-groups/react/react.md       |  5 +--
 2 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/data/question-groups/react/content/error-boundaries.md

diff --git a/src/data/question-groups/react/content/error-boundaries.md b/src/data/question-groups/react/content/error-boundaries.md
new file mode 100644
index 000000000..1f5c46ee4
--- /dev/null
+++ b/src/data/question-groups/react/content/error-boundaries.md
@@ -0,0 +1,37 @@
+Error boundaries are special React components that catch JavaScript errors during rendering, in lifecycle methods, and during the constructor of whole tree below them. They are used to handle errors gracefully by displaying a fallback UI and preventing the entire application from crashing due to unhandled errors.
+
+You can use [react-error-boundary](https://npm.im/react-error-boundary) package to create error boundaries in your application. It provides a `ErrorBoundary` component that you can wrap around any component that might throw an error. The `ErrorBoundary` component takes a `FallbackComponent` prop that is used to render a fallback UI when an error occurs.
+
+## Capturing Errors
+
+```js
+import { ErrorBoundary } from 'react-error-boundary';
+import { FetchData } from './FetchData';
+
+function ErrorFallback({ error, resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <FetchData />
+    </ErrorBoundary>
+  );
+}
+```
+
+This `FetchData` component will throw an error when it is rendered, and the `ErrorBoundary` component will catch the error and display the `ErrorFallback` component.
+
+```js
+export function FetchData() {
+  throw new Error('Error fetching data');
+  return <p>This will never render</p>;
+}
+```
diff --git a/src/data/question-groups/react/react.md b/src/data/question-groups/react/react.md
index 3e644f017..3bbbce882 100644
--- a/src/data/question-groups/react/react.md
+++ b/src/data/question-groups/react/react.md
@@ -169,8 +169,7 @@ questions:
       - 'Performance'
       - 'Intermediate'
   - question: Explain the concept of error boundaries in React.
-    answer: |
-      Error boundaries are special React components that catch JavaScript errors during rendering, in lifecycle methods, and during the constructor of whole tree below them. They are used to handle errors gracefully by displaying a fallback UI and preventing the entire application from crashing due to unhandled errors.
+    answer: error-boundaries.md
     topics:
       - 'Core'
       - 'Advanced'
@@ -290,7 +289,7 @@ questions:
     topics:
       - 'Core'
       - 'Intermediate'
-  - question: What is Hydration?
+  - question: What is Hydration in React?
     answer: |
       Hydration is the process of using client-side JavaScript to add interactivity to the markup generated by the server. When you use server-side rendering, the server returns a static HTML representation of the component tree. Once this reaches the browser, in order to make it interactive, React "hydrates" the static content, turning it into a fully interactive application.
     topics: