React: ReactDefaultPerf.printWasted() doesn't work

[Daniel15]

Calling ReactDefaultPerf.printWasted() results in:

Uncaught TypeError: Cannot read property 'forEach' of undefined
writes.(anonymous function).forEach @ ReactDefaultPerfAnalysis.js:195
Object.keys.forEach @ ReactDefaultPerfAnalysis.js:192
getUnchangedComponents @ ReactDefaultPerfAnalysis.js:191
getInclusiveSummary @ ReactDefaultPerfAnalysis.js:139
ReactDefaultPerf.getMeasurementsSummaryMap @ ReactDefaultPerf.js:118
ReactDefaultPerf.printWasted @ ReactDefaultPerf.js:133

(this is on a page internally at Facebook so I assume it's a fairly recent React version)

[jimfb]

@Daniel15 Are you still experiencing this issue internally? If so, can you create an internal task with details and repro steps? Assign to the oncall, cc the React team.

Our internal configuration is a bit different, and we don't want to discuss internal code/details/configurations on github. I'm going to close this out, and we can help you debug using internal tools if you're still running into problems.

[lostfictions]

Small note for anyone experiencing a similar error message who arrived here by Googling: I got bit by this because I updated react and react-dom without updating react-addons-perf at the same time.

[sverrejoh]

I'm getting this issue after upgrading to react 15.0.1. All my React packages (including perf) is 15.0.1. printExclusive() etc. works, but printWasted gives the exception shown above.

[gaearon]

@sverrejoh Are you running ReactPerf.start() before using it?

[sverrejoh]

Yes. ReactPerf.start(), ReactPerf.stop() and the rest of the Perf API works, for example ReactPerf.printExclusive(), but not ReactPerf.printWasted().

I changed over to my 0.14.7 branch, and there everything works like it should, and I double checked that both ReactPerf and React was on 15.0.1.

I can dig around a bit more if this isn't anything known.

[gaearon]

Let’s reopen until we hear more.

[Danita]

I had it working for a few minutes and then it started failing without me doing anything strange.

[gaearon]

@Danita

Thanks for the info, do you also have the same stack trace and error message as the first post?

[Danita]

Yes. I was exposing the Perf object as window.Perf. I tried again exposing it as window.P and P.printWasted() it's working again. Puzzling.

I'm using the full 15.0.1 ecosystem, on Babel 6, Webpack and Webpack dev server, testing on Chrome.

[gaearon]

Any chance you have a public project where you can more or less consistently reproduce this?

[gaearon]

Technically this means there was a write for which there was no hierarchy record. This code is super fragile so it’s hard to pin it down without having a specific component hierarchy that happens to cause this.

[gaearon]

If someone wants to spend some effort tracking it down, I would recommend:

1. Add

js if (!measurement.hierarchy[id]) { console.log('missing hierarchy for', id) }

just before this line in node_modules/react/lib/ReactDefaultPerfAnalysis.js.

1. Add

js console.log('write for id', id, 'with args', fnName, args)

just before this line in node_modules/react/lib/ReactDefaultPerf.js.

Then please share the relevant write for id logs that correspond to the ID you see in the missing hierarchy for message.

[Danita]

@gaearon Thanks Dan, I'll try setting up that to see if I can help. Unfortunately I cannot share my project right now because of client terms.

[gaearon]

@Danita Yeah, I thought this might be the case. Thanks for taking the time to investigate.

[Danita]

@gaearon OK I added the lines and I managed to also reproduce the error. Here you can find the console log.

FYI, my app is a SPA, I captured this on a route where I have a long list of items that can be filtered by certain criteria and doing Perf.start() before filtering and Perf.stop() Perf.printWasted() after some of those items were removed because of the filtering.

[gaearon]

Thank you, this is very helpful! I’ll dig into it and see if I can repro this given the new info.