@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