Узнайте, кто рендерит компонент при отладке React

Question

Допустим, в моем приложении MyComponent отрисовано в нескольких разных местах. Кто-то пропускает плохие реквизиты и которые вызывают ошибку в коде компонента. Я делаю паузу на ошибке, но я не знаю, какой компонент мне оказал? Какой компонент визуализировал этот компонент? Есть ли какой-нибудь способ увидеть «трассировку стека» экземпляров компонентов, которая привела к этому рендеру?

Answer 1

Да, посмотрите здесь: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#component-stack-traces

В основном вы можете использовать componentDidCatch.

При использовании React 15 или ниже

class MyComponent extends React.Component {
  fallbackProps = {color: "red"};

  render() {
    const propsAreCorrect = checkProps(this.props);
    if(!propsAreCorrect) alert("aah, something bad happend!");

    const props = propsAreCorrect ? this.props : this.fallbackProps;
    return <div color={props.color}></div>;
  }
}

Answer 2

Вы можете использовать плагин React chrome devtools, чтобы увидеть обработанное дерево компонентов. В настоящее время здесь:

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

При выборе компонента вы даже можете видеть предоставленные реквизиты.

Если вам нужна информация отладчика о перерывах, например, вы можете использовать механизмы проверки ошибок реагирования (согласно ответу Никиты)