Error Boundary

A React feature to detect if there has been a code error, and if so, display a fallback UI.

Error Boundary is only available in the React API for SWAN.

UsageAPI

An error boundary is a React feature that lets you wrap part of your UI, and if an error occurs within that boundary, you display some fallback UI (such as an error message for the user).

SWAN provides an in-box utility component for this. It even accepts a prop called fallback if you want your custom handling; otherwise, SWAN will show the error details. You also have the option to see your custom fallback as well as error details, by passing true to the boolean prop forceShowError.

const Wrapper = ({ children }) => (
  <Box
    p={5}
    style={{
      background: 'papayawhip',
    }}
  >
    {children}
  </Box>
)

const ErroneousComponent = () => {
  const x = {}
  return (
    <h3>
      Hello World!
      {/* Below line is gonna throw error */}
      {x['a'].toUpperCase()}
    </h3>
  )
}

render(
  <>
    <H3>Wrapping with ErrorBoundary with a fallback</H3>
    <Wrapper>
      <ErrorBoundary
        fallback={
          <>
            <H4>Oooopsieee!</H4>
            <P>ErrorBoundary with a fallback</P>
          </>
        }
      >
        <ErroneousComponent />
      </ErrorBoundary>
    </Wrapper>
    <H3 mt={7}>
      Wrapping with ErrorBoundary with a fallback and forceShowError
    </H3>
    <Wrapper>
      <ErrorBoundary
        forceShowError
        fallback={
          <>
            <H4>Oooopsieee!</H4>
            <P>ErrorBoundary with a fallback and forceShowError</P>
          </>
        }
      >
        <ErroneousComponent />
      </ErrorBoundary>
    </Wrapper>
    <H3 mt={7}>Default wrapping with ErrorBoundary</H3>
    <Wrapper>
      <ErrorBoundary>
        <ErroneousComponent />
      </ErrorBoundary>
    </Wrapper>
  </>,
)

const Wrapper = ({ children }) => (
  <Box
    p={5}
    style={{
      background: 'papayawhip',
    }}
  >
    {children}
  </Box>
)

const ErroneousComponent = () => {
  const x = {}
  return (
    <h3>
      Hello World!
      {/* Below line is gonna throw error */}
      {x['a'].toUpperCase()}
    </h3>
  )
}

render(
  <>
    <H3>Wrapping with ErrorBoundary with a fallback</H3>
    <Wrapper>
      <ErrorBoundary
        fallback={
          <>
            <H4>Oooopsieee!</H4>
            <P>ErrorBoundary with a fallback</P>
          </>
        }
      >
        <ErroneousComponent />
      </ErrorBoundary>
    </Wrapper>
    <H3 mt={7}>
      Wrapping with ErrorBoundary with a fallback and forceShowError
    </H3>
    <Wrapper>
      <ErrorBoundary
        forceShowError
        fallback={
          <>
            <H4>Oooopsieee!</H4>
            <P>ErrorBoundary with a fallback and forceShowError</P>
          </>
        }
      >
        <ErroneousComponent />
      </ErrorBoundary>
    </Wrapper>
    <H3 mt={7}>Default wrapping with ErrorBoundary</H3>
    <Wrapper>
      <ErrorBoundary>
        <ErroneousComponent />
      </ErrorBoundary>
    </Wrapper>
  </>,
)

Props

ErrorBoundary

See core props for additional props that can be applied to this component.

prop	type	required	default
`fallback` A React node that serves as a fallback UI when an error occurs.	`ReactNode`	false	null
`forceShowError` A boolean indicating whether to force showing the error details	`boolean`	false	false
`errorDetailMsg` Context or a message related to the error.	`stringnull`	false	null