jchiatt / react-chaos Goto Github PK

View Code? Open in Web Editor NEW

595.0 5.0 10.0 1.91 MB

Chaos Engineering for your React apps.

License: MIT License

JavaScript 4.44% TypeScript 95.56%

react chaos-engineering ui-testing ux-testing chaos-theory

react-chaos's Introduction

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

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.

react-chaos's People

Contributors

Stargazers

Watchers

Forkers

alexlecco thomas-programmierer karlhorky lzhwweb jasondtgt regalius alexrogalskiy sankethchebbi jancajthaml euphemia1

react-chaos's Issues

Nothing is exported?

Looking into /dist in the npm packaged bundle - there's nothing in the index.js?

         'use strict'

      if (process.env.NODE_ENV === 'production') {
        module.exports = require('./chaos-react.cjs.production.js')
      } else {
        module.exports = require('./chaos-react.cjs.development.js')
      }

Chaotic Interaction

Love that you’ve taken up this effort!

What are your views on a Chaos actor that performs random interaction with the UI? Eg clicking buttons, entering text in inputs etc.

While this does not really simulate typical user interaction, perhaps it can highlight issues around what should be interactive at any given time (contrived example is to disable a button that triggers some async action)?

the newest npm package wrong?

Hi,

I try to install the the newest react-chaos(version 0.1.0?) and have a try.
I found that you may don't publish release files to npm.

Best.

React hooks

Looks like a really nice project!

I think having a useChaos hook can be really useful and will also won't encapsulate the wrapped component

runtime error of this package

error - ./node_modules/react-chaos/dist/index.js:7:0
Module not found: Can't resolve './chaos-react.cjs.development.js'

Props not passed when trying to use Chaos in production

Hey, I was looking a the code and I noticed that here: https://github.com/jchiatt/react-chaos/blob/master/src/index.tsx#L17
The props are not passed down to the WrappedComponent. It should probably be

return (props) => <WrappedComponent {...props} />;

or just:

return WrappedComponent

Module not found: Error: Can't resolve './chaos-react.cjs.development.js' in '/home/xxxxx/chaos-demo/node_modules/react-chaos/dist

Hi, I am experiencing this error when I use the package.

Compiled with problems:
×
ERROR
Cannot find module './chaos-react.cjs.development.js'
    at webpackMissingModule (http://localhost:3000/static/js/bundle.js:7050:69)
    at ./node_modules/react-chaos/dist/index.js (http://localhost:3000/static/js/bundle.js:7050:176)
    at options.factory (http://localhost:3000/static/js/bundle.js:41417:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:40840:33)
    at fn (http://localhost:3000/static/js/bundle.js:41074:21)
    at ./src/App.js (http://localhost:3000/static/js/bundle.js:17:69)
    at options.factory (http://localhost:3000/static/js/bundle.js:41417:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:40840:33)
    at fn (http://localhost:3000/static/js/bundle.js:41074:21)
    at ./src/index.js (http://localhost:3000/static/js/bundle.js:119:62)
ERROR in ./node_modules/react-chaos/dist/index.js 6:2-62
Module not found: Error: Can't resolve './chaos-react.cjs.development.js' in '/home/xxxxx/chaos-demo/node_modules/react-chaos/dist'

What I tried

Deleting package-lock.json and running npm install
Verified that the module 'react-chaos' is installed in my project by running npm list react-chaos

my code

import React from 'react';
import withChaos from 'react-chaos';

// Define a component
const ComponentToWrap = () => {
  // Simulate an error
  if (Math.random() < 0.5) {
    throw new Error('Oops! Something went wrong.');
  }

  return <p>I may have chaos.</p>;
};

// Wrap the component with Chaos
const ComponentWithChaos = withChaos(ComponentToWrap, 8, 'Custom error message: Chaos level 8');

// Create a component with Chaos level 8 and a custom error message
const App = () => {
  return (
    <div>
      <h1>React Chaos Demo</h1>
      <ComponentWithChaos />
    </div>
  );
};

export default App;

Think through public API for Chaos component

This is a first pass at what the API for Chaos could look like. Suggestions welcome!

<Chaos
  level={5}
  message="a custom error message"
  shallow
  depth={3}
  statelessOnly
  statefulOnly
  monkeys
  disasters={[
    "network",
    "language",
    "time",
    "location",
    "machine"
  ]}
>
  <SomeComponent />
  <AnotherComponent />
</Chaos>

`level`

This is a number (1-10) that allows you to set the likelihood of chaos occurring.

`message`

This is a custom error message you can pass in that will be displayed as the message when an error is triggered.

`shallow` & `depth` (Children & Nested Components)

Ideally, one should be able to wrap a single component, a component with children, or a component with grandchildren (possibly even their entire application), with Chaos.

It could have a depth prop that allows you to explicitly set the number of grandchildren to apply chaos to. It could also recursively apply chaos to all grandchildren unless you pass in a shallow prop, in which case chaos would only be applied to the immediate children.

`statelessOnly` & `statefulOnly`

These props would allow you to only apply potential chaos to stateless components or stateful components.

`monkeys`

This will be a special surprise. 🐒

`disasters`

This will allow you to specify the types of chaos that could occur. I think there will be a lot of new types in the future, but off the top of my head I thought about those listed. I think there's also potential for React-specific types of chaos, such as causing random re-renders and such, but only insofar that it mimics chaos that could actually occur in the real world.