React Guard

React Guard helps to prevent White Screen of Death, improves user expirience and assists in the bug hunt.

It patches React, so it wraps every render function (including function components) intro try-catch block.

If an exception occurs during the rendering, it calls specified guard function. The guard function gets the exception object and extra information such as the component props, state and displayName.


npm install react-guard --save


yarn add react-guard


var React = require('react')
var reactGuard = require('react-guard')

// Catch and process component render exceptions.
reactGuard(React, function (err, componentInfo) {
  // Print stacktrace to the console
  console && console.error && console.error(err.stack)

  // Notify Sentry (replace with your service of choice)
  Raven.captureException(err, {
    extra: {
      props: componentInfo.props,
      state: componentInfo.state,
      displayName: componentInfo.displayName

  // Replace failed component with "Failed to render".
  // Use `return null` to render nothing.
  return <div>Failed to render</div>


MIT © Sasha Koss

React Guard

🦄 React Guard automagically catches exceptions from React components, extracts useful debug information and prevents White Screen of Death 👻

React Guard Info

⭐ Stars 91
🔗 Source Code
🕒 Last Update 9 months ago
🕒 Created 8 years ago
🐞 Open Issues 3
➗ Star-Issue Ratio 30
😎 Author kossnocorp