React-chaos로 혼돈 프로젝트를 해보도록 하겠습니다.

Ubiregi Advent Calendar 2019 3일째.
다음날 계속해서 전단 엔지니어 코걸이 책임진다.
이번에는 간단하게 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로 표시됩니다.

그럼 바로react-chaos를 <About />에 적용합시다.
첫 번째 파라미터는 응용된 구성 요소이고, 두 번째 파라미터는 오류의 발생 빈도이며, 세 번째 파라미터는 오류 메시지입니다.
이번 오류 발생 빈도가 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_모듈/react-chaos/dist 산하를 보십시오. 출력 오류와 같이 index입니다.js만 존재합니다.아~
자료 파일 라이브러리의 issue를 검색하면 이런 것을 발견할 수 있습니다.
the newest npm package wrong? #십
This is still an issue.
그렇구나.
npm의 등록표가 아니더라도git의 저장소를 직접 지정하면 안 됩니다.그나저나 빌드는 인기가 많아요.

재도전

그러나 demo 이동하고 있기 때문에 이전 버전을 지정하면 구축할 수 있을 것이다.
react-chaos v1.0.6
현재 v는 0.1.0이고 그 전 v는 1.0이다.6 파괴적인 변경이 있지 않습니까?아, 별로 신경 안 써요.

yarn add -D [email protected]

yarn start/about를 방문하면 화면이 하얗게 변한다.컨트롤러를 열 때 핥은 오류 정보를 출력합니다.성공했어.

어떻게 처리합니까?

React에서 예기치 않은 오류가 발생하면 대체 화면을 표시하는 방법이 있습니다.
설치는 이런 느낌입니다.

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으로 낮아져 발생하기 어렵다.

마지막

설치를 소개할 수 있을 줄 알았는데 오류가 발생하는 조건이 복잡해서 멈췄어요.나는 수학을 할 줄 모른다.