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

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.message}</>}>
      <ErrorAfter2s />
    </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.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

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

import { useErrorBoundaryGroup } from '@suspensive/react'

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

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

Open Sandbox