Awesome Open Source
Awesome Open Source

🔥🐒💥 React Chaos

Chaos Engineering for your React applications.

What It Does

React Chaos is currently a higher order component that will randomly throw Errors in the component it wraps. The likelihood for the error to throw is based on a level you set when you wrap a component.

Blog post: Announcing React Chaos Demo:

🛑 Pre-Installation Notes

  • This is currently WIP and a proof-of-concept.
  • There is nothing in place to help ensure good performance practices. Use at your own risk.


npm i --save-dev react-chaos


First, import the Chaos:

import withChaos from 'react-chaos';

Wrap any component with the Chaos:

const ComponentToWrap = () => <p>I may have chaos.</p>;

const ComponentWithChaos = withChaos(ComponentToWrap);

You can optionally set a Chaos level between 1 and 10 (the higher the number, the more Chaos 😈) as well as a custom error message:

const ComponentWithChaos = withChaos(ComponentToWrap);

const ComponentWithChaos = withChaos(
  'This error message will almost certainly be shown since we are at Chaos level 10.'

Note: The default Chaos level is 5.

Chaos in Production

By default, React Chaos will not run in production. If you want to override this by passing in true as a 4th parameter like this:

const ComponentWithChaos2 = withChaos(
  'a custom error message, level 3',


  • Because simple UI errors shouldn't bring down your app.
  • This library can help expose areas of your component tree that don't handle errors very gracefully. Used in conjunction with Error Boundaries, this can be a powerful tool to improve the resiliency of your UI components.

What is Chaos Engineering?

Chaos Engineering is the practice of experimenting with entropy on a software system to test its resiliency. You can read more about it here.


Other Notes

This project uses TSDX.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,661) 
react (5,475) 
chaos-engineering (29) 
ui-testing (23)