🔥🐒💥 React Chaos
Chaos Engineering for your React applications.
What It Does
React Chaos is currently a higher order component that will randomly throw Error
s 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: https://react-chaos.netlify.com/
🛑 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.
Installation
npm i --save-dev react-chaos
Usage
First, import the Chaos:
;
Wrap any component with the Chaos:
const ComponentToWrap = <p>I may have chaos</p>; const ComponentWithChaos = ;
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 = ; const ComponentWithChaos = ;
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 = ;
Why
- 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.
Inspiration
- 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
Other Notes
This project uses TSDX.