ReactJS - границы ошибок не работают должным образом - PullRequest
Новая
       10

ReactJS - границы ошибок не работают должным образом

1 голос
/ 22 апреля 2020

Справочная информация: React Версия: 16.13.1 Браузер: Chrome Версия - 81.0.4044.122

Хотя в приведенном ниже фрагменте кода используется ErrorBoundary, в браузере выдается ошибка. Обработанная ошибка отображается в течение нескольких миллисекунд, затем фактическая ошибка отображается в браузере. Может кто-нибудь, пожалуйста, помогите мне с этим.

Ниже приведен весь фрагмент кода: 


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

    componentDidCatch(error, errorInfo) {
      // Catch errors in any components below and re-render with error message
       this.setState({
         error: error,
         errorInfo: errorInfo
       })
      // You can also log error messages to an error reporting service here
    }

    render() {
      if (this.state.errorInfo) {
        // Error path
        return (
          <div>
            <h2>Something went wrong.</h2>
          </div>
        );
      }
      // Normally, just render children
      return this.props.children;
    }  
}

class BuggyComponent extends Component {
  constructor(props) {
      super(props);
      this.state = { Clicked: "false" };
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      this.setState({
          Clicked: "true"
      });
    }

    render() {
      if (this.state.Clicked === "true") {
        // Simulate a JS error
        throw new Error('I crashed!');
      }
      return <button onClick={this.handleClick}>{this.props.Label}</button>;
    }
}

function App() {
  return (
    <div>
      <CustomErrorBoundary>
        <BuggyComponent Label="I catch exceptions"/>
      </CustomErrorBoundary>
    </div>
  );
}

export default App;

1 Ответ

1 голос
/ 22 апреля 2020

Это поведение по умолчанию в непроизводственных сборках.

https://reactjs.org/docs/error-boundaries.html#component -stack-traces

...