ErrorBoundaryGroup

이 컴포넌트로 children인 <ErrorBoundary/>들을 쉽게 관리할 수 있습니다.

중첩된 <ErrorBoundaryGroup/>의 children인 <ErrorBoundary/>들도 상위 <ErrorBoundaryGroup.Consumer/>으로도 reset됩니다.

import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 
const Example = () => (
  <ErrorBoundaryGroup>
    {/* ErrorBoundaryGroup의 children인 ErrorBoundary를 모두 reset합니다. 중첩된 ErrorBoundaryGroup내의 ErrorBoundary도 모두 reset합니다. */}
    <ErrorBoundaryGroup.Consumer>
      {(group) => <button onClick={group.reset}>Try again</button>}
    </ErrorBoundaryGroup.Consumer>
    <ErrorBoundary fallback={(props) => <>{props.error}</>}>
      <CanThrowError />
    </ErrorBoundary>
    <ErrorBoundaryGroup>
      <ErrorBoundaryGroup.Consumer>
        {(group) => <button onClick={group.reset}>Try again</button>}
      </ErrorBoundaryGroup.Consumer>
      <ErrorBoundary fallback={(props) => <>{props.error}</>}>
        <CanThrowError />
      </ErrorBoundary>
    </ErrorBoundaryGroup>
  </ErrorBoundaryGroup>
)

props.blockOutside

만약 상위 <ErrorBoundaryGroup/>에 의한 하위 <ErrorBoundaryGroup/>의 reset을 막고 싶다면 blockOutside을 사용하면 됩니다.

import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 
const Example = () => (
  <ErrorBoundaryGroup>
    <ErrorBoundaryGroup.Consumer>
      {(group) => <button onClick={group.reset}>Try again</button>}
    </ErrorBoundaryGroup.Consumer>
    <ErrorBoundary fallback={(props) => <>{props.error}</>}>
      <CanThrowError />
    </ErrorBoundary>
    {/* blockOutside prop으로 상위 ErrorBoundaryGroup에 의한 reset을 막습니다 */}
    <ErrorBoundaryGroup blockOutside>
      <ErrorBoundaryGroup.Consumer>
        {(group) => <button onClick={group.reset}>Try again</button>}
      </ErrorBoundaryGroup.Consumer>
      <ErrorBoundary fallback={(props) => <>{props.error}</>}>
        <CanThrowError />
      </ErrorBoundary>
    </ErrorBoundaryGroup>
  </ErrorBoundaryGroup>
)

useErrorBoundaryGroup

useErrorBoundaryGroup을 사용하면 <ErrorBoundaryGroup/>내의 <ErrorBoundary/>들을 reset하는 함수를 얻을 수 있습니다.

import { useErrorBoundaryGroup } from '@suspensive/react'
 
const Example = () => {
  const group = useErrorBoundaryGroup()
 
  return <button onClick={group.reset}>Try again</button>
}

withErrorBoundaryGroup

🚫

deprecated: wrap.ErrorBoundaryGroup().on을 사용하세요

withErrorBoundaryGroup를 사용하면 컴포넌트를 <ErrorBoundaryGroup/>로 쉽게 래핑할 수 있습니다. 아래와 같이 withErrorBoundaryGroup를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다. withErrorBoundaryGroup의 두 번째 인자는 children이 없는 <ErrorBoundaryGroup/>의 props입니다.

import { withErrorBoundaryGroup, useErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 
const Example = withErrorBoundaryGroup(
  function Component() {
    const group = useErrorBoundaryGroup()
 
    return (
      <>
        <button onClick={group.reset}>Try again</button>
        <ErrorBoundary fallback={(props) => <>{props.error}</>}>
          <CanThrowError />
        </ErrorBoundary>
      </>
    )
  },
  { blockOutside: true }
)

<AsyncBoundary/> (deprecated)<Delay/>