React 오류 경계

개술
일상적인 업무 개발 과정에서 우리는 업무 자체의 수요 실현에 많은 관심을 기울였다.프로그램의 이상 처리에 대한 정력이 비교적 적을 수 있다.그러나 한 프로그램의 건장성에 있어서 이상 처리는 매우 중요한 부분이다.잘못된 경계 이것은 React16 버전 이후 홈페이지에서 제공한 잘못된 강등 처리 방안이다.
일부 문제를 해결했다
위의 문서를 보면 이 잘못된 경계 해결 방안은 아래의 몇 가지 상황의 이상만 해결할 수 있다.

렌더링 중 render

수명 주기 방법

전체 구성 요소 트리의 구조 함수

ok, 이 3 중 이상 발생만 포착할 수 있습니다.
그러나 이러한 오류는 거품을 일으킬 수 있다. 즉, 구성 요소의 맨 위에 Error Boundary 구성 요소를 사용하면 전체 구성 요소 트리의 이상을 포착할 수 있고, 당연히 여러 군데 끼워서 사용할 수도 있다.
이것은 설명할 필요가 없다. 공식 문서의 사용 설명은 이미 충분히 명확하다.
해결할 수 없는 문제
오류 경계에서 캡처할 수 없는 오류:

이벤트 처리

비동기 코드

자체 던진 오류

서버 렌더링

그렇다면 이런 장면에서의 이상을 어떻게 포착해야 하는가?다음은 가능한 해결 방안을 대략적으로 분석해 보겠습니다.
try/catch
우리가 본능적으로 생각하거나 자주 사용하는 것은try/catch 문장일 수도 있다.그것은 프로그램의 붕괴를 피하기 위해 우리가 포획한 많은 이상을 확실히 도울 수 있다.
물론try/catch는 일로영일하지 않습니까? 물론 아닙니다.그것은 매우 뚜렷한 두 가지 단점이 존재한다.

동기화 프로그램에서 발생하는 이상만 포착

글씨 내보내기trg/catch 정말 귀찮아요

unhandledrejection
현재 프로미스는 이미 엉망진창이 되어 범람하여 재해를 입었다.곳곳에 Then이 있지만 캣츠가 없는 사례가 곳곳에서 볼 수 있다.이때 이상이 발생하면 콘솔에서 Uncaught(in promise) 등 error를 볼 수 있다.이 때 unhandledrejection 오류 이벤트를 감청할 수 있으며 프로미스의 미포획 이상을 처리하는 데 사용됩니다

window.addEventListener("unhandledrejection", event => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
});

error
최대 비장의 카드, error 사건을 감청하는 것, 이전에 오류 로그 수집 시스템을 만들었는데 주로 이것에 의존했다.

window.addEventListener('error', this.onError, true);

통합 시나리오 없음
위에서 대략적으로 그렇게 많이 나누었는데, 아, 보기에는 그래도 짜증나. 자기가 여기저기 쓰고 여기저기 수동으로 처리해야 돼.추상적으로 해주시면 안 돼요? 바퀴가 있나 없나...얼른 개원 커뮤니티 뒤져봐.npm.js 홈페이지까지 키워드를 입력하면 정말 많이 나온다.

react-error-catch

react-error-catcher

......

총결산
이것은 단지 간단한 사고와 기록일 뿐, 현재 매우 깊이 연구할 정력이 없다.그러나 전체적으로 이상을 해결하는 것은 바로 그 기초적인 것들이다. 기초가 모든 초석이다.나머지는 어떻게 추상적으로 비교적 쓰기 좋은 창고를 봉합하는가이다. 이것이 바로 바퀴를 만드는 솜씨이다.그러나 개원 지역사회의 자원이 매우 방대하기 때문에 참고하여 사용할 수 있다.