Cloudflare 서비스 장애 발생 시 오류 UI 개발기

가상화폐 시세 테이블 React 앱 개발 도중에 계속 생각했던 것이 새로 데이터를 계속 가져와서 데이터를 변경해줄 때마다 중간에 오류가 발생하였을 때 UI 적으로 방문자들에게 오류가 발생했음을 실시간으로 보여주고 싶었습니다. 이 앱을 개발하면서도 가상화폐 시세가 고정되어있는 경우도 있으니 실제로 데이터가 새로 갱신되고 있는데 계속 보고 있는 경우도 있어서 개발자 입장에서도 실제로 데이터를 제대로 가져오고 있는지 확인이 가능했으면 좋겠다 싶었습니다.

물론 구글 크롬의 ReactJS 확장프로그램을 설치하면 해당 정보들을 확인이 가능하지만 일반적으로는 이러한 정보의 확인이 불가능하기 때문에 개발 필요성을 계속 생각하고 있었습니다. 게다가 마침 어제 Cloudflare의 서비스 장애가 발생하면서 Cloudflare를 사용하고 있는 모든 사이트가 영향을 받았습니다.

Cloudflare System Status의 오류 초기

해결책을 반영하고 결과를 모니터링한다는 알림

오류 해결 알림

몰랐던 사실이지만 Bithumb의 API도 Cloudflare 서비스를 사용하고 있었고 당연히 데이터를 빗썸API를 통해서 가져오는 제 React 앱에도 영향을 주고 있었습니다. 어느 순간 콘솔을 확인해보니 2000개가 넘는 오류가 확인되었었습니다. 다만 당시에는 제 앱에 Bithumb API에서 가져오는 success을 의미하는 0000 데이터 외의 데이터가 발생하였을 시 대응을 고려하지 않았기에 콘솔로 오류가 출력되고 있었던 것입니다.

우선 Bithumb API의 경우 JSON 데이터에서 데이터에 가져오는데 실패하였을 경우에 response.data.status 항목에서 0000 이 아닌 다른 숫자를 반환합니다.

다만 기존의 코드에서 0000일 때를 가정하고 코드를 작성한 탓에 else문만 하나 추가시켜 this.setState로 오류 상황일 때를 가정해주면 되어서 개발하기 매우 편했습니다.

    if (response.data.status === '0000') {
      delete response.data.data['date'];

      // console.log(response.data.data)
      // console.log(Object.keys(response.data.data));
      for (let [key, value] of Object.entries(response.data.data)) {
        if (Math.sign(value['24H_fluctate_rate']) === 1) {
          chart.push({
            key: key,
            Price: `${value.sell_price}원`,
            FluctateRate: `${value['24H_fluctate_rate']}`,
            FluctateRate24: `${value['24H_fluctate']}`,
            Volume: `${Number(value.volume_7day).toFixed(5)} ${key}`,
          });
        } else {
          chart.push({
            key: key,
            Price: `${value.sell_price}원`,
            FluctateRate: `${value['24H_fluctate_rate']}`,
            FluctateRate24: `${value['24H_fluctate']}`,
            Volume: `${Number(value.volume_7day).toFixed(5)} ${key}`,
          });
        }
      }

우선 title에서 해당 UI 항목을 보여줄 것이기 때문에 React Component Table에서 제공하는 title에 실패 시 출력될 UI를 입력하고 CSS로 적당히 UI를 표시하게 하였습니다.

      this.setState({
        statue: status,
        result: 'fail',
        title: (
          <div>
            <div className="logoContainer">
              <a href="https://www.bithumb.com/">
                <img
                  src="/images/bithumb.png"
                  alt="bithumb LOGO"
                  className="logo"
                />
              </a>
            </div>
            <div id="statusFail">{status}</div>
            <p className="apiFail"> API is not wokring. Something is Wrong</p>
          </div>
        ),
      });

뭔가 진행되고 있는 빙글빙글 돌아가는 이미지를 넣어줄까도 싶었지만 SVG라던가 CSS로도 구현이 가능하다고 해서 찾아보니 아래와 같이 만들 수 있는 방법이 있었습니다. 

See the Pen Super Simple CSS Spinner by Thomas Mandelid (@mandelid) on CodePen.

 

정상적으로 작동될 때의 UI

정상적으로 API로부터 데이터를 받아오지 못했을때의 UI

이렇게만 해도 사용자들에게 현재 웹사이트가 정상적으로 데이터를 실시간으로 받아오고 있는지 확인이 가능하게 시각적으로 표현이 가능하도록 합니다. 물론 데이터를 받아오지 못할 경우 테이블도 로드되지 않도록 설정하였습니다.