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.

[usama90ned]

The simplest way to fix this is to bind the function, I suggest that you bind the function in the constructor, like so
class MonthsTable extends Component {
constructor(props, context){
super(props, context);
this.handleChangeOnMonth = this.handleChangeOnMonth.bind(this);
}
handleChangeOnMonth(e){
this.props.setMonth(e.target.id, e.target.value);
}
render(){
return (

{this.props.months.map((e, i) =>
)}
)
}
}

[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.