Error: "Cannot read property 'concat' of undefined"

[byronanderson]

Describe what you were doing when the bug occurred:

1. I was using the devtools to investigate some performance issues w/ an app I help maintain
2. I had just turned on the "Record why each component rendered while profiling" checkbox
3. I ran a profile while navigating on the underlying page

The react profiler tab in the devtools gave this error, I think as I clicked the record icon to stop recording the profile.

---

Please do not remove the text below this line

DevTools version: 4.5.0-355970aa4

Call stack: at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:160881)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:160015)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:159939)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:159939)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:159939)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:159939)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:159939)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:159939)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:159939)
at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:159939)

Component stack: in ec
in div
in div
in div
in So
in Unknown
in n
in Unknown
in div
in div
in rl
in Ze
in fn
in Ga
in _s

[bvaughn]

Any chance this is reproducible, @byronanderson?

(And if so, any chance you could share steps for us to trigger it?)

[byronanderson]

Nope, I had tried at the time, and tried again just now, but it won't happen again w/ the same steps.

I can say that the CPU was getting hammered by frequent large react rerenders due to the a redux selector returning a new object without proper memoization, if that tells you anything.

The only reason I even opened the issue was that the issue template was shown to me w/ the crash, so if this minified stack trace means nothing to you, I won't be offended by closing it.

[bvaughn]

I assume this error is in CommitTreeBuilder because it's the only place in Profiler code that calls .concat() that I see:

react/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

Lines 240 to 241 in 5aa967b

	const parentNode = getClonedNode(parentID);
	parentNode.children = parentNode.children.concat(id);

In particular, the problem would happen if getClonedNode failed to find a matching node for the parent:

react/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

Lines 154 to 162 in 5aa967b

	// Clone nodes before mutating them so edits don't affect them.
	const getClonedNode = (id: number): CommitTreeNode => {
	const clonedNode = ((Object.assign(
	{},
	nodes.get(id),
	): any): CommitTreeNode);
	nodes.set(id, clonedNode);
	return clonedNode;
	};

This isn't an expected case, so I'm not sure what went wrong here. Being able to repro this woudl be very helpful.

[bvaughn]

By the way, yesterday's release (v4.7) fixed several potential Profiler bugs. Maybe it also fixed this one. Were you able to repro this issue before? If so can you try with the latest/current DevTools?

[bvaughn]

Sample data set from #19137 that reproduces this bug.

profiling-data.06-16-2020.18-42-16.zip

The more interesting thing is to figure out how the data gets corrupted in the first place though which will require a repro.

[IDrissAitHafid]

I encountered the same error and I think I have a repro:

1. Open React Devtools Profiler
2. Select Hide components where type equals suspense
3. Click on Reload and start profiling
4. Click on a commit bar

DevTools version: 4.8.2-fed4ae024

[bvaughn]

@IDrissAitHafid Can you share your repro as a Code Sandbox app with instructions on how to run?

[IDrissAitHafid]

Okay, I'll see if I can do it!

[IDrissAitHafid]

@bvaughn can you see if you can reproduce it using this Code Sandbox app?

What I did was:

1. export and run this app.
2. Open React Devtools Profiler
3. Select Hide components where type equals suspense
4. Click on Reload and start profiling
5. Click on the second commit bar

[bvaughn]

Nice repro! Thanks