Making blog:github.com/SugarTurboS…

What is chaos

Chaos is chaos engineering, and first we need to know what chaos engineering is.

Chaos Engineering originated at Netflix, where engineers created Chaos Monkey, a testing tool to verify service reliability. Using this tool, we can randomly create some problems in our Web system, such as triggering network exceptions, traffic surge, container exit and so on. We can observe whether our system still operates as we expect when these exceptions occur. Suppose that when the traffic surge exceeds the carrying capacity, whether our system will trigger the circuit breaker mechanism to ensure the stable operation of functions? The biggest benefit of the tool is that it exposes faults before they cause significant damage, giving engineers enough time and opportunity to fix them. Over time, the hybrid tool evolved into a methodology to guide engineers on how to expose problems and fix them in time.

At present, many large domestic factories have chaos engineering practices, but most of them are in the back-end field, and relatively few in the front-end. In the front end, how to land the methodology and ideas of chaos?

Chaotic component

React-chaos is an open source library that makes react components chaotic. The function of this component is very simple. It provides a higher-order component. The function of this higher-order component is to Throw a random Exception of the component through a random number. If your component does not have code to handle exceptions, it will not render on the page and will display an error message in the console. This is what happens when something goes wrong:

Let’s look at his source code

const withChaos = (
  WrappedComponent: React.ElementType,
  level: Level, errorMessage? : string, runInProduction? : boolean ):WithChaosReturn= > {
  if (process.env.NODE_ENV === 'production' && !runInProduction) {
    console.warn(
      `You tried to use React Chaos in production. You probably didn't mean to do this. Chaos will not occur in production.`
    );
    return WrappedComponent;
  }

  if (process.env.NODE_ENV === 'production' && runInProduction) {
    console.warn('You are running React Chaos in production.');
  }
  return class extends React.Component {
    render() {
      return (
        <Chaos
          level={level}
          errorMessage={errorMessage}
          runInProduction={runInProduction}
        >
          <WrappedComponent {. this.props} / >
        </Chaos>); }}; };Copy the code

The higher-order component withChaos returns the original component with the Chaos component wrap. Chaos has no other purpose than to implement Chaos related logic

export function Chaos({ children, level, errorMessage, runInProduction, }: Args) :JSX.Element | null {
  return createChaos(level, errorMessage, runInProduction) ? null : children;
}
Copy the code

The Chaos component determines whether to render the Children component by the value returned by the createChaos function

if (process.env.NODE_ENV === 'production' && !runInProduction) {
    /** Chaos will not occur in production. */
    return false;
  }

  if (typeoflevel ! = ='number') {
    throw new Error(
      `Please provide a number level. You provided: The ${typeof level}`
    );
  }

  constchaosLevel = level ! = =5 ? convertChaosLevel(level) : 0.5;
  const chaosOn = Math.random() >= chaosLevel;
  if (chaosOn) {
    throw new Error(errorMessage);
  }
  return false;
Copy the code

The core logic of the createChaos function is to create a random number for the component to randomly throw exceptions.

Although this library is simple in function and principle, it is actually a very good practice of chaos thinking at the front end. This lets you check if your React component has a decent handle for code exceptions.

Build the plug-in

If you want the component to randomly throw exceptions, you need to HOC the component withChaos of react-chaos. When you have a lot of components in your project and want to add this functionality, it can be a lot of work to manually withChaos and return each component. So I wrote a Babel plugin that automatically wraps the React component with withChaos when WebPack is built and returns it.

Making address:

Github.com/SugarTurboS…

All this plug-in does is convert the source code to code with withChaos calls through Babel’s ability to manipulate AST

import React from 'react'

function Hello(){
    return (
        <div>Hello</div>)}export default Hello;
Copy the code

After the transformation

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

function Hello(){
    return (
        <div>Hello</div>)}export default withChaos(Hello, |chaosLevel|);
Copy the code

With this plugin, you can easily add React-Chaos to your projects.