Skip to content

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

License

Notifications You must be signed in to change notification settings

jburghardt/react-guard

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Installation

npm install react-guard --save

or

yarn add react-guard

Usage

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>
})

License

MIT © Sasha Koss

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.1%
  • Shell 0.9%