[DevTools Bug] Cannot read properties of undefined (reading 'split')

[JHSeo-git]

Website or app

https://next-rsc-notes.vercel.app/

Repro steps

1. enter the site
2. open react-devtools
3. select We(maybe suspense's child component)
4. and show following errors.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.23.0-e28a0db22

Error message (automated)

Cannot read properties of undefined (reading 'split')

Error call stack (automated)

at getDerivedStateFromError (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37414:114)
    at ErrorBoundary_ErrorBoundary.c.payload (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16143:14)
    at Gg (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:14571:47)
    at Dj (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16788:5)
    at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:19204:86)
    at il (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18756:11)
    at hl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18748:23)
    at Wk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18732:5)
    at al (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18393:37)
    at Uk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18314:51)

Error component stack (automated)

at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37864:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40513:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33354:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35975:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42520:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37548:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42700:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42146:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30256:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30878:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37927:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53807:3)

GitHub query string (automated)

https://api.github.com/search/issues?q=Cannot read properties of undefined (reading 'split') in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[lunaruan]

Hey! Thanks for reporting. This seems like an issue where your app is throwing an error. However, the way DevTools is handling this isn't obvious, and it makes it seem like it's actually a DevTools error. We'll fix this soon!

[bvaughn]

To add what what @lunaruan said above, I think there is also an error on our side:

react/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js

Lines 58 to 66 in 72a933d

	const callStack =
	typeof error === 'object' &&
	error !== null &&
	error.hasOwnProperty('stack')
	? error.stack
	.split('\n')
	.slice(1)
	.join('\n')
	: null;

This code didn't expect an Error object with an undefined stack property but it should handle that case.

An error will still be thrown (in your app code) but the larger DevTools extension won't crash:

[bvaughn]

Fixed via #24065

[bvaughn]

4.24 release will be made today. Fix should roll out as soon as the release goes live.