react-error-shield v1.0.3

react-error-shield

The react-error-shield is a robust React component designed to enhance application stability by providing a comprehensive error handling mechanism. It acts as a protective layer around your React components, gracefully capturing errors and displaying user-friendly fallback interfaces or messages, without crashing the entire application.

Key Features

• Versatile Error Handling : Supports various error handling strategies including toast notifications, custom error page, and fallback UI component.

• Customizable : Offers extensive customization options for error messages, background colors, and more, allowing for a seamless integration with your application's design.

• Automatic Page Refresh Option : Can refresh the page on error, providing a quick way for users to recover from unexpected issues.

• Developer Friendly - Simplifies the debugging process by providing clear and concise error information, making it easier to identify and fix issues.

Installation

To install react-error-shield, use npm:

npm install react-error-shield

Usage/Examples

import { ErrorShield } from "react-error-shield";

function App() {
    return (
        <ErrorShield type='TOAST'>
            <App />
        </ErrorShield>
    );
}

Toast

<ErrorShield
    type='TOAST'
    errorBackgroundColor='RED'
    customErrorMsg='Something went wrong! Please try again.'
    refreshPage>
    // ---- child components ---
</ErrorShield>

Error

<ErrorShield
    type='ERROR'
    errorBackgroundColor='RED'
    customErrorMsg='Something went wrong! Please try again.'
    customSecondaryMsg='This is a secondary message.'
    refreshPage>
    // ---- child components ---
</ErrorShield>

Fallback UI

<ErrorShield
    type='FALLBACK'
    fallbackUI={<div>Something went wrong! Please try again.</div>}>
    // ---- child components ---
</ErrorShield>

Props

The following props are expected:

If the type is FALLBACK, the fallbackUI prop is expected. If not passed, it will default to the ERROR behavior.

The customSecondaryMsg prop only works with the type set to ERROR.