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

[M-Izadmehr]

Description
This error happens in devtools (when running devtools shell), I didn't investigate it in detail, but seemingly the reason is that inside InteractionListItem.js we are trying to access commitData[commitIndex].duration however in some cases commitData is an array one index smaller than commitIndex.

How to recreate:

1. try update using interaction tracing,
2. Play around a little bit with other items (the List maybe), click items, add items, click items again
3. try 'update' using interaction tracing again
4. Then it sometimes happens

I can try to investigate it in detail, however, a small fix is to first check if the index actually exists.

---

Please do not remove the text below this line

DevTools version: 4.4.0-9def56ec0

Call stack: at http://localhost:8080/dist/devtools.js:24337:2421
at Array.map ()
at InteractionListItem (http://localhost:8080/dist/devtools.js:24337:2029)
at renderWithHooks (http://localhost:8080/dist/devtools.js:3629:157)
at mountIndeterminateComponent (http://localhost:8080/dist/devtools.js:3911:889)
at beginWork$1 (http://localhost:8080/dist/devtools.js:4214:101)
at HTMLUnknownElement.callCallback (http://localhost:8080/dist/devtools.js:946:102)
at Object.invokeGuardedCallbackDev (http://localhost:8080/dist/devtools.js:966:45)
at invokeGuardedCallback (http://localhost:8080/dist/devtools.js:981:126)
at beginWork$$1 (http://localhost:8080/dist/devtools.js:5167:1)

Component stack: in InteractionListItem
in InteractionListItem (created by List)
in div (created by List)
in div (created by List)
in List (at Interactions.js:135)
in div (at Interactions.js:134)
in Interactions (at Interactions.js:40)
in div (created by AutoSizer)
in AutoSizer (at Interactions.js:39)
in div (at Interactions.js:38)
in InteractionsAutoSizer (at Profiler.js:55)
in div (at Profiler.js:124)
in div (at Profiler.js:100)
in div (at Profiler.js:99)
in SettingsModalContextController (at Profiler.js:98)
in Profiler (at portaledContent.js:22)
in ErrorBoundary (at portaledContent.js:21)
in PortaledContent (at DevTools.js:178)
in div (at DevTools.js:175)
in div (at DevTools.js:151)
in ProfilerContextController (at DevTools.js:150)
in TreeContextController (at DevTools.js:149)
in SettingsContextController (at DevTools.js:144)
in ModalDialogContextController (at DevTools.js:143)
in DevTools (at frontend.js:70)
in DevTools

[deminoth]

This happend to me with react@16.8.3. After upgrade to 16.12.0, everything works well.

[kaykdm]

@deminoth Are you sure? I can reproduce this with react@16.12.0 in my local environment.

[kaykdm]

I did some digging. (still need to investigate in deep)
It is filtering empty commits from the profile data in prepareProfilingDataFrontendFromBackendAndStore while interactionCommits Map is already set with index

[bvaughn]

Fixed by #18862, released in v4.7