@vlsergey/react-bootstrap-error-boundary

Ready-to-use error boundary with Bootstrap Alert as error text display.

Goal

Do not duplicate same code of for Alert usage in different projects.

Installation

npm i --save @vlsergey/react-bootstrap-error-boundary

or

npm i --save-dev @vlsergey/react-bootstrap-error-boundary

Usage

import ErrorBoundary from '@vlsergey/react-bootstrap-error-boundary';

/*...*/

<ErrorBoundary>
    {/*...*/}
</ErrorBoundary>

Example with "retry" button

import Button from 'react-bootstrap/Button';
import ErrorBoundary from '@vlsergey/react-bootstrap-error-boundary';

class MyComponent extends PureComponent {
  state = {
    retryCounter : 0,
  }

  handleRetry = () =>
    this.setState( ({retryCounter}) => ({retryCounter : retryCounter+1}) );

  render() {
    return <>
      {/*...*/}
      <ErrorBoundary
        errorMessageSuffix={<><br /><Button onClick={this.handleRetry}>retry</Button><>}
        key={`ErrorBoundary_${this.state.retryCounter}`}>
          {/*...*/}
      </ErrorBoundary>
      {/*...*/}
    </>;
  }
}

Props

Property	Type	Default value	Description
logToConsole	boolean	true	Log error and react error info to browser console
errorMessage	( error : unknown ) : ReactNode	(prefix)(error)	Text (react node) to display on error as Alert children. Defined as function of error.
errorMessagePrefix	react node (may be string)	"Error occured: "	Prefix to display before error message. Ignored if errorMessage function is provided.
errorMessageSuffix	react node (may be string)	""	Suffix to display after error message. Ignored if errorMessage function is provided.
variant	See bootstrap Alert variants	'danger'	Alert variant to display

Changelog

Unspecified minor versions are for dependencies updates.

2.1.0

• ✨ Message suffix added to simplify adding retry button (also described in example).

2.0.0

• ✨ Allow to change prefix as string without redefining whole render message function.

1.0.0

• 🎉 Initial version