리액트 베스트 프랙티스의 에러 처리

리액트 베스트 프랙티스의 에러 처리

React에서 컴포넌트를 렌더링할 때(많은 서브컴포넌트가 있는 경우) 어떤 이유로든 JS 오류가 발생할 경우 이를 처리하는 가장 좋은 방법은 무엇입니까?물론 오류를 잡을 수 있지만, 궁극적으로 당신이 렌더링하고자 하는 것은 필요한 정보가 없기 때문에 그러지 못할 수도 있습니다.할 수 있습니다..isRequired 때 .propTypes는 장애발생 시 합니다.

React 16은 앱 전체를 손상시키지 않고 React 컴포넌트 내에서 발생하는 오류를 처리하기 위해 "오류 경계"라는 새로운 개념을 도입했습니다.

오류 경계는 하위 구성 요소 트리의 아무 곳에서나 JavaScript 오류를 감지하고, 이러한 오류를 기록하고, 충돌한 구성 요소 트리 대신 폴백 UI를 표시하는 React 구성 요소입니다.

경계 는 새로운 사이클 되었습니다.componentDidCatch(error, info)다른 라이프 사이클 메서드와 달리 이 메서드는 렌더링 중, 라이프 사이클 메서드 또는 컴포넌트의 하위(모든 손자녀 포함) 컴포넌트의 컨스트럭터에서 오류가 발생한 경우에만 호출됩니다.

코드에서는 에러 경계 컴포넌트는 다음과 같습니다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Error occurred!</h1>;
    }
    return this.props.children;
  }
}

이 에러 경계 컴포넌트는 코드의 통상 컴포넌트로 사용할 수 있습니다.

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

, 방식 또는 , MyComponent는 JavaScript 에러를 발생시킵니다.componentDidCatch 상태를 Of Error Boundary를 하도록 변경합니다.Error occurred!메시지를 표시합니다.

이 새로운 기능은 React 16으로 마이그레이션하기 전에 알아야 할 또 다른 중요한 의미를 담고 있습니다.이전에는, 에러가 발생했을 경우, 페이지를 새로고침 할 때까지 정상적으로 동작하지 않아도, UI가 파손된 채로 있습니다.그러나 리액트 16에서는 에러 경계에서 에러가 처리되지 않으면 앱 전체가 마운트 해제됩니다.

따라서 앱에 오류 경계를 적절히 추가하면 사용자에게 더 나은 환경을 제공할 수 있습니다.따라서 사용자는 UI의 일부 영역이 크래쉬하더라도 앱의 일부와 상호 작용할 수 있습니다.

자세한 내용은 React 공식 문서 또는 이 공식 블로그 게시물을 참조하십시오.이 신기능에 대해 알아야 할 거의 모든 것을 망라하고 있습니다.

이상적으로는 js 오류를 일으킬 수 있는 것은 절대 없어야 합니다.우리는 완벽한 세상에 살고 있지 않다. 하지만 그들을 완화시키기 위해 내가 할 수 있는 몇 가지 일이 있다.

쓰고 있는 수 있는지 해 보세요.
이렇게 하면 안 돼요?'라고 생각하십시오.

handleClick = (e) => {
  e && e.preventDefault()
  // code here
}

handleSomething = (data) => {
  if (Array.isArray(data)) {
    data.reduce(...) // we know this will be here
  }
}

변수를 만들 때는 기본값을 사용하십시오.
의미.const { loading = false, data = [] } = this.props이렇게 하면 데이터 유형의 일관성에 도움이 됩니다.

를 보다 처리하다
컴포넌트의 보류/대기 상태를 반드시 처리해 주세요.(를 들어) (예:)를 수 .Loading★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

render() {
  const { data = [] } = this.props
  return (
    <Loading loading={data.length > 0}>
      <MyComponent data={data} />
    </Loading>
  )
}

로딩 컴포넌트는 어떻게 되어 있을까요?

const Loading = ({ children, loading = false, message = 'Loading...' }) => {
  if (loading) {
    return <span>{message}</span>
  }
  return children
}

.
수 을 쓰거나 때, 여러분은 이 글을 사용할 수 .try catch블럭을 사용하여 기능 구성요소의 예외를 탐지합니다.

const MyComponent = ({ data = [] }) => {
  try {
    return <ul>{data.map( item => <li key={item}>{item}</li> )</ul>
  } catch (error) {
    const message = error.message || 'I broke!'
    return <span className="broken-component">{message}</span>
  }
}

클래스 컴포넌트에서 사용할 수 있습니다.

componentDidCatch(error, errorInfo) {
  // Handle error here.
}

자세한 내용을 알고 싶으시면 의사 선생님들께 좋은 정보가 많이 있습니다.

이것은 제가 말하는 것을 설명하는 기본적인 예에 불과합니다. JS데이 됩니다 예외는 (됩니다.JS 예외는 (검출되지 않은 경우) 1페이지 어플리케이션이 파손됩니다.그러니 네가 그들을 다뤄야 해.
URL 이 무효인 경우는, 404 페이지로 리다이렉트 합니다.구성 요소에 데이터가 필요한 경우 데이터가 렌더링될 때까지 기다리십시오.에서 네스트된 , 「」( 「」)로 불립니다.this.props.myData.obj.something.somethingelse 패스가 항상 것은 그 오브젝트 패스가 항상 거기에 있는 것은 아닐 가능성이 있습니다.각 항목이 정의되지 않았거나 null이 아님을 확인해야 합니다.

크레딧 ★★★★★★★★★★★★★★」
요.get!미!!!!!!!!!!!!!!!!!!!!!

_.get(this.props, 'myData.obj.something.somethingelse') // returns `undefined` if the path is invalid

이 이야기의 교훈은 망가질 수 있는 것들을 포착하기 위해 적극적으로 행동해야 한다는 것입니다.:)

React v16 이상에서는 오류 경계를 사용하는 것이 좋습니다.React 팀의 이 페이지(짧고 좋은 페이지)에서는 기능에 대해 설명합니다.https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html코드펜 데모 링크도 포함되어 있습니다.

UI의 일부에 JavaScript 오류가 발생해도 전체 앱이 중단되지 않습니다.React 사용자의 이 문제를 해결하기 위해 React 16은 새로운 개념의 "오류 경계"를 도입했습니다.

오류 경계는 하위 구성 요소 트리의 아무 곳에서나 JavaScript 오류를 감지하고, 이러한 오류를 기록하고, 충돌한 구성 요소 트리 대신 폴백 UI를 표시하는 React 구성 요소입니다.오류 경계는 렌더링 중, 수명 주기 메서드 및 그 아래 트리 전체의 생성자에서 오류를 포착합니다.

인 '오류 경계'를 .componentDidCatch(error, info)

참조 링크

언급URL : https://stackoverflow.com/questions/36897434/error-handling-in-react-best-practices