Repository files navigation

Chaos Engineering for your React applications.

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

Blog post:Announcing React ChaosDemo:https://react-chaos.netlify.com/

• 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.

npmi--save-devreact-chaos

First, import the Chaos:

importwithChaosfrom'react-chaos';

Wrap any component with the Chaos:

constComponentToWrap=()=><p>I may have chaos.</p>;constComponentWithChaos=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:

constComponentWithChaos=withChaos(ComponentToWrap);constComponentWithChaos=withChaos(ComponentToWrap,10,'This error message will almost certainly be shown since we are at Chaos level 10.');

Note: The default Chaos level is 5.

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

constComponentWithChaos2=withChaos(ComponentWillHaveChaos2,3,'a custom error message, level 3',true);

• 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 withError Boundaries, this can be a powerful tool to improve the resiliency of your UI components.

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

• Brandon Dail's post on React Error Boundaries and Fault Tolerance
• Brian Holt's talk on Chaos Engineering in the Browser
• Also inspired by watching Jurassic Park the night before writing this

This project uses TSDX.