react: Perf.print*() method not working in 15.1.0: Cannot read property 'forEach' of undefined

After upgrading to 15.1.0 I’m having trouble using the React Perf tools. I’ve done the following:

Added to one of my files:

import Perf from 'react-addons-perf';
window.Perf = Perf;

I then launch my app in Chrome. Open the Dev Tools and run this in the console:

Perf.start();
Perf.stop();
Perf.printWasted();

And I get:

TypeError: Cannot read property 'forEach' of undefined
getWasted   @   7.7.js:149515
printWasted @   7.7.js:149666
(anonymous function)    @   VM508:1

The failure is on this line: flushHistory.forEach(function (flush) {.

The same behaviour occurs for all other print* method such as printInclusive() and printExclusive(). The same behaviour occurs if I put the commands into my code (ie. NOT running in the Chrome Console).

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 15 (5 by maintainers)

Commits related to this issue

Warn that ReactPerf does not work in the production build (#6884) Fixes #6871 — committed to facebook/react by sashashakun 8 years ago
Warn that ReactPerf does not work in the production build (#6884) Fixes #6871 (cherry picked from commit 2a46103ac87aab9b6ab390bb26c94c04f6b7e419) — committed to zpao/react by sashashakun 8 years ago
Warn that ReactPerf does not work in the production build (#6884) Fixes #6871 (cherry picked from commit 2a46103ac87aab9b6ab390bb26c94c04f6b7e419) — committed to facebook/react by sashashakun 8 years ago

Most upvoted comments

Let’s just do a console.error.

sophiebits on May 26, 2016

I suggest let’s open a PR now so I don’t forget to look into it? Thanks a bunch!

gaearon on May 26, 2016

May be it will be better to make a separate helper, like a roundFloat in the beginning of ReactPerf.js?

Sure, sounds good.

What warning message I should use?

ReactPerf is not supported in the production builds of React. To collect measurements, please use the development build of React instead.

What need to return, false or may be 0?

I think print*() methods can just exit early without a return value (just like they usually do anyway). get*() methods can probably return empty arrays. I suggest using whatever return type they usually have, but without any information.

so should I add DEV checking from your first point to this method also?

Worth adding it to log the warning, but the return value should be an empty array anyway.

Finally: I think we should make sure we don’t warn more than once. If somebody has ReactPerf.start() and ReactPerf.stop() calls around some hot function we don’t want to spam the console in production.

gaearon on May 25, 2016

This probably happens because you’re running a production build of React, but ReactPerf only works in the development build.

We need to make it clear by emitting a warning instead of crashing.

gaearon on May 25, 2016