DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Mike Fix
Mike Fix

Posted on

Super simple error boundaries for React 16+

<EitheRx />

Super simple, reusable binary error boundaries for React. Your go-to, prescribed, error-boundary helper.

Usage

$ npm i --save eitherx
Enter fullscreen mode Exit fullscreen mode
import Either from 'eitherx'

// Wrapper-component Style
<Either>
  {/* Either . . . */}
  <p>"Happy Child Γ°ΕΈΛœβ€ž"</p>
  {/* Or . . . */}
  <p>"Error child Ò˜¹ï¸ (but at least your UI is happy)"</p>
</Either>

// OR use the `render` and `catchError` props

// Render-prop Style
<Either
  render={() => (<p>"Happy Child Γ°ΕΈΛœβ€ž"</p>)}
  catchError={({ error, info }) => (
    <div>
      <p>{`Info: ${info}`}</p>
      <p>{`Error: ${error}`}</p>
    </div>
  )}
/>
Enter fullscreen mode Exit fullscreen mode

Wrapper Component Style

Eitherx either renders the first child component, unless an error occurred while rendering, then the second child is rendered. Easy enough Γ°ΕΈΛœβ€ž.

If you do not pass a second child, and an error occurs, null will be return to React to render.

Render-prop Style

Using this style, you must pass a function for both render and catchError. If an error occurs, the component
returned from catchError will be rendered. Otherwise Eitherx will render the component returned from render.

The catchError function receives an object with the fields error and info, both of which are passed directly from
React Error Boundaries.

Handling Errors

With either style, you can pass an handleError callback prop to add additional error handling, logging, etc. This also allows you to
filter certain errors by returning false from handleError as well.

Example
<Eitherx
  handleError={({ error, info }) => {
    console.log(info)
    console.error(error)
  }}
  render={() => (<Component>"Render Prop"</Component>)}
  catchError={() => (<p>"Catch Prop"</p>)}
/>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Another day as a dev

Stop by this week's meme thread!