react-outcomes-error-alert

Error alert displayed when connection or server errors occur. Two types or errors will be shown.

1. Connection Error: This errors is for when a network error or a timeout has occured. It will notify the user that the request will be retried.

1. Server Error: This error is for when a fatal error has occured such as a 400 is returned from an API. Within this error is the ability to reload the page.

Installation

react-outcomes-error-alert can be installed from NPM

npm install react-outcomes-error-alert

Usage

Include SASS file in your project:

@import 'node_modules\react-outcomes-error-alert\dist\ErrorAlert.scss'

Import and add the react component into your project

The error takes the following properties:

• refresh: optional, function to attach to link in the fatal error in order to reload the page, link not shown if not provided
• refreshText: optional, string that is used for the link of the refresh action, uses default if not provided
• connectionErrorText: optional, string that is displayed in the error alert for a connection error, uses default if not provided
• serverErrorText: optional, string that is displayed in the error alert for a server error, uses default if not provided

import ErrorAlert from 'react-outcomes-error-alert';
 
let refresh = () => window.location.reload();
let refreshText = 'refresh the page';
let connectionErrorText = 'There was a error connecting.';
let serverErrorText = 'A server error has occured';
 
<ErrorAlert
  refresh={refresh}
  refreshText={refreshText}
  connectionErrorText={connectionErrorText}
  serverErrorText={serverErrorText}
/>

To Trigger the different error alerts the library exposes three error actions:

• handleServerTimeout: Will display connection error alert
• handleServerError: Will display server error alert
• hideErrorAlertIfVisible: Will hide the error alert

 
import { ErrorActions } from 'react-outcomes-error-alert';
 
ErrorActions.showConnErrorAlert();
ErrorActions.showServerErrorAlert();
ErrorActions.hideErrorAlertIfVisible();

Contributing

Fork the repository. Committing directly against this repository is highly discouraged. Please create a Pull Request.

Code Style

This repository is configured with EditorConfig rules and contributions should make use of them.