Help us understand the problem. What is going on with this article?

react-chaosでカオスエンジニアリングをやってみよう

Ubiregi Advent Calendar 2019 3日目です。

2日目に引き続きフロントエンドエンジニアのコジャが担当します。

今回は簡単にReactでカオスエンジニアリングが体感できるreact-chaosをやってみます。

カオスエンジニアリングって何?

何でしょう。私も今日に至るまで言葉は知っていましたが、実際に何をするのか、何でするのかはわかりませんでした。

ざっくり調べると「擬似的に障害を起こし、実際の障害にも耐えられるようにする」ことだそうです。

詳細は以下のQiita記事がわかりやすかったです。

カオスエンジニアリングと聞いてカオスになった人必見

react-chaosって?

react-chaosはReactで作られたアプリケーションに対して、意図的にエラーを発生させるHigh Order Componentです。

ただ、READMEを見てみると、以下の一文があります。

🛑 Pre-Installation Notes

  • This is currently WIP and a proof-of-concept.
  • There is nothing in place to help ensure good performance practices. Use at your own risk.

実運用はまだのようですね。

なにはともあれ

やっていきます。

まずは、react-router-domを使用して、簡単なルーティングするようなアプリを作ってみます。

const App = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Switch>
                    <Route exact path='/'><Home /></Route>
                    <Route path='/about'><About /></Route>
                    <Route path='/dashboard'><Dashboard /></Route>
                </Switch>
            </Layout>
        </BrowserRouter>
    )
}

動きはこんな感じです。

見ての通り、/がHome、/aboutがAbout、/dashboardがDashboardと表示されます。

before.gif

では早速、<About />にreact-chaosを適用してみましょう。
第一引数は適用対象のコンポーネント、第二引数はエラーの発生頻度、第三引数はエラーメッセージになります。

今回エラー発生頻度を10にしたので、/aboutにアクセスした時、必ずエラーが発生することになります。

import React from 'react';
import withChaos from 'react-chaos/src/index.tsx';


const About = () => {
    return (
        <div>
            <h2>About</h2>
        </div>
    );
}

export default withChaos(About, 10, 'カスタムエラーだよ');

yarn start します。

./node_modules/react-chaos/dist/index.js
Module not found: Can't resolve './chaos-react.cjs.development.js' in '/Users/koja/workspace/react-chaos-example/node_modules/react-chaos/dist'

失敗します。なんでや。

動かないんだ...

まぁまだ慌てる段階ではない。node_modules/react-chaos/dist配下を見てみると、出力エラーの通り、index.jsしか存在しませんでした。へぇ~

リポジトリのissueを漁るとこんなのが。

the newest npm package wrong? #10

This is still an issue.

なるほどね。

npmのレジストリでなく、直接gitのリポジトリを指定してもダメでした。というかbuildがコケてた。

再挑戦

ただ、demoは動いているので以前のバージョンを指定すれば、ビルドできるはずです。

react-chaos v1.0.6

現vは0.1.0でその前のvは1.0.6ってことは破壊的変更があったんでしょうか?まぁあまり気にしないことにします。

yarn add -D react-chaos@1.0.6

yarn start して /aboutにアクセスしてみると、画面が真っ白になります。コンソールを開くと舐めたエラーメッセージが出力されています。成功です。

スクリーンショット 2019-12-03 21.12.35.png

どうやって対処する?

Reactでは予期せぬエラーが発生した時、代わりの画面を表示するError Boundaryなる方法があります。

https://ja.reactjs.org/docs/error-boundaries.html

実装はこんな感じ。

import React, { Component } from 'react'

export default class ErrorBoundary extends Component {
    constructor(props) {
        super(props)
        this.state = { hasError: false }
    }

    static getDerivedStateFromError(error) {
        return { hasError: true }
    }
    render() {
        return this.state.hasError ? <h1>一時的なエラーが発生しています</h1> : this.props.children;
    }
}

エラーが発生しうるコンポーネントを子要素に持つようにします。今回は<About />が対象です。

const App = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Switch>
                    <Route exact path='/'><Home /></Route>
                    <Route path='/about'>
                        <ErrorBoundary>
                            <About />
                        </ErrorBoundary>
                    </Route>
                    <Route path='/dashboard'><Dashboard /></Route>
                </Switch>
            </Layout>
        </BrowserRouter>
    )
}

こうすればエラーが発生した時、画面がホワイトアウトするのを防いで、用意したエラーメッセージを表示してくれます。下記のgifではエラーの発生頻度を3まで落としたので、なかなか発生しませんでした。

error.gif

最後に

実装まで紹介できるかなと思ってたんですが、Errorを発生させる条件が割と複雑だったのでやめました。数学ができない。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした