jchiatt / react-chaos Goto Github PK

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)?

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.

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

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.

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;

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')
      }

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

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