Skip to content
Chaos Engineering for your React apps.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.netlify
demo
src
test
.editorconfig
.gitignore
CONTRIBUTING.md
LICENSE
README.md
jest.config.js
package.json
todo.md
tsconfig.json
yarn.lock

README.md

🔥🐒💥 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: 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:

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.

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(
  ComponentWillHaveChaos2,
  3,
  'a custom error message, level 3',
  true
);

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

Other Notes

This project uses TSDX.

You can’t perform that action at this time.