From c257c44ebef84ecaf46f088990f3239f03ef81f5 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Wed, 11 Oct 2023 20:18:59 +0900
Subject: [PATCH 01/10] feat(react): add useErrorBoundaryFallbackProps

---
 README.md                                     |   4 +-
 packages/react/src/AsyncBoundary.en.mdx       |  24 +--
 packages/react/src/AsyncBoundary.ko.mdx       |  24 +--
 packages/react/src/ErrorBoundary.en.mdx       |  71 +++++---
 packages/react/src/ErrorBoundary.ko.mdx       |  71 +++++---
 packages/react/src/ErrorBoundary.spec.tsx     | 159 +++++++++++-------
 packages/react/src/ErrorBoundary.tsx          |  47 +++---
 packages/react/src/ErrorBoundaryGroup.en.mdx  |  22 +--
 packages/react/src/ErrorBoundaryGroup.ko.mdx  |  22 +--
 .../react/src/ErrorBoundaryGroup.spec.tsx     |  13 +-
 packages/react/src/ErrorBoundaryGroup.tsx     |   2 +-
 .../react/src/experimental/Await.spec.tsx     |   6 +-
 packages/react/src/index.ts                   |   2 +-
 packages/react/src/utils/assert.spec.ts       |   3 +-
 packages/react/src/utils/assert.ts            |  14 ++
 packages/react/src/utils/toTest.tsx           |   6 +-
 .../src/app/react/experimental/await/page.tsx |  14 +-
 .../src/components/RejectedFallback.tsx       |   9 +-
 18 files changed, 322 insertions(+), 191 deletions(-)

diff --git a/README.md b/README.md
index 79f61e756..bb473cf49 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,7 @@ import { Suspense, ErrorBoundary, ErrorBoundaryGroup, Delay } from '@suspensive/
 const Example = () => (
   <ErrorBoundaryGroup>
     <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>Reset All</Button>} />
-    <ErrorBoundary fallback={(caught) => <Button onClick={caught.reset}>Reset {caught.error.message}</Button>}>
+    <ErrorBoundary fallback={(props) => <Button onClick={props.reset}>Reset {props.error.message}</Button>}>
       <Suspense
         fallback={
           <Delay>
@@ -118,7 +118,7 @@ import { Suspense } from '@suspensive/react'
 import { QueryErrorBoundary, useSuspenseQuery } from '@suspensive/react-query'
 
 const Example = () => (
-  <QueryErrorBoundary fallback={(caught) => <Button onClick={caught.reset}>Reset {caught.error.message}</Button>}>
+  <QueryErrorBoundary fallback={(props) => <Button onClick={props.reset}>Reset {props.error.message}</Button>}>
     <Suspense fallback={<Spinner />}>
       <SuspendedComponent />
     </Suspense>
diff --git a/packages/react/src/AsyncBoundary.en.mdx b/packages/react/src/AsyncBoundary.en.mdx
index 6d3fc76fa..619fd5e2b 100644
--- a/packages/react/src/AsyncBoundary.en.mdx
+++ b/packages/react/src/AsyncBoundary.en.mdx
@@ -21,14 +21,14 @@ import { AsyncBoundary } from '@suspensive/react'
 const Example = () => (
   <AsyncBoundary
     pendingFallback={<Loading />}
-    rejectedFallback={(errorBoundary) => (
+    rejectedFallback={(props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     )}
     onReset={() => console.log('reset')}
-    onError={(error) => console.log(JSON.stringify(error))}
+    onError={(error) => console.log(error)}
   >
     <Children />
   </AsyncBoundary>
@@ -45,14 +45,14 @@ import { AsyncBoundary } from '@suspensive/react'
 const Example = () => (
   <AsyncBoundary.CSROnly
     pendingFallback={<Loading />}
-    rejectedFallback={(errorBoundary) => (
+    rejectedFallback={(props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     )}
     onReset={() => console.log('reset')}
-    onError={(error) => console.log(JSON.stringify(error))}
+    onError={(error) => console.log(error)}
   >
     <Children />
   </AsyncBoundary>
@@ -74,14 +74,14 @@ const Example = withAsyncBoundary(
   },
   {
     pendingFallback: <Loading />,
-    rejectedFallback: (errorBoundary) => (
+    rejectedFallback: (props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     ),
     onReset: () => console.log('reset'),
-    onError: (error) => console.log(JSON.stringify(error)),
+    onError: (error) => console.log(error),
   }
 )
 ```
diff --git a/packages/react/src/AsyncBoundary.ko.mdx b/packages/react/src/AsyncBoundary.ko.mdx
index 6a2dd7527..7865d6d46 100644
--- a/packages/react/src/AsyncBoundary.ko.mdx
+++ b/packages/react/src/AsyncBoundary.ko.mdx
@@ -23,14 +23,14 @@ import { AsyncBoundary } from '@suspensive/react'
 const Example = () => (
   <AsyncBoundary
     pendingFallback={<Loading />}
-    rejectedFallback={(errorBoundary) => (
+    rejectedFallback={(props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     )}
     onReset={() => console.log('reset')}
-    onError={(error) => console.log(JSON.stringify(error))}
+    onError={(error) => console.log(error)}
   >
     <Children />
   </AsyncBoundary>
@@ -47,14 +47,14 @@ import { AsyncBoundary } from '@suspensive/react'
 const Example = () => (
   <AsyncBoundary.CSROnly
     pendingFallback={<Loading />}
-    rejectedFallback={(errorBoundary) => (
+    rejectedFallback={(props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     )}
     onReset={() => console.log('reset')}
-    onError={(error) => console.log(JSON.stringify(error))}
+    onError={(error) => error)}
   >
     <Children />
   </AsyncBoundary>
@@ -76,14 +76,14 @@ const Example = withAsyncBoundary(
   },
   {
     pendingFallback: <Loading />,
-    rejectedFallback: (errorBoundary) => (
+    rejectedFallback: (props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     ),
     onReset: () => console.log('reset'),
-    onError: (error) => console.log(JSON.stringify(error)),
+    onError: (error) => console.log(error),
   }
 )
 ```
diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx
index c0c51e529..e7e9644b2 100644
--- a/packages/react/src/ErrorBoundary.en.mdx
+++ b/packages/react/src/ErrorBoundary.en.mdx
@@ -14,7 +14,14 @@ import { ErrorBoundary } from '@suspensive/react'
 import { useState, useEffect } from 'react'
 
 const Example = () => (
-  <ErrorBoundary fallback={({ error, reset }) => <button onClick={reset}>{JSON.stringify(error)}</button>}>
+  <ErrorBoundary
+    fallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+  >
     <ErrorAfter4s />
   </ErrorBoundary>
 )
@@ -41,6 +48,38 @@ const ErrorAfter4s = () => {
 
 ![Example banner](/gif/errorboundary-example.gif)
 
+:::tip
+
+## Use `<ErrorBoundary/>` fallback props without prop drilling
+
+### useErrorBoundaryFallbackProps
+
+In fallback of `<ErrorBoundary/>`, by calling useErrorBoundaryFallbackProps().reset/error, we can use error of `<ErrorBoundary/>` and reset it without using prop directly
+
+```tsx
+import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
+
+const Nested = () => {
+  const props = useErrorBoundaryFallbackProps()
+
+  return (
+    <>
+      <button onClick={props.reset} />
+      {props.error.message}
+    </>
+  )
+}
+
+const ErrorBoundaryFallback = () => <Nested />
+const Example = () => (
+  <ErrorBoundary fallback={ErrorBoundaryFallback}>
+    <Error />
+  </ErrorBoundary>
+)
+```
+
+:::
+
 ### props.resetKeys
 
 If you want to reset `<ErrorBoundary/>` by component where is outside of `<ErrorBoundary/>`'s fallback. Inject any resetKey in resetKeys. resetKeys work only when at least one element of array is changed. you don't need to worry about provide new array as resetKeys like how useEffect's dependency array work.
@@ -74,7 +113,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query'
 const Example = () => (
   <QueryErrorResetBoundary>
     {({ reset }) => (
-      <ErrorBoundary onReset={reset} fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+      <ErrorBoundary
+        onReset={reset}
+        fallback={(props) => (
+          <>
+            <button onClick={props.reset}>Try again</button>
+            {props.error.message}
+          </>
+        )}
+      >
         <Page />
       </ErrorBoundary>
     )}
@@ -108,25 +155,9 @@ useErrorBoundary is experimental feature, this interfaces could be changed
 
 :::
 
-We can reset `<ErrorBoundary/>` without props using useErrorBoundary.reset in ErrorBoundaryFallback.
-
-```tsx
-import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'
-
-const ErrorBoundaryFallback = () => {
-  const errorBoundary = useErrorBoundary()
-
-  return <button onClick={errorBoundary.reset} />
-}
-
-const Example = () => (
-  <ErrorBoundary fallback={ErrorBoundaryFallback}>
-    <Error />
-  </ErrorBoundary>
-)
-```
+### useErrorBoundary().setError
 
-In children of `<ErrorBoundary/>`, we can use useErrorBoundary.setError to make `<ErrorBoundary/>` aware of the Error without throw.
+In children of `<ErrorBoundary/>`, we can use useErrorBoundary().setError to make `<ErrorBoundary/>` aware of the Error without throw.
 
 ```tsx
 import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'
diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx
index dcc9f00c6..638c842c5 100644
--- a/packages/react/src/ErrorBoundary.ko.mdx
+++ b/packages/react/src/ErrorBoundary.ko.mdx
@@ -14,7 +14,14 @@ import { ErrorBoundary } from '@suspensive/react'
 import { useState, useEffect } from 'react'
 
 const Example = () => (
-  <ErrorBoundary fallback={({ error, reset }) => <button onClick={reset}>{JSON.stringify(error)}</button>}>
+  <ErrorBoundary
+    fallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+  >
     <ErrorAfter4s />
   </ErrorBoundary>
 )
@@ -41,6 +48,38 @@ const ErrorAfter4s = () => {
 
 ![Example banner](/gif/errorboundary-example.gif)
 
+:::tip
+
+## `<ErrorBoundary/>` fallback props을 prop drilling 없이 사용하기
+
+### useErrorBoundaryFallbackProps
+
+ErrorBoundaryFallback에서 useErrorBoundaryFallbackProps().reset/error을 사용해 prop을 직접사용하지 않고도 `<ErrorBoundary/>`을 reset하고 error를 사용할 수 있습니다.
+
+```tsx
+import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
+
+const Nested = () => {
+  const props = useErrorBoundaryFallbackProps()
+
+  return (
+    <>
+      <button onClick={props.reset} />
+      {props.error.message}
+    </>
+  )
+}
+
+const ErrorBoundaryFallback = () => <Nested />
+const Example = () => (
+  <ErrorBoundary fallback={ErrorBoundaryFallback}>
+    <Error />
+  </ErrorBoundary>
+)
+```
+
+:::
+
 ### props.resetKeys
 
 `<ErrorBoundary/>`의 fallback 외부에 있는 컴포넌트가 `<ErrorBoundary/>`를 reset하려면 resetKeys배열에 resetKey를 할당하면 됩니다. resetKeys는 배열의 하나 이상의 요소가 변경된 경우에만 작동합니다. useEffect의 종속성 배열이 작동하는 방식과 같이 resetKeys로 매 렌더링마다 새 배열을 주입하는 것을 걱정할 필요도 없습니다.
@@ -74,7 +113,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query'
 const Example = () => (
   <QueryErrorResetBoundary>
     {({ reset }) => (
-      <ErrorBoundary onReset={reset} fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+      <ErrorBoundary
+        onReset={reset}
+        fallback={(props) => (
+          <>
+            <button onClick={props.reset}>Try again</button>
+            {props.error.message}
+          </>
+        )}
+      >
         <Page />
       </ErrorBoundary>
     )}
@@ -108,25 +155,9 @@ useErrorBoundary는 실험 기능이므로 이 인터페이스는 변경될 수
 
 :::
 
-ErrorBoundaryFallback에서 useErrorBoundary.reset을 사용해 props 없이도 `<ErrorBoundary/>`을 reset할 수 있습니다.
-
-```tsx
-import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'
-
-const ErrorBoundaryFallback = () => {
-  const errorBoundary = useErrorBoundary()
-
-  return <button onClick={errorBoundary.reset} />
-}
-
-const Example = () => (
-  <ErrorBoundary fallback={ErrorBoundaryFallback}>
-    <Error />
-  </ErrorBoundary>
-)
-```
+### useErrorBoundary().setError
 
-`<ErrorBoundary/>`의 children에서 useErrorBoundary.setError을 사용해 throw 없이도 `<ErrorBoundary/>`에서 Error를 알도록 할 수 있습니다.
+`<ErrorBoundary/>`의 children에서 useErrorBoundary().setError을 사용해 throw 없이도 `<ErrorBoundary/>`에서 Error를 알도록 할 수 있습니다.
 
 ```tsx
 import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'
diff --git a/packages/react/src/ErrorBoundary.spec.tsx b/packages/react/src/ErrorBoundary.spec.tsx
index ac2e2cc92..08d959652 100644
--- a/packages/react/src/ErrorBoundary.spec.tsx
+++ b/packages/react/src/ErrorBoundary.spec.tsx
@@ -1,10 +1,11 @@
 import { act, render } from '@testing-library/react'
-import { ComponentProps, ComponentRef, createElement, createRef, useEffect } from 'react'
+import { ComponentProps, ComponentRef, createElement, createRef } from 'react'
 import { createRoot } from 'react-dom/client'
 import { vi } from 'vitest'
 import { useSetTimeout } from './hooks'
+import { assert } from './utils'
 import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, ThrowError, ThrowNull } from './utils/toTest'
-import { ErrorBoundary, useErrorBoundary, withErrorBoundary } from '.'
+import { ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps, withErrorBoundary } from '.'
 
 let container = document.createElement('div')
 let root = createRoot(container)
@@ -19,9 +20,7 @@ describe('<ErrorBoundary/>', () => {
 
   const renderErrorBoundary = (props: Partial<ComponentProps<typeof ErrorBoundary>>) =>
     act(() =>
-      root.render(
-        <ErrorBoundary ref={errorBoundaryRef} fallback={(caught) => <>{caught.error.message}</>} {...props} />
-      )
+      root.render(<ErrorBoundary ref={errorBoundaryRef} fallback={(props) => <>{props.error.message}</>} {...props} />)
     )
 
   it('should show children if no error but if error in children, catch it and show fallback and call onError', () => {
@@ -48,7 +47,7 @@ describe('<ErrorBoundary/>', () => {
   it('should show children if no error but if error in children, catch it and show fallback component', () => {
     vi.useFakeTimers()
     renderErrorBoundary({
-      fallback: (caught) => <>{caught.error.message}</>,
+      fallback: (props) => <>{props.error.message}</>,
       children: (
         <ThrowError message={ERROR_MESSAGE} after={MS_100}>
           {TEXT}
@@ -188,7 +187,7 @@ describe('withErrorBoundary', () => {
 
   it("should render the wrapped component when there's no error", () => {
     const WrappedComponent = withErrorBoundary(() => <>{TEXT}</>, {
-      fallback: (caught) => <>{caught.error.message}</>,
+      fallback: (props) => <>{props.error.message}</>,
     })
 
     act(() => root.render(<WrappedComponent />))
@@ -205,7 +204,7 @@ describe('withErrorBoundary', () => {
         </ThrowError>
       ),
       {
-        fallback: (caught) => <>{caught.error.message}</>,
+        fallback: (props) => <>{props.error.message}</>,
       }
     )
 
@@ -235,27 +234,82 @@ describe('useErrorBoundary', () => {
   })
   const renderErrorBoundary = (props: Partial<ComponentProps<typeof ErrorBoundary>>) =>
     act(() =>
-      root.render(
-        <ErrorBoundary ref={errorBoundaryRef} fallback={(caught) => <>{caught.error.message}</>} {...props} />
+      root.render(<ErrorBoundary ref={errorBoundaryRef} fallback={(props) => <>{props.error.message}</>} {...props} />)
+    )
+
+  it('should supply setError to set Error of ErrorBoundary manually', () => {
+    const onError = vi.fn()
+    vi.useFakeTimers()
+    renderErrorBoundary({
+      onError,
+      fallback: function ErrorBoundaryFallback() {
+        const props = useErrorBoundaryFallbackProps()
+        useSetTimeout(props.reset, MS_100)
+        return <>{props.error.message}</>
+      },
+      children: createElement(() => {
+        const errorBoundary = useErrorBoundary()
+        useSetTimeout(() => errorBoundary.setError(new Error(ERROR_MESSAGE)), MS_100)
+        return <>{TEXT}</>
+      }),
+    })
+    expect(container.textContent).toBe(TEXT)
+    expect(container.textContent).not.toBe(ERROR_MESSAGE)
+    expect(onError).toHaveBeenCalledTimes(0)
+    act(() => vi.advanceTimersByTime(MS_100))
+    expect(container.textContent).toBe(ERROR_MESSAGE)
+    expect(container.textContent).not.toBe(TEXT)
+    expect(onError).toHaveBeenCalledTimes(1)
+  })
+
+  it('should guarantee hook calling position is in children of ErrorBoundary', () => {
+    expect(
+      render(
+        <ErrorBoundary fallback={ERROR_MESSAGE}>
+          {createElement(() => {
+            useErrorBoundary()
+            return <>{TEXT}</>
+          })}
+        </ErrorBoundary>
+      ).getByText(TEXT)
+    ).toBeInTheDocument()
+
+    expect(() =>
+      render(
+        <ErrorBoundary
+          fallback={() => {
+            useErrorBoundary()
+            return <></>
+          }}
+        >
+          <ThrowError message={ERROR_MESSAGE} after={0} />
+        </ErrorBoundary>
       )
+    ).toThrow(assert.message.useErrorBoundary.onlyInChildrenOfErrorBoundary)
+  })
+})
+
+describe('useErrorBoundaryFallbackProps', () => {
+  beforeEach(() => {
+    container = document.createElement('div')
+    root = createRoot(container)
+    ThrowError.reset()
+  })
+  const renderErrorBoundary = (props: Partial<ComponentProps<typeof ErrorBoundary>>) =>
+    act(() =>
+      root.render(<ErrorBoundary ref={errorBoundaryRef} fallback={(props) => <>{props.error.message}</>} {...props} />)
     )
 
-  it('should supply reset function to reset in fallback of ErrorBoundary', () => {
+  it('should supply reset function and error to reset in fallback of ErrorBoundary', () => {
     const onReset = vi.fn()
     vi.useFakeTimers()
     renderErrorBoundary({
       onReset,
-      fallback: function ErrorBoundaryFallback({ error }) {
-        const errorBoundary = useErrorBoundary()
-
-        useEffect(() => {
-          const timeoutId = setTimeout(() => {
-            errorBoundary.reset()
-          }, MS_100)
-          return () => clearTimeout(timeoutId)
-        })
+      fallback: function ErrorBoundaryFallback() {
+        const props = useErrorBoundaryFallbackProps()
+        useSetTimeout(props.reset, MS_100)
 
-        return <>{error.message}</>
+        return <>{props.error.message}</>
       },
       children: (
         <ThrowError message={ERROR_MESSAGE} after={MS_100}>
@@ -276,49 +330,40 @@ describe('useErrorBoundary', () => {
     expect(onReset).toHaveBeenCalledTimes(1)
   })
 
-  it('should supply setError to set Error of ErrorBoundary manually', () => {
-    const onError = vi.fn()
-    vi.useFakeTimers()
-    renderErrorBoundary({
-      onError,
-      fallback: function ErrorBoundaryFallback({ error }) {
-        const errorBoundary = useErrorBoundary()
-        useSetTimeout(errorBoundary.reset, MS_100)
-        return <>{error.message}</>
-      },
-      children: createElement(() => {
-        const errorBoundary = useErrorBoundary()
-        useSetTimeout(() => errorBoundary.setError(new Error(ERROR_MESSAGE)), MS_100)
-        return <>{TEXT}</>
-      }),
-    })
-    expect(container.textContent).toBe(TEXT)
-    expect(container.textContent).not.toBe(ERROR_MESSAGE)
-    expect(onError).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
-    expect(container.textContent).toBe(ERROR_MESSAGE)
-    expect(container.textContent).not.toBe(TEXT)
-    expect(onError).toHaveBeenCalledTimes(1)
+  it('should guarantee hook calling position is in fallback of ErrorBoundary', () => {
+    expect(
+      render(
+        <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
+          {createElement(() => {
+            useErrorBoundaryFallbackProps()
+            return <>{TEXT}</>
+          })}
+        </ErrorBoundary>
+      ).getByText(assert.message.useErrorBoundaryFallbackProps.onlyInFallbackOfErrorBoundary)
+    ).toBeInTheDocument()
   })
 
-  it('should guarantee ErrorBoundary in parent', () => {
-    const rendered = render(
-      <ErrorBoundary fallback={ERROR_MESSAGE}>
-        {createElement(() => {
-          useErrorBoundary()
-          return <>{TEXT}</>
-        })}
-      </ErrorBoundary>
-    )
-    expect(rendered.getByText(TEXT)).toBeInTheDocument()
-
+  it('should be prevented to be called outside fallback of ErrorBoundary', () => {
     expect(() =>
       render(
         createElement(() => {
-          useErrorBoundary()
+          useErrorBoundaryFallbackProps()
           return <>{TEXT}</>
         })
       )
-    ).toThrow('useErrorBoundary: ErrorBoundary is required in parent')
+    ).toThrow(assert.message.useErrorBoundaryFallbackProps.onlyInFallbackOfErrorBoundary)
+  })
+
+  it('should be prevented to be called in children of ErrorBoundary', () => {
+    expect(
+      render(
+        <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
+          {createElement(() => {
+            useErrorBoundaryFallbackProps()
+            return <>{TEXT}</>
+          })}
+        </ErrorBoundary>
+      ).getByText(assert.message.useErrorBoundaryFallbackProps.onlyInFallbackOfErrorBoundary)
+    ).toBeInTheDocument()
   })
 })
diff --git a/packages/react/src/ErrorBoundary.tsx b/packages/react/src/ErrorBoundary.tsx
index 606507dd9..ec930e3f5 100644
--- a/packages/react/src/ErrorBoundary.tsx
+++ b/packages/react/src/ErrorBoundary.tsx
@@ -20,11 +20,11 @@ import { PropsWithoutChildren } from './types'
 import { hasResetKeysChanged } from './utils'
 import { assert } from './utils'
 
-export type ErrorBoundaryFallbackProps = {
+export type ErrorBoundaryFallbackProps<TError extends Error = Error> = {
   /**
    * when ErrorBoundary catch error, you can use this error
    */
-  error: Error
+  error: TError
   /**
    * when you want to reset caught error, you can use this reset
    */
@@ -60,7 +60,7 @@ type ErrorBoundaryState<TError extends Error = Error> =
       error: null
     }
 
-const initialState: ErrorBoundaryState = {
+const initialErrorBoundaryState: ErrorBoundaryState = {
   isError: false,
   error: null,
 }
@@ -69,7 +69,7 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
     return { isError: true, error }
   }
 
-  state = initialState
+  state = initialErrorBoundaryState
 
   componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState) {
     const { isError } = this.state
@@ -83,9 +83,9 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
     this.props.onError?.(error, info)
   }
 
-  reset() {
+  reset = () => {
     this.props.onReset?.()
-    this.setState(initialState)
+    this.setState(initialErrorBoundaryState)
   }
 
   render() {
@@ -95,14 +95,14 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
       <ErrorBoundaryContext.Provider
         value={{
           ...this.state,
-          reset: this.reset.bind(this),
+          reset: this.reset,
         }}
       >
         {this.state.isError
           ? typeof fallback === 'function'
             ? createElement(fallback, {
                 error: this.state.error,
-                reset: this.reset.bind(this),
+                reset: this.reset,
               })
             : fallback
           : children}
@@ -130,7 +130,6 @@ if (process.env.NODE_ENV !== 'production') {
   ErrorBoundary.displayName = 'ErrorBoundary'
 }
 
-// HOC
 export const withErrorBoundary = <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
   Component: ComponentType<TProps>,
   errorBoundaryProps: PropsWithoutChildren<ErrorBoundaryProps>
@@ -149,11 +148,7 @@ export const withErrorBoundary = <TProps extends ComponentProps<ComponentType> =
   return Wrapped
 }
 
-type ErrorBoundaryContextType<TError extends Error = Error> = {
-  reset: () => void
-} & ErrorBoundaryState<TError>
-
-const ErrorBoundaryContext = createContext<ErrorBoundaryContextType | null>(null)
+const ErrorBoundaryContext = createContext<({ reset: () => void } & ErrorBoundaryState) | null>(null)
 
 /**
  * @experimental This is experimental feature.
@@ -163,19 +158,33 @@ export const useErrorBoundary = <TError extends Error = Error>() => {
     isError: false,
     error: null,
   })
-
   if (state.isError) {
     throw state.error
   }
 
-  const errorBoundaryContext = useContext(ErrorBoundaryContext)
-  assert(errorBoundaryContext != null, 'useErrorBoundary: ErrorBoundary is required in parent')
+  const errorBoundary = useContext(ErrorBoundaryContext)
+  assert(errorBoundary != null && !errorBoundary.isError, assert.message.useErrorBoundary.onlyInChildrenOfErrorBoundary)
 
   return useMemo(
     () => ({
-      ...errorBoundaryContext,
       setError: (error: TError) => setState({ isError: true, error }),
     }),
-    [errorBoundaryContext]
+    []
+  )
+}
+
+export const useErrorBoundaryFallbackProps = <TError extends Error = Error>(): ErrorBoundaryFallbackProps<TError> => {
+  const errorBoundary = useContext(ErrorBoundaryContext)
+  assert(
+    errorBoundary != null && errorBoundary.isError,
+    assert.message.useErrorBoundaryFallbackProps.onlyInFallbackOfErrorBoundary
+  )
+
+  return useMemo(
+    () => ({
+      error: errorBoundary.error as TError,
+      reset: errorBoundary.reset,
+    }),
+    [errorBoundary.error, errorBoundary.reset]
   )
 }
diff --git a/packages/react/src/ErrorBoundaryGroup.en.mdx b/packages/react/src/ErrorBoundaryGroup.en.mdx
index 3770a3e18..13c0b74be 100644
--- a/packages/react/src/ErrorBoundaryGroup.en.mdx
+++ b/packages/react/src/ErrorBoundaryGroup.en.mdx
@@ -13,13 +13,13 @@ import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 const Example = () => (
   <ErrorBoundaryGroup>
     {/* Resets all ErrorBoundaries that are children of ErrorBoundaryGroup. All ErrorBoundaries within nested ErrorBoundaryGroups are also reset. */}
-    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
-    <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Try again</button>} />
+    <ErrorBoundary fallback={(props) => <>{props.error}</>}>
       <CanThrowError />
     </ErrorBoundary>
     <ErrorBoundaryGroup>
-      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
-      <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Try again</button>} />
+      <ErrorBoundary fallback={(props) => <>{props.error}</>}>
         <CanThrowError />
       </ErrorBoundary>
     </ErrorBoundaryGroup>
@@ -44,14 +44,14 @@ import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 
 const Example = () => (
   <ErrorBoundaryGroup>
-    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
-    <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Try again</button>} />
+    <ErrorBoundary fallback={(props) => <>{props.error}</>}>
       <CanThrowError />
     </ErrorBoundary>
     {/* blockOutside prop prevents reset by the parent ErrorBoundaryGroup*/}
     <ErrorBoundaryGroup blockOutside>
-      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
-      <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Try again</button>} />
+      <ErrorBoundary fallback={(props) => <>{props.error}</>}>
         <CanThrowError />
       </ErrorBoundary>
     </ErrorBoundaryGroup>
@@ -67,7 +67,7 @@ If you use useErrorBoundaryGroup, you can get a function to reset `<ErrorBoundar
 const Example = () => {
   const group = useErrorBoundaryGroup()
 
-  return <button onClick={group.reset}>reset</button>
+  return <button onClick={group.reset}>Try again</button>
 }
 ```
 
@@ -86,8 +86,8 @@ const Example = withErrorBoundaryGroup(
 
     return (
       <>
-        <button onClick={group.reset}>Reset</button>
-        <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+        <button onClick={group.reset}>Try again</button>
+        <ErrorBoundary fallback={(props) => <>{props.error}</>}>
           <CanThrowError />
         </ErrorBoundary>
       </>
diff --git a/packages/react/src/ErrorBoundaryGroup.ko.mdx b/packages/react/src/ErrorBoundaryGroup.ko.mdx
index 2dc7c7bad..2c5793d2e 100644
--- a/packages/react/src/ErrorBoundaryGroup.ko.mdx
+++ b/packages/react/src/ErrorBoundaryGroup.ko.mdx
@@ -13,13 +13,13 @@ import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 const Example = () => (
   <ErrorBoundaryGroup>
     {/* ErrorBoundaryGroup의 children인 ErrorBoundary를 모두 reset합니다. 중첩된 ErrorBoundaryGroup내의 ErrorBoundary도 모두 reset합니다. */}
-    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
-    <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Try again</button>} />
+    <ErrorBoundary fallback={(props) => <>{props.error}</>}>
       <CanThrowError />
     </ErrorBoundary>
     <ErrorBoundaryGroup>
-      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
-      <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Try again</button>} />
+      <ErrorBoundary fallback={(props) => <>{props.error}</>}>
         <CanThrowError />
       </ErrorBoundary>
     </ErrorBoundaryGroup>
@@ -44,14 +44,14 @@ import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 
 const Example = () => (
   <ErrorBoundaryGroup>
-    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
-    <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Try again</button>} />
+    <ErrorBoundary fallback={(props) => <>{props.error}</>}>
       <CanThrowError />
     </ErrorBoundary>
     {/* blockOutside prop으로 상위 ErrorBoundaryGroup에 의한 reset을 막습니다 */}
     <ErrorBoundaryGroup blockOutside>
-      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
-      <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Try again</button>} />
+      <ErrorBoundary fallback={(props) => <>{props.error}</>}>
         <CanThrowError />
       </ErrorBoundary>
     </ErrorBoundaryGroup>
@@ -67,7 +67,7 @@ useErrorBoundaryGroup을 사용하면 `<ErrorBoundaryGroup/>`내의 `<ErrorBound
 const Example = () => {
   const group = useErrorBoundaryGroup()
 
-  return <button onClick={group.reset}>reset</button>
+  return <button onClick={group.reset}>Try again</button>
 }
 ```
 
@@ -86,8 +86,8 @@ const Example = withErrorBoundaryGroup(
 
     return (
       <>
-        <button onClick={group.reset}>Reset</button>
-        <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+        <button onClick={group.reset}>Try again</button>
+        <ErrorBoundary fallback={(props) => <>{props.error}</>}>
           <CanThrowError />
         </ErrorBoundary>
       </>
diff --git a/packages/react/src/ErrorBoundaryGroup.spec.tsx b/packages/react/src/ErrorBoundaryGroup.spec.tsx
index c7fcf459b..18e0e63b6 100644
--- a/packages/react/src/ErrorBoundaryGroup.spec.tsx
+++ b/packages/react/src/ErrorBoundaryGroup.spec.tsx
@@ -1,6 +1,7 @@
 import { act, render, screen } from '@testing-library/react'
 import { createElement } from 'react'
 import { vi } from 'vitest'
+import { assert } from './utils'
 import { ERROR_MESSAGE, MS_100, TEXT, ThrowError } from './utils/toTest'
 import { ErrorBoundary, ErrorBoundaryGroup, useErrorBoundaryGroup, withErrorBoundaryGroup } from '.'
 
@@ -14,7 +15,7 @@ describe('<ErrorBoundaryGroup/>', () => {
       <ErrorBoundaryGroup>
         <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>{resetButtonText}</button>} />
         {Array.from({ length: innerErrorBoundaryCount }).map((_, key) => (
-          <ErrorBoundary key={key} fallback={(caught) => <div>{caught.error.message}</div>}>
+          <ErrorBoundary key={key} fallback={(props) => <div>{props.error.message}</div>}>
             <ThrowError message={ERROR_MESSAGE} after={MS_100}>
               <div>{TEXT}</div>
             </ThrowError>
@@ -43,7 +44,7 @@ describe('<ErrorBoundaryGroup/>', () => {
         <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>{resetButtonText}</button>} />
         {Array.from({ length: innerErrorBoundaryCount }).map((_, index) => (
           <ErrorBoundaryGroup key={index} blockOutside={index === innerErrorBoundaryCount - 1}>
-            <ErrorBoundary fallback={(caught) => <div>{caught.error.message}</div>}>
+            <ErrorBoundary fallback={(props) => <div>{props.error.message}</div>}>
               <ThrowError message={ERROR_MESSAGE} after={MS_100}>
                 <div>{TEXT}</div>
               </ThrowError>
@@ -67,21 +68,21 @@ describe('<ErrorBoundaryGroup/>', () => {
   })
 })
 
-const UsingUseErrorBoundary = () => {
+const UsingUseErrorBoundaryGroup = () => {
   useErrorBoundaryGroup()
   return <>{TEXT}</>
 }
 describe('useErrorBoundaryGroup', () => {
   it('should throw error without ErrorBoundaryGroup in parent', () => {
-    expect(() => render(<UsingUseErrorBoundary />)).toThrow(
-      'useErrorBoundaryGroup: ErrorBoundaryGroup is required in parent'
+    expect(() => render(<UsingUseErrorBoundaryGroup />)).toThrow(
+      assert.message.useErrorBoundaryGroup.onlyInChildrenOfErrorBoundaryGroup
     )
   })
 })
 
 describe('withErrorBoundaryGroup', () => {
   it('should wrap component. we can check by useErrorBoundaryGroup', () => {
-    const rendered = render(createElement(withErrorBoundaryGroup(UsingUseErrorBoundary)))
+    const rendered = render(createElement(withErrorBoundaryGroup(UsingUseErrorBoundaryGroup)))
     expect(rendered.queryByText(TEXT)).toBeInTheDocument()
   })
 
diff --git a/packages/react/src/ErrorBoundaryGroup.tsx b/packages/react/src/ErrorBoundaryGroup.tsx
index e532a3dc1..8fe9bdc69 100644
--- a/packages/react/src/ErrorBoundaryGroup.tsx
+++ b/packages/react/src/ErrorBoundaryGroup.tsx
@@ -54,7 +54,7 @@ ErrorBoundaryGroup.Reset = ErrorBoundaryGroupReset
 
 export const useErrorBoundaryGroup = () => {
   const group = useContext(ErrorBoundaryGroupContext)
-  assert(group != null, 'useErrorBoundaryGroup: ErrorBoundaryGroup is required in parent')
+  assert(group != null, assert.message.useErrorBoundaryGroup.onlyInChildrenOfErrorBoundaryGroup)
   return useMemo(
     () => ({
       /**
diff --git a/packages/react/src/experimental/Await.spec.tsx b/packages/react/src/experimental/Await.spec.tsx
index b651ee429..b4bc5396d 100644
--- a/packages/react/src/experimental/Await.spec.tsx
+++ b/packages/react/src/experimental/Await.spec.tsx
@@ -12,7 +12,7 @@ const AwaitSuccess = () => {
   return (
     <>
       {awaited.data}
-      <button onClick={awaited.reset}>reset</button>
+      <button onClick={awaited.reset}>Try again</button>
     </>
   )
 }
@@ -66,7 +66,7 @@ describe('useAwait', () => {
   it('should throw Error, and It will be cached', async () => {
     vi.useFakeTimers()
     const { unmount } = render(
-      <ErrorBoundary fallback={(caught) => <>{caught.error.message}</>}>
+      <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
         <Suspense fallback={FALLBACK}>
           <AwaitFailure />
         </Suspense>
@@ -79,7 +79,7 @@ describe('useAwait', () => {
     // error cache test
     unmount()
     render(
-      <ErrorBoundary fallback={(caught) => <>{caught.error.message}</>}>
+      <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
         <Suspense fallback={FALLBACK}>
           <AwaitFailure />
         </Suspense>
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 80e14467f..15b11505d 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,6 +1,6 @@
 export { SuspensiveProvider, Suspensive } from './SuspensiveProvider'
 export { Suspense, withSuspense } from './Suspense'
-export { ErrorBoundary, withErrorBoundary, useErrorBoundary } from './ErrorBoundary'
+export { ErrorBoundary, withErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps } from './ErrorBoundary'
 export { ErrorBoundaryGroup, withErrorBoundaryGroup, useErrorBoundaryGroup } from './ErrorBoundaryGroup'
 export { AsyncBoundary, withAsyncBoundary } from './AsyncBoundary'
 export { Delay, withDelay } from './Delay'
diff --git a/packages/react/src/utils/assert.spec.ts b/packages/react/src/utils/assert.spec.ts
index 350f02b57..f3e0c3fbc 100644
--- a/packages/react/src/utils/assert.spec.ts
+++ b/packages/react/src/utils/assert.spec.ts
@@ -29,7 +29,8 @@ describe('assert', () => {
   })
 
   it('should throw error if given condition is not met', () => {
+    const assertMessage = "value should be 'paz'"
     const value = 'baz' as string
-    expect(() => assert(value === 'paz', "value should be 'paz'")).toThrow("value should be 'paz'")
+    expect(() => assert(value === 'paz', assertMessage)).toThrow(assertMessage)
   })
 })
diff --git a/packages/react/src/utils/assert.ts b/packages/react/src/utils/assert.ts
index 8cf8d160c..ffeecf47e 100644
--- a/packages/react/src/utils/assert.ts
+++ b/packages/react/src/utils/assert.ts
@@ -3,3 +3,17 @@ export function assert(condition: boolean, message: string): asserts condition {
     throw new Error(message)
   }
 }
+
+assert.message = {
+  useErrorBoundary: {
+    onlyInChildrenOfErrorBoundary: 'useErrorBoundary: this hook should be called in ErrorBoundary.props.children',
+  },
+  useErrorBoundaryFallbackProps: {
+    onlyInFallbackOfErrorBoundary:
+      'useErrorBoundaryFallbackProps: this hook should be called in ErrorBoundary.props.fallback',
+  },
+  useErrorBoundaryGroup: {
+    onlyInChildrenOfErrorBoundaryGroup:
+      'useErrorBoundaryGroup: this hook should be called in ErrorBoundaryGroup.props.children',
+  },
+} as const
diff --git a/packages/react/src/utils/toTest.tsx b/packages/react/src/utils/toTest.tsx
index 2043dc761..f11b4fe7c 100644
--- a/packages/react/src/utils/toTest.tsx
+++ b/packages/react/src/utils/toTest.tsx
@@ -19,9 +19,9 @@ Suspend.reset = () => {
 }
 
 const throwErrorIsNeed = { current: false }
-type ThrowErrorProps = PropsWithChildren<{ message: string; after: number }>
-export const ThrowError = ({ message, after, children }: ThrowErrorProps) => {
-  const [isNeedError, setIsNeedError] = useState(throwErrorIsNeed.current)
+type ThrowErrorProps = PropsWithChildren<{ message: string; after?: number }>
+export const ThrowError = ({ message, after = 0, children }: ThrowErrorProps) => {
+  const [isNeedError, setIsNeedError] = useState(after === 0 ? true : throwErrorIsNeed.current)
   if (isNeedError) {
     throw new Error(message)
   }
diff --git a/websites/visualization/src/app/react/experimental/await/page.tsx b/websites/visualization/src/app/react/experimental/await/page.tsx
index b013d204b..78e4d4207 100644
--- a/websites/visualization/src/app/react/experimental/await/page.tsx
+++ b/websites/visualization/src/app/react/experimental/await/page.tsx
@@ -18,7 +18,7 @@ export default function Page() {
           >
             {(awaited) => (
               <div>
-                <button onClick={awaited.reset}>reset</button>
+                <button onClick={awaited.reset}>Try again</button>
                 <div>{awaited.data}</div>
               </div>
             )}
@@ -33,7 +33,7 @@ export default function Page() {
           >
             {(awaited) => (
               <div>
-                <button onClick={awaited.reset}>reset</button>
+                <button onClick={awaited.reset}>Try again</button>
                 <div>{awaited.data}</div>
               </div>
             )}
@@ -43,7 +43,7 @@ export default function Page() {
           <Await options={{ key: [2000] as const, fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }) }}>
             {(awaited) => (
               <div>
-                <button onClick={awaited.reset}>reset</button>
+                <button onClick={awaited.reset}>Try again</button>
                 <div>{awaited.data}</div>
               </div>
             )}
@@ -58,7 +58,7 @@ export default function Page() {
           >
             {(awaited) => (
               <div>
-                <button onClick={awaited.reset}>reset</button>
+                <button onClick={awaited.reset}>Try again</button>
                 <div>{awaited.data}</div>
               </div>
             )}
@@ -71,7 +71,7 @@ export default function Page() {
           <Await options={{ key: [3000] as const, fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }) }}>
             {(awaited) => (
               <div>
-                <button onClick={awaited.reset}>reset</button>
+                <button onClick={awaited.reset}>Try again</button>
                 <div>{awaited.data}</div>
               </div>
             )}
@@ -81,7 +81,7 @@ export default function Page() {
           <Await options={{ key: [4000] as const, fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }) }}>
             {(awaited) => (
               <div>
-                <button onClick={awaited.reset}>reset</button>
+                <button onClick={awaited.reset}>Try again</button>
                 <div>{awaited.data}</div>
               </div>
             )}
@@ -91,7 +91,7 @@ export default function Page() {
           <Await options={{ key: [4000] as const, fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }) }}>
             {(awaited) => (
               <div>
-                <button onClick={awaited.reset}>reset</button>
+                <button onClick={awaited.reset}>Try again</button>
                 <div>{awaited.data}</div>
               </div>
             )}
diff --git a/websites/visualization/src/components/RejectedFallback.tsx b/websites/visualization/src/components/RejectedFallback.tsx
index 0d162e7fd..2877c6795 100644
--- a/websites/visualization/src/components/RejectedFallback.tsx
+++ b/websites/visualization/src/components/RejectedFallback.tsx
@@ -1,12 +1,11 @@
 'use client'
 
-import { ErrorBoundary } from '@suspensive/react'
-import { ComponentProps } from 'react'
+import { ErrorBoundaryFallbackProps } from '@suspensive/react'
 import { Box, Button, Description } from './uis'
 
-export const RejectedFallback: ComponentProps<typeof ErrorBoundary>['fallback'] = ({ error, reset }) => (
+export const RejectedFallback = (props: ErrorBoundaryFallbackProps) => (
   <Box.Error>
-    <Description.Error>Error: {JSON.stringify(error.message)}</Description.Error>
-    <Button onClick={reset}>↻</Button>
+    <Description.Error>Error: {JSON.stringify(props.error.message)}</Description.Error>
+    <Button onClick={props.reset}>↻</Button>
   </Box.Error>
 )

From c7a1eac32349e045ca4e2387afe445c12e531989 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Wed, 11 Oct 2023 21:51:28 +0900
Subject: [PATCH 02/10] chore: update

---
 .../src/app/react/experimental/useErrorBoundary/page.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/websites/visualization/src/app/react/experimental/useErrorBoundary/page.tsx b/websites/visualization/src/app/react/experimental/useErrorBoundary/page.tsx
index 3a9553485..b601a0e0f 100644
--- a/websites/visualization/src/app/react/experimental/useErrorBoundary/page.tsx
+++ b/websites/visualization/src/app/react/experimental/useErrorBoundary/page.tsx
@@ -1,15 +1,15 @@
 'use client'
 
-import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'
+import { ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
 import { PropsWithChildren, createElement, useEffect, useState } from 'react'
 
 export default function Page() {
   return (
     <ErrorBoundary
       fallback={function ErrorBoundaryFallback({ error }) {
-        const errorBoundary = useErrorBoundary()
+        const props = useErrorBoundaryFallbackProps()
 
-        return <button onClick={() => errorBoundary.reset()}>reset: {error.message}</button>
+        return <button onClick={props.reset}>reset: {error.message}</button>
       }}
     >
       {createElement(function ErrorComponent() {

From 7de021b3d5ddc1c5d7c81d536379ccc18dc29f2c Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Wed, 11 Oct 2023 21:54:18 +0900
Subject: [PATCH 03/10] Create two-weeks-serve.md

---
 .changeset/two-weeks-serve.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/two-weeks-serve.md

diff --git a/.changeset/two-weeks-serve.md b/.changeset/two-weeks-serve.md
new file mode 100644
index 000000000..12eb91b48
--- /dev/null
+++ b/.changeset/two-weeks-serve.md
@@ -0,0 +1,5 @@
+---
+"@suspensive/react": minor
+---
+
+feat(react): add useErrorBoundaryFallbackProps

From 079947a47458652c59c94754e2641337a82da15a Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Sat, 14 Oct 2023 22:09:44 +0900
Subject: [PATCH 04/10] Update packages/react/src/ErrorBoundary.ko.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 김석진 <102217654+SEOKKAMONI@users.noreply.github.com>
---
 packages/react/src/ErrorBoundary.ko.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx
index 638c842c5..f024dadda 100644
--- a/packages/react/src/ErrorBoundary.ko.mdx
+++ b/packages/react/src/ErrorBoundary.ko.mdx
@@ -54,7 +54,7 @@ const ErrorAfter4s = () => {
 
 ### useErrorBoundaryFallbackProps
 
-ErrorBoundaryFallback에서 useErrorBoundaryFallbackProps().reset/error을 사용해 prop을 직접사용하지 않고도 `<ErrorBoundary/>`을 reset하고 error를 사용할 수 있습니다.
+ErrorBoundaryFallback에서 useErrorBoundaryFallbackProps().reset/error을 사용해 prop을 직접 사용하지 않고도 `<ErrorBoundary/>`을 reset하고 error를 사용할 수 있습니다.
 
 ```tsx
 import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'

From 0900e2526f1b0c97559dcb4ba096f935c478286e Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Sat, 14 Oct 2023 22:11:36 +0900
Subject: [PATCH 05/10] Update packages/react/src/ErrorBoundary.ko.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 김석진 <102217654+SEOKKAMONI@users.noreply.github.com>
---
 packages/react/src/ErrorBoundary.ko.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx
index f024dadda..e1d618146 100644
--- a/packages/react/src/ErrorBoundary.ko.mdx
+++ b/packages/react/src/ErrorBoundary.ko.mdx
@@ -82,7 +82,7 @@ const Example = () => (
 
 ### props.resetKeys
 
-`<ErrorBoundary/>`의 fallback 외부에 있는 컴포넌트가 `<ErrorBoundary/>`를 reset하려면 resetKeys배열에 resetKey를 할당하면 됩니다. resetKeys는 배열의 하나 이상의 요소가 변경된 경우에만 작동합니다. useEffect의 종속성 배열이 작동하는 방식과 같이 resetKeys로 매 렌더링마다 새 배열을 주입하는 것을 걱정할 필요도 없습니다.
+`<ErrorBoundary/>`의 fallback 외부에 있는 컴포넌트가 `<ErrorBoundary/>`를 reset하려면 resetKeys 배열에 resetKey를 할당하면 됩니다. resetKeys는 배열의 하나 이상의 요소가 변경된 경우에만 작동합니다. useEffect의 종속성 배열이 작동하는 방식과 같이 resetKeys로 매 렌더링마다 새 배열을 주입하는 것을 걱정할 필요도 없습니다.
 
 ```tsx
 import { ErrorBoundary } from '@suspensive/react'

From 5237ea43ca53c8eef404adc4cbd4faa2a17fa516 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Sat, 14 Oct 2023 22:12:03 +0900
Subject: [PATCH 06/10] Update packages/react/src/ErrorBoundary.ko.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 김석진 <102217654+SEOKKAMONI@users.noreply.github.com>
---
 packages/react/src/ErrorBoundary.ko.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx
index e1d618146..c0399947a 100644
--- a/packages/react/src/ErrorBoundary.ko.mdx
+++ b/packages/react/src/ErrorBoundary.ko.mdx
@@ -157,7 +157,7 @@ useErrorBoundary는 실험 기능이므로 이 인터페이스는 변경될 수
 
 ### useErrorBoundary().setError
 
-`<ErrorBoundary/>`의 children에서 useErrorBoundary().setError을 사용해 throw 없이도 `<ErrorBoundary/>`에서 Error를 알도록 할 수 있습니다.
+`<ErrorBoundary/>`의 children에서 useErrorBoundary().setError을 사용해 throw 없이도 `<ErrorBoundary/>`에서 Error를 알게 할 수 있습니다.
 
 ```tsx
 import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'

From 1e748f837c19d8e3cd4214e363fece8e62ddfc6e Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Sun, 15 Oct 2023 01:35:03 +0900
Subject: [PATCH 07/10] docs: update

---
 packages/react/src/ErrorBoundary.en.mdx | 2 +-
 packages/react/src/ErrorBoundary.ko.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx
index e7e9644b2..6eb1cbe6b 100644
--- a/packages/react/src/ErrorBoundary.en.mdx
+++ b/packages/react/src/ErrorBoundary.en.mdx
@@ -64,7 +64,7 @@ const Nested = () => {
 
   return (
     <>
-      <button onClick={props.reset} />
+      <button onClick={props.reset}>Try again</button>
       {props.error.message}
     </>
   )
diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx
index c0399947a..e30de38e5 100644
--- a/packages/react/src/ErrorBoundary.ko.mdx
+++ b/packages/react/src/ErrorBoundary.ko.mdx
@@ -64,7 +64,7 @@ const Nested = () => {
 
   return (
     <>
-      <button onClick={props.reset} />
+      <button onClick={props.reset}>Try again</button>
       {props.error.message}
     </>
   )

From 108d0ae51102196ee895da676ee861b731b2de1a Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Mon, 16 Oct 2023 07:58:43 +0900
Subject: [PATCH 08/10] Update packages/react/src/ErrorBoundary.ko.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 김석진 <102217654+SEOKKAMONI@users.noreply.github.com>
---
 packages/react/src/ErrorBoundary.ko.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx
index e30de38e5..203a7d531 100644
--- a/packages/react/src/ErrorBoundary.ko.mdx
+++ b/packages/react/src/ErrorBoundary.ko.mdx
@@ -60,12 +60,12 @@ ErrorBoundaryFallback에서 useErrorBoundaryFallbackProps().reset/error을 사
 import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
 
 const Nested = () => {
-  const props = useErrorBoundaryFallbackProps()
+  const { reset, error } = useErrorBoundaryFallbackProps()
 
   return (
     <>
-      <button onClick={props.reset}>Try again</button>
-      {props.error.message}
+      <button onClick={reset}>Try again</button>
+      {error.message}
     </>
   )
 }

From 9d739d67f2c1ecd82c6db82a88a7e347e2b74a3a Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Mon, 16 Oct 2023 07:58:56 +0900
Subject: [PATCH 09/10] Update packages/react/src/ErrorBoundary.en.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 김석진 <102217654+SEOKKAMONI@users.noreply.github.com>
---
 packages/react/src/ErrorBoundary.en.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx
index 6eb1cbe6b..a7d4ce2b3 100644
--- a/packages/react/src/ErrorBoundary.en.mdx
+++ b/packages/react/src/ErrorBoundary.en.mdx
@@ -60,12 +60,12 @@ In fallback of `<ErrorBoundary/>`, by calling useErrorBoundaryFallbackProps().re
 import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
 
 const Nested = () => {
-  const props = useErrorBoundaryFallbackProps()
+  const { reset, error } = useErrorBoundaryFallbackProps()
 
   return (
     <>
-      <button onClick={props.reset}>Try again</button>
-      {props.error.message}
+      <button onClick={reset}>Try again</button>
+      {error.message}
     </>
   )
 }

From 90da45fb386e28e08e99ef7b833467744c1b8fb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=88=98?=
 <57122180+minsoo-web@users.noreply.github.com>
Date: Mon, 16 Oct 2023 08:58:08 +0900
Subject: [PATCH 10/10] advise(react/errorboundary): add & change example case
 (#221)

* docs(errorboundary): change & add example case for ErrorBoundary

* docs(react/errorboundary): change & add example case to ErrorBoundary (en)

* docs(react): suggestion to advise/useErrorBoundaryProps (#227)

* Update ErrorBoundary.ko.mdx

Co-authored-by: Jonghyeon Ko <manudeli.ko@gmail.com>

* Update ErrorBoundary.en.mdx

Co-authored-by: Jonghyeon Ko <manudeli.ko@gmail.com>

---------

Co-authored-by: Jonghyeon Ko <manudeli.ko@gmail.com>
---
 packages/react/src/ErrorBoundary.en.mdx | 32 ++++++++++++++++++++++++-
 packages/react/src/ErrorBoundary.ko.mdx | 32 ++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx
index a7d4ce2b3..b8ec2c519 100644
--- a/packages/react/src/ErrorBoundary.en.mdx
+++ b/packages/react/src/ErrorBoundary.en.mdx
@@ -50,11 +50,39 @@ const ErrorAfter4s = () => {
 
 :::tip
 
+## Define component as `<ErrorBoundary/>`'s fallback
+
+### ErrorBoundaryFallbackProps
+
+If you want to deliver a declared component as `<ErrorBoundary/>`'s fallback, you can use the `ErrorBoundaryFallbackProps` type to declare the component easily.
+
+```tsx
+import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
+
+const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => (
+  <>
+    <button onClick={reset}>reset</button>
+    {error.message}
+  </>
+)
+
+const Example = () => (
+  <ErrorBoundary fallback={ErrorBoundaryFallback}>
+    <ErrorAfter4s />
+  </ErrorBoundary>
+)
+```
+
+:::
+
+:::tip
+
 ## Use `<ErrorBoundary/>` fallback props without prop drilling
 
 ### useErrorBoundaryFallbackProps
 
-In fallback of `<ErrorBoundary/>`, by calling useErrorBoundaryFallbackProps().reset/error, we can use error of `<ErrorBoundary/>` and reset it without using prop directly
+If component using `reset` method and `error` object is nested, prop drilling cannot be avoided.
+The `useErrorBoundaryFallbackProps` allows you to access the `reset` method and `error` objects without prop drilling.
 
 ```tsx
 import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
@@ -70,7 +98,9 @@ const Nested = () => {
   )
 }
 
+// There's no need to pass fallback Prop here!
 const ErrorBoundaryFallback = () => <Nested />
+
 const Example = () => (
   <ErrorBoundary fallback={ErrorBoundaryFallback}>
     <Error />
diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx
index 203a7d531..80e4b7d85 100644
--- a/packages/react/src/ErrorBoundary.ko.mdx
+++ b/packages/react/src/ErrorBoundary.ko.mdx
@@ -50,11 +50,39 @@ const ErrorAfter4s = () => {
 
 :::tip
 
+## `<ErrorBoundary/>`'의 fallback로 전달할 컴포넌트 정의하기
+
+### ErrorBoundaryFallbackProps
+
+`<ErrorBoundary/>`'의 fallback으로 컴포넌트를 전달하고 싶다면 `ErrorBoundaryFallbackProps` 타입을 활용해 쉽게 컴포넌트를 선언 할 수 있습니다.
+
+```tsx
+import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
+
+const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => (
+  <>
+    <button onClick={reset}>reset</button>
+    {error.message}
+  </>
+)
+
+const Example = () => (
+  <ErrorBoundary fallback={ErrorBoundaryFallback}>
+    <ErrorAfter4s />
+  </ErrorBoundary>
+)
+```
+
+:::
+
+:::tip
+
 ## `<ErrorBoundary/>` fallback props을 prop drilling 없이 사용하기
 
 ### useErrorBoundaryFallbackProps
 
-ErrorBoundaryFallback에서 useErrorBoundaryFallbackProps().reset/error을 사용해 prop을 직접 사용하지 않고도 `<ErrorBoundary/>`을 reset하고 error를 사용할 수 있습니다.
+`error` 객체와 `reset` 메소드을 사용하려는 컴포넌트가 중첩되면 prop drilling을 피할 수 없습니다.
+이 때, `useErrorBoundaryFallbackProps`을 통해, prop drilling 없이 `reset` 메소드와 `error` 객체에 접근할 수 있습니다.
 
 ```tsx
 import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
@@ -70,7 +98,9 @@ const Nested = () => {
   )
 }
 
+// 여기서 fallbackProp 을 전달할 필요가 없어집니다!
 const ErrorBoundaryFallback = () => <Nested />
+
 const Example = () => (
   <ErrorBoundary fallback={ErrorBoundaryFallback}>
     <Error />