React: 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) =>
type='number'
id={i}
key={i}
value={this.props.months[i]}
onChange={this.handleChangeOnMonth} />)}
)
}
}

[bvaughn]

I assume this error is in CommitTreeBuilder because it's the only place in Profiler code that calls .concat() that I see:
https://github.com/facebook/react/blob/5aa967b69b255ede89c03dda8cd617b61c492cdb/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js#L240-L241

In particular, the problem would happen if getClonedNode failed to find a matching node for the parent:
https://github.com/facebook/react/blob/5aa967b69b255ede89c03dda8cd617b61c492cdb/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js#L154-L162

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