서버 쪽 렌더링 후 React-Router 클라이언트 쪽 오류 처리

Question

React 응용 프로그램에 서버 쪽 렌더링을 사용하고 있지만 잘못되었을 때 오류 페이지를 표시하기 위해 논리를 감쌀 수 없습니다. 예를 들어

:

• 사용자 문서를 가져 오는 동안 /article/123
• 뭔가 잘못 요청 나는 500 오류 페이지

서버 측 부분은 쉬웠다에게 보여 드리고자합니다

. 나는 React-Router에게 나의 오류 구성 요소를 제공하라고 말한다. 여태까지는 그런대로 잘됐다.

그러나 페이지가 제공 될 때 클라이언트 측 JavaScript가 실행되고 렌더링이 수행됩니다. React-Router는 /article/123이라는 URL을보고 기사를 표시하는 구성 요소를로드합니다. 그러나 데이터가 없으므로 실패합니다.

오류를 표시한다는 것을 클라이언트 측에 알리는 방법이 있습니까? 대신 구성 요소?

내가 생각할 수있는 유일한 생각은 다음과 같습니다. 글로벌 redux 상태에 오류를 추가하십시오. 구성 요소를 렌더링하기 전에 오류가 전역 상태에 있는지 확인하고 대신 오류 구성 요소를 표시하십시오. 그러나이 단점은 모든 구성 요소에서 해당 확인 논리를 구현해야한다는 것입니다. 이 문제를 해결하는 좀 더 우아한 방법이 있어야합니다.

Answer 1

클라이언트 측 오류 처리를 구현하는 몇 가지 방법이 있습니다. Higher Order Components를 사용하면 가장 잘 작동합니다. 서버 응답에서 오류를 검사하는 랩퍼 구성 요소를 작성합니다. 발견되면 해당 오류 페이지를 제공하십시오. HOC가 오류를 감지하지 못하면 사용자가 원래 요청한 구성 요소를 제공하십시오.

여기 HOC 구현하는 방법에 대한 좋은 설명입니다 : https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e