webcloud / react-error-guard

⚛️An overlay for displaying stack frames based on create-react-app/packages/react-error-overlay

⚛️ 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 (process.env.NODE_ENV !== 'production') {
    ErrorBoundaryContainer = require('react-error-guard').DeveloperErrorBoundary;
  } else {
    ErrorBoundaryContainer = require('react-error-guard').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.

Customizing <ProductionErrorBoundary />

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 dispatchErrorReporting={dispatchErrorReporting}>
  {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 className="error-message">
    <h1>🚨 Whoopsie, we crashed 🚨</h1>
    <p>Don't 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.captureException(error, {
    extra: {
      ...info, reactVersion: React.version
    },
    tags: { version, reactVersion: React.version }
  });
}

const MyReactContainer = ({ children }) => (
  <ProductionErrorBoundary
    errorMessageComponent={ErrorMessageComponent}
    closeIcon={<IconClose />}
    dispatchErrorReporting={dispatchErrorReporting}
  >
    {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.

react-error-guard's Issues

Outdated readme or wrong export?

Library exports only a production boundary as default

react-error-guard/src/index.js

Line 1 in 5195a31

export {default as ProductionErrorBoundary} from './ProductionErrorBoundary';

But README states that we should do the following to get development version which obviously cannot work.

ErrorBoundaryContainer = require('react-error-guard').DeveloperErrorBoundary;

I had to do ugly variant, but would be nice to correct it :)

const DeveloperErrorBoundary = require('react-error-guard/lib/DeveloperErrorBoundary').default

Any way to alter CSS specially in production mode?

Hey,

You did great job with default CSS, I'm wondering is there any way to alter or even disable default CSS, specially in production mode?

Thanks.

Main container should have overflow: auto, long errors needs scroll bar

Hey,

Consider adding height: 100%; overflow:auto; to the main container (element with position: fixed;)

I use Firefox btw and didn't test other browsers.

Thanks.

Error boundaries should implement getDerivedStateFromError()

This a new warning coming from freshly released React 16.6.

Warning: ErrorBoundaryComponent: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

I am not sure how it should work just yet, but I suppose it should be adapted to this.

Doesn't work, I got blank page

Hi,

I tired to replace react-error-guard with default react ErrorBoundary, but it doesn't show anything when error happens. (ErrorBoundary works as expected btw)

I also got this in browser console:

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryComponent.

I use:

• React v16.5.0
• Webpack v4.18.0

Would you help me on this?