[DevTools Bug]: TreeContext error: Can't access property "id" in undefined

[bvaughn]

Website or app

https://app.replay.io/

Repro steps

Unfortunately I don't know how to reproduce this bug. It was just logged to Sentry.

It seems like there's a logic bug here though:

react/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

Lines 386 to 416 in bd4784c

	let flatIndex = 0;
	if (selectedElementIndex !== null) {
	// Resume from the current position in the list.
	// Otherwise step to the previous item, relative to the current selection.
	for (
	let i = elementIndicesWithErrorsOrWarnings.length - 1;
	i >= 0;
	i--
	) {
	const {index} = elementIndicesWithErrorsOrWarnings[i];
	if (index >= selectedElementIndex) {
	flatIndex = i;
	} else {
	break;
	}
	}
	}
	let prevEntry;
	if (flatIndex === 0) {
	prevEntry =
	elementIndicesWithErrorsOrWarnings[
	elementIndicesWithErrorsOrWarnings.length - 1
	];
	selectedElementID = prevEntry.id;
	selectedElementIndex = prevEntry.index;
	} else {
	prevEntry = elementIndicesWithErrorsOrWarnings[flatIndex - 1];
	selectedElementID = prevEntry.id;
	selectedElementIndex = prevEntry.index;
	}

If selectedElementIndex is null or elementIndicesWithErrorsOrWarnings is empty, then flatIndex would be 0 still– and this statement would result in an undefined entry:

prevEntry =
  elementIndicesWithErrorsOrWarnings[
    elementIndicesWithErrorsOrWarnings.length - 1
  ];

How often does this bug happen?

Only once

DevTools package (automated)

react-devtools-inline

DevTools version (automated)

4.24.4

Error message (automated)

Error: can't access property "id", n is undefined

Error call stack (automated)

React ErrorBoundary Error: can't access property "id", n is undefined
  at TreeContextController(./node_modules/react-devtools-inline/dist/frontend.js:20793:10)
  at SettingsContextController(./node_modules/react-devtools-inline/dist/frontend.js:21419:10)
  at ModalDialogContextController(./node_modules/react-devtools-inline/dist/frontend.js:28526:10)
  at DevTools_DevTools(./node_modules/react-devtools-inline/dist/frontend.js:44535:10)
  at useMemo(./src/ui/components/SecondaryToolbox/ReactDevTools.tsx:269:1)
  at ConnectFunction(./node_modules/react-redux/es/components/connectAdvanced.js:220:22)
  at Redacted(./src/ui/components/Redacted.tsx:5:83)
  at SecondaryToolbox(./src/ui/components/SecondaryToolbox/index.tsx:119:25)
  at useGetShowVideo(./src/devtools/client/shared/components/splitter/SplitBox.tsx:25:37)

Error component stack (automated)

No response

GitHub query string (automated)

No response

[lunaruan]

Not sure if #24495 will fix your issue. Let me know if you can get a repro!