React devtools 15.1.0 ctor timer error

[jaylaw81]

bug

Warning displayed in console about internal error of React performance measurement code.

import React from 'react';
import { render } from 'react-dom';
import Perf from 'react-addons-perf';
import { browserHistory, Router } from 'react-router';

import routes from './routes';
import persist from 'altFlux/persist';

persist('docs');

const target = document.getElementById('app');

Perf.start();

render(
  <Router
    routes={routes}
    history={browserHistory}
  />,
  target,
  () => {
    Perf.stop();
    Perf.printWasted();
  }
);

15.1.0
Google Chrome

[gaearon]

Can you please provide a complete runnable example that reproduces this?

[jaylaw81]

@gaearon https://github.com/jaylaw81/sdp-bugfix

private repo.

npm install
npm start
http://localhost:3000/docs/Button > errors in console

[gaearon]

Thanks, this makes sense. For the context, I forgot about the portal use case where people ReactDOM.render again right inside a lifecycle method, thus making timers stack. We should probably keep the warning but push any timers running when a flush starts onto the stack, and pop them when the flush ends.

[sassanh]

Is it considered fixed? I'm using 15.2.1.

https://www.dropbox.com/s/dqcwnukwokwubsf/Screenshot%202016-07-18%2022.57.18.png?dl=0

This warning repeated 484 times on console and then:

https://www.dropbox.com/s/3ip8vqros8biz8b/Screenshot%202016-07-18%2022.58.08.png?dl=0

this error repeated 484 times on console and page failed to render.

[sassanh]

The problem was that I was using an undefined variable but the error/warning messages were completely misleading. After defining the variable it works without any warnings nor errors.

[gaearon]

Can you please provide a sample reproducing this?

[sassanh]

Thanks for quick reply. I need to create one as the code is not open source, I'll do it asap.

[gaearon]

Thanks.

I’ll reopen so this is on my our radar. To be clear, this is likely not a bug in React (the actual error probably was in the component, and it got React into an inconsistent state). But we should recover from such errors, or at least not to spam you with warnings.

[sassanh]

Yeah I understand it's not a "bug" in react that produced the problem but as you said I think it could have handled better so that the developer could find the issue easier. Spamming warnings/errors and making the tab unresponsive (I couldn't even refresh or close the chrome tab and I had to kill it.) isn't nice.

[gaearon]

Yea, totally. At the very least we should make the warning warn at most once. This is enough for us to catch issues in tests but solves the spamming problem. The relevant code is in ReactDebugTool. Would you like to send a PR to fix it? You could keep a bool hasWarned and use that flag to decide whether to log warning or ignore it silently.

[sassanh]

Sure, I try to manage to do it at the weekend.

[sassanh]

Even though #7299 manages to reduce warnings, we still have problem with 484 errors and chrome tab getting unresponsive for around a minute (user can only kill it).

[gaearon]

What errors are you referring to?

[sassanh]

Look at this:
https://www.dropbox.com/s/3ip8vqros8biz8b/Screenshot%202016-07-18%2022.58.08.png?dl=0

I had it in my first comment too.

[gaearon]

Those errors appear unrelated to the issue in this thread. In general, we don’t currently support gracefully recovering from errors thrown in components. This may come later (#2461) but it’s not there right now. So yes, you’ll see many errors thrown. We recommend scrolling up to the first one and fixing it (it usually causes all the others).

[sassanh]

I see, thanks for info. So I guess we can close this.