An overlay for displaying stack frames based on create-react-app/packages/react-error-overlay
npm install react-error-guardFirs install the package with yarn add react-error-guard (or npm i --save). Then you can consume the component like bellow.
``jsx
const MyReactContainer = ({ children }) => {
let ErrorBoundaryContainer = null;
if (process.env.NODE_ENV !== 'production') {
ErrorBoundaryContainer = require('react-error-guard').DeveloperErrorBoundary;
} else {
ErrorBoundaryContainer = require('react-error-guard').ProductionErrorBoundary;
}
return
}
`
ℹ️ 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.
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 example
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 is highly customisable through its props.
Default ProductionErrorBoundary preview (with no dispatchErrorReporting provided)
`jsx`
{children}
The code above will produce the following default error message component render:
!no dispatchErrorReporting preview
Default ProductionErrorBoundary preview (with dispatchErrorReporting provided)
`jsx`
{children}
The code above will produce the following default error message component render:
!no dispatchErrorReporting preview
You can even replace the default error message by passing errorMessageComponent prop.
` Don't worry, an automated error report has been sent to our team of cats to handle this.jsx
const ErrorMessageComponent = (
🚨 Whoopsie, we crashed 🚨
);
const IconClose = ❌;
const dispatchErrorReporting = ({ error, info }) => {
Raven.captureException(error, {
extra: {
...info, reactVersion: React.version
},
tags: { version, reactVersion: React.version }
});
}
const MyReactContainer = ({ children }) => (
closeIcon={
dispatchErrorReporting={dispatchErrorReporting}
>
{children}
)
`
▶️ 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.