⚛️ React Error Guard Component ⚛️
Setup your consuming project
Firs install the package with yarn add react-error-guard
(or npm i --save
). Then you can consume the component like bellow.
const MyReactContainer = children let ErrorBoundaryContainer = null; if processenvNODE_ENV !== 'production' ErrorBoundaryContainer = DeveloperErrorBoundary; else ErrorBoundaryContainer = ProductionErrorBoundary; return <ErrorBoundaryContainer>children</ErrorBoundaryContainer>;
ℹ️ Notice: This component right now is only compatible with React 16. But there are plans to support React 15 but much more limited version, unstable_handleError
.
<DeveloperErrorBoundary />
It is meant to be used as a drop-in helper on development environments. It is a declarative component, abstracted from the react-error-overlay
. The error screen from the development server from create-react-app
.
DeveloperErrorBoundary preview
<ProductionErrorBoundary />
It is meant to be used on production environments, as a helper to provide a fallback error screen and also automated reports to your preferred tool via the dispatchErrorReporting
prop.
<ProductionErrorBoundary />
Customizing ProductionErrorBoundary is highly customisable through its props.
Default ProductionErrorBoundary preview (with no dispatchErrorReporting
provided)
<ProductionErrorBoundary> children</ProductionErrorBoundary>
The code above will produce the following default error message component render:
Default ProductionErrorBoundary preview (with dispatchErrorReporting
provided)
<ProductionErrorBoundary => children</ProductionErrorBoundary>
The code above will produce the following default error message component render:
You can even replace the default error message by passing errorMessageComponent
prop.
const ErrorMessageComponent = <div ="error-message"> <h1>🚨 Whoopsie we crashed 🚨</h1> <p> worry an automated error report has been sent to our team of cats to handle this</p> </div>; const IconClose = <span>❌</span>; const dispatchErrorReporting = error info Raven; const MyReactContainer = children <ProductionErrorBoundary = = = > children </ProductionErrorBoundary>
▶️ The example above uses raven-js
but any reporting tool can be used.
🌟 This project started, and still is, an abstraction taken from the amazing works of the create-react-app
team.