Chaos Engineering for your React applications.
- 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.
- 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.
- Nested components are not yet supported. Currently, only the immediate children wrapped with
withChaoswill have the potential for Chaos. - Components that return functions / render props are not yet supported.
npm i --save-dev react-chaosFirst, 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(
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 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(
ComponentWillHaveChaos2,
3,
"a custom error message, level 3",
true
);- Inspired by Brandon Dail's post on React Error Boundaries and Fault Tolerance.
- Also inspired by watching Jurassic Park the night before writing this.