Error Boundary | Components

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

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

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

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