ErrorBoundaryGroup

This is a component for managing multiple <ErrorBoundary/>s easily.

<ErrorBoundary/>s as children of nested <ErrorBoundaryGroup/> will also be reset by parent <ErrorBoundaryGroup.Consumer/>.

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.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

If you want to block resetting nested <ErrorBoundaryGroup/> by parent <ErrorBoundaryGroup/>, Use 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 prevents reset by the parent ErrorBoundaryGroup*/}
    <ErrorBoundaryGroup blockOutside>
      <ErrorBoundaryGroup.Consumer>
        {(group) => <button onClick={group.reset}>Try again</button>}
      </ErrorBoundaryGroup.Consumer>
      <ErrorBoundary fallback={(props) => <>{props.error}</>}>
        <CanThrowError />
      </ErrorBoundary>
    </ErrorBoundaryGroup>
  </ErrorBoundaryGroup>
)

useErrorBoundaryGroup

If you use useErrorBoundaryGroup, you can get a function to reset <ErrorBoundary/>s in <ErrorBoundaryGroup/>.

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