フロントエンドのカオスコンポーネントの予備調査

カオスとは

カオスはカオスエンジニアリングです。まず、カオスエンジニアリングとは何かを知る必要があります。

カオスエンジニアリングはNetflixに端を発し、Netflixエンジニアはサービスの信頼性を検証するためのテストツールであるカオスモンキーを作成しました。このツールを使用すると、ネットワークの異常、トラフィックの急増、コンテナの出口などの異常をトリガーするなど、Webシステムにランダムに問題を発生させることができます。これらの異常が発生した場合、システムが期待どおりに動作しているかどうかを確認できます。 。トラフィックが急増して容量を突破するシナリオで、システムがヒューズメカニズムをトリガーして、安定した機能動作を保証すると仮定しますか？このツールの最大の役割は、大きな損失が発生する前に障害を明らかにし、問題を修正するための十分な時間と機会をエンジニアに提供することです。時間の経過とともに、ハイブリッドツールは、問題を事前に明らかにし、問題を時間内に修正する方法についてエンジニアをガイドする一連の方法論に進化してきました。

現在、国内の大規模工場の多くがカオスエンジニアリングの実践に関連していますが、それらのほとんどはバックエンド分野にあり、フロントエンドで実践されているカオスエンジニアリングは比較的少数です。フロントエンドで、混沌とした方法論とアイデアを実装する方法は？

混沌としたコンポーネント

最近githubにアクセスしたときに、reactコンポーネントをカオスにするオープンソースライブラリreact-chaosを見つけました。このコンポーネントの機能は非常に単純で、高レベルのコンポーネントを提供します。高レベルのコンポーネントの機能は、ランダムな数値を使用してコンポーネントをランダムにスロー例外にすることです。コンポーネントに例外を処理するコードがない場合、コンポーネントはページにレンダリングされず、対応するエラーメッセージがコンソールに表示されます。エラーが発生した場合の影響を次の図に示します。

彼のソースコードを見てみましょう

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関数のコアロジックは、ランダムに番号を作成して、例外をランダムにスローするコンポーネントを実装することです。

このライブラリの機能と原理は単純ですが、実際にはフロントエンドでのカオス思考の非常に優れた方法です。これにより、reactコンポーネントにコード例外の比較的完全な処理メカニズムがあるかどうかを検出できます。

プラグインをビルドする

コンポーネントに例外をランダムにスローする機能を持たせたい場合は、react-chaosのwithChaosを使用してコンポーネントをHOCする必要があります。プロジェクトに多数のコンポーネントがあり、この関数を追加する場合、各コンポーネントが手動でwithChaosに移動してから戻ると、ワークロードは比較的大きくなります。そこで、ここにbabelプラグインを作成しました。これは、reactコンポーネントをwithChaosで自動的にラップし、Webpackのビルド時に返すことができます。

Githubアドレス：

https://github.com/SugarTurboS/babel-plugin-react-chaos

このプラグインが行うことは、babelが提供するASTを操作する機能を介して、withChaos呼び出しを使用してソースコードをコードに変換することです。

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