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

withErrorBoundaryGroup

🚫

deprecated: Use wrap.ErrorBoundaryGroup().on instead

withErrorBoundaryGroup allows you to easily wrap your component in <ErrorBoundaryGroup/>. If you use withErrorBoundaryGroup as shown below, you don't need to create unnecessary code to wrap it. The second argument to withErrorBoundaryGroup is a prop of <ErrorBoundaryGroup/> without children.

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