지속적인 배포로 @loadable/component 반응

@loadable/component React Library를 지속적인 배포/배포 파이프라인과 결합하면 배포가 진행되는 동안 사용자가 탐색하는 동안 웹 사이트가 손상될 수 있습니다. 그리고 그것은 좋지 않습니다.

여기에 예 ⤵



탐색하는 동안 브라우저는 새 버전으로 대체되어 더 이상 사용할 수 없는 정적 파일을 가져오는 것을 목표로 합니다.

웹 사이트가 더 이상 작동하지 않고 무엇을 해야 하는지 알려주지 않기 때문에 사용자 불만을 야기합니다.

링크드인 솔루션

최근에 LinkedIn을 사용하셨다면 다음 화면을 보셨을 것입니다.



그리고 그것이 제가 같은 문제에 적용한 솔루션입니다.

솔루션 적용

내부 구성 요소 오류를 처리하는 ErrorBoundary 구성 요소를 생성하고 사용자에게 새로 고침을 요청하십시오.

import React from 'react';

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        error: null,
        errorInfo: null,
      };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({
        error,
        errorInfo,
      })
      // You can also log error messages to an error reporting service here
    }

    render() {
      if (this.state.errorInfo) {
        // Error path
        return (
          <div className="error-boundary">
            <h2>Something went wrong 😖</h2>
            <button onClick={() => window.location.reload()}>Reload Application</button>
          </div>
        );
      }
      // Normally, just render children
      return this.props.children;
    }
  }

  export default ErrorBoundary;

그런 다음 <Router>...</Router> 을 다음과 같이 ErrorBoundary 구성 요소로 래핑합니다.

function App() {
  return (
    <ErrorBoundary>
      <Router>
        ...
      </Router>
    </ErrorBoundary>
   );
}

그런 다음 예제 솔루션은 다음과 같습니다.

소스 코드

https://github.com/aleixmorgadas/react-loadable-component-with-continuous-deployment의 소스 코드

⚡️ 피드백 환영 !(•̀ᴗ•́)و ̑̑ ⚡️

이 저작물은 Creative Commons Attribution-NonCommercial 4.0 International License에 따라 라이선스가 부여되었습니다.