Think through public API for Chaos component

[jchiatt]

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.

[joshpitzalis]

This is a really cool project. Thank you for starting it. I'm using it and my first thoughts are that it would be nice if I can pass in a custom error component as well as just a custom message.

So, I want to define an error boundary around different features. the path to recovering from that feature may be different from other features. So instead of just passing a message saying something broke, I could pass in the refresh, correction action, or a link to a better explanation in another page.

I can do that at the moment by using the custome message as a trigger.

const LoginWithChaos = withChaos(Login, 10, 'login');

and then in my error boundary component

render() {
    const { error, eventId } = this.state;
    const { children } = this.props;

    if (error) {
      if (error.message === 'login') {
        return (
          <>
            <p>
              Looks like we are having some Login trouble, please come back in a
              bit. Sorry.
            </p>
            <button>Refresh</button>
          </>
        );
      }
      // render Sentry Feedback Modal
      return showReportDialog({ eventId });
    }
    // when there's not an error, render children untouched
    return children;
  }

but I am just going to have a massive pike of if statements now and it would be so much nice to just pass the custom component into withChaos.