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.message}</>}>
      <ErrorAfter2s />
    </ErrorBoundary>
 
    <ErrorBoundaryGroup>
      <ErrorBoundaryGroup.Consumer>
        {(group) => <button onClick={group.reset}>Try again</button>}
      </ErrorBoundaryGroup.Consumer>
      <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
        <ErrorAfter2s />
      </ErrorBoundary>
    </ErrorBoundaryGroup>
  </ErrorBoundaryGroup>
)

import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
import { ErrorAfter2s } from './ErrorAfter2s'

export const Example = () => {
  return (
    <ErrorBoundaryGroup>
      <fieldset style={{ border: '1px solid red', padding: '10px' }}>
        <legend>Outer ErrorBoundaryGroup</legend>
        <ErrorBoundaryGroup.Consumer>
          {(group) => <button onClick={group.reset}>Try again</button>}
        </ErrorBoundaryGroup.Consumer>
        <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
          <ErrorAfter2s />
        </ErrorBoundary>

        <ErrorBoundaryGroup>
          <fieldset style={{ border: '1px solid blue', padding: '10px' }}>
            <legend>Inner ErrorBoundaryGroup</legend>
            <ErrorBoundaryGroup.Consumer>
              {(group) => <button onClick={group.reset}>Try again</button>}
            </ErrorBoundaryGroup.Consumer>

            <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
              <ErrorAfter2s />
            </ErrorBoundary>
          </fieldset>
        </ErrorBoundaryGroup>
      </fieldset>
    </ErrorBoundaryGroup>
  )
}

Open Sandbox

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.message}</>}>
      <ErrorAfter2s />
    </ErrorBoundary>
 
    {/* blockOutside prop으로 상위 ErrorBoundaryGroup에 의한 reset을 막습니다. */}
    <ErrorBoundaryGroup blockOutside>
      <ErrorBoundaryGroup.Consumer>
        {(group) => <button onClick={group.reset}>Try again</button>}
      </ErrorBoundaryGroup.Consumer>
      <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
        <ErrorAfter2s />
      </ErrorBoundary>
    </ErrorBoundaryGroup>
  </ErrorBoundaryGroup>
)

import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
import { ErrorAfter2s } from './ErrorAfter2s'

export const Example = () => {
  return (
    <ErrorBoundaryGroup>
      <fieldset style={{ border: '1px solid red', padding: '10px' }}>
        <legend>Outer ErrorBoundaryGroup</legend>
        <ErrorBoundaryGroup.Consumer>
          {(group) => <button onClick={group.reset}>Try again</button>}
        </ErrorBoundaryGroup.Consumer>
        <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
          <ErrorAfter2s />
        </ErrorBoundary>

        <ErrorBoundaryGroup blockOutside>
          <fieldset style={{ border: '1px solid blue', padding: '10px' }}>
            <legend>Inner ErrorBoundaryGroup</legend>
            <ErrorBoundaryGroup.Consumer>
              {(group) => <button onClick={group.reset}>Try again</button>}
            </ErrorBoundaryGroup.Consumer>
            <ErrorBoundary fallback={(props) => <>{props.error.message}</>}>
              <ErrorAfter2s />
            </ErrorBoundary>
          </fieldset>
        </ErrorBoundaryGroup>
      </fieldset>
    </ErrorBoundaryGroup>
  )
}

Open Sandbox

ErrorBoundaryGroup.with

ErrorBoundaryGroup.with ErrorBoundaryGroup을 사용하여 컴포넌트를 래핑하는 HOC입니다. ErrorBoundaryGroup.with를 사용하면 컴포넌트를 쉽게 래핑할 수 있습니다.


import { ErrorBoundaryGroup } from '@suspensive/react'
 
const Example = ErrorBoundaryGroup.with({}, () => {
  return <>...</>
})

ErrorBoundaryGroup.Consumer

ErrorBoundaryGroup.Consumer는 ErrorBoundaryGroup의 Consumer입니다. ErrorBoundaryGroup.Consumer를 사용하면 ErrorBoundaryGroup의 reset을 사용할 수 있습니다.


import { ErrorBoundaryGroup } from '@suspensive/react'
 
const Example = () => (
  <ErrorBoundaryGroup>
    <ErrorBoundaryGroup.Consumer>
      {(group) => <button onClick={group.reset}>Try again</button>}
    </ErrorBoundaryGroup.Consumer>
    <ErrorBoundary>
      <ErrorAfter2s />
    </ErrorBoundary>
  </ErrorBoundaryGroup>
)

useErrorBoundaryGroup

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


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

import { useErrorBoundaryGroup } from '@suspensive/react'

export const Button = () => {
  const group = useErrorBoundaryGroup()

  return <button onClick={group.reset}>Try again</button>
}

Open Sandbox