CODEWITHSUNDEEP
javascriptreactjsdebugging
conartist6
conartist6

Reputation: 437

Find out who is rendering a component when debugging React

Let's say I have MyComponent rendered in several different places in my application. Someone passes bad props and which cause an error in the component's code. I pause on the error, but what I don't know is: what component rendered me? What component rendered that component? Is there any way to see the "stack trace" of component instances which led to this render?

Upvotes: 1

Views: 2214

Answers (2)

Nikita Malyschkin
Nikita Malyschkin

Reputation: 692

Yes, have a look here: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#component-stack-traces

Basically you can use the componentDidCatch.

When using React 15 or below

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>;
  }
}

Upvotes: 1

Matt Way
Matt Way

Reputation: 33161

You can use the React chrome devtools plugin to see the rendered component tree. It is currently here:

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

When selecting a component, you can even see the provided props.

If you need debugger information on breaks for example, you can use reacts error checking mechanisms (as per Nikitas answer)

Upvotes: 0

Related Questions