@vlsergey/react-bootstrap-error-boundary v2.1.0

@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

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