блог на гитхабе:GitHub.com/сахарные турбины…

что такое хаос

Хаос — это Хаос-инженерия Прежде всего, мы должны знать, что такое Хаос-инженерия.

Chaos Engineering возникла в Netflix, а инженеры Netflix создали Chaos Monkey, инструмент тестирования для проверки надежности сервисов. Используя этот инструмент, мы можем случайным образом создавать некоторые проблемы в нашей веб-системе, такие как запуск сетевых исключений, всплески трафика, выходы из контейнера и т. д. Мы можем наблюдать, работает ли наша система так, как мы ожидаем, когда возникают эти исключения. Предполагая, что в сценарии, когда всплеск трафика превышает пропускную способность, будет ли наша система запускать механизм автоматического выключателя для обеспечения стабильной работы функции. Что инструмент делает лучше всего, так это выявляет ошибки до того, как они нанесут значительный ущерб, давая инженерам достаточно времени и возможностей для устранения проблемы. Со временем гибридные инструменты превратились в методологию, помогающую инженерам выявлять проблемы на ранней стадии и своевременно их устранять.

В настоящее время многие крупные фабрики в Китае используют соответствующие методы хаотической инженерии, но большинство из них практикуют хаотическую инженерию в области бэк-энда, и относительно немногие практикуют хаотичную инженерию во фронт-энде. Во фронтенде, как реализовать хаотичную методологию и идеи?

Компоненты Хаоса

Когда я недавно посещал github, я нашел библиотеку с открытым исходным кодом, которая делала реагирующие компоненты хаотичными.react-chaos. Функция этого компонента очень проста.Он предоставляет компонент более высокого порядка.Функция компонента более высокого порядка состоит в том, чтобы позволить компоненту генерировать случайное исключение Throw Exception через случайное число. Если в вашем компоненте нет кода для обработки исключений, компонент не будет отображаться на странице, а в консоли будет отображаться соответствующее сообщение об ошибке. Эффект ошибки показан на следующем рисунке:

Давайте посмотрим на его исходный код.

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

Компонент высокого порядка withChaos вернет входящий исходный компонент после его упаковки компонентом Chaos. Chaos не имеет другой цели, кроме реализации логики, связанной с хаосом. Ниже приведен исходный код Chaos.

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

В компоненте Chaos значение, возвращаемое функцией createChaos, используется для определения необходимости рендеринга дочернего компонента.

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

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

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

Основная логика функции createChaos заключается в создании случайного числа для реализации случайных исключений, создаваемых компонентом.

Хотя функция и принцип этой библиотеки просты, на самом деле это очень хорошая практика хаосного мышления во внешнем интерфейсе. Это позволяет вам определить, имеют ли ваши реагирующие компоненты относительно полный механизм обработки исключений кода.

построить плагин

Если вы хотите, чтобы компонент имел функцию случайного генерирования исключений, вам нужно HOC компонента через withChaos of react-chaos. Когда у вас много компонентов в вашем проекте и вы хотите добавить эту функцию, если каждый компонент вручную с Chaos, а затем возвращается, рабочая нагрузка будет относительно большой. Поэтому я написал здесь плагин для Babel, который может автоматически оборачивать компонент реакции с помощью withChaos и возвращать его при сборке веб-пакета.

Адрес на гитхабе:

GitHub.com/сахарные турбины…

Что делает этот плагин, так это преобразует исходный код в код с помощью вызова withChaos за счет возможности манипулировать AST, предоставляемым babel.

import React from 'react'

function Hello(){
    return (
        <div>Hello</div>
    )
}

export default Hello;

после преобразования

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

function Hello(){
    return (
        <div>Hello</div>
    )
}

export default withChaos(Hello, |chaosLevel|);

С помощью этого плагина вы можете легко добавить реагирующий хаос в свой проект.