fix[devtools]: check if fiber is unmounted before trying to highlight #26983

hoxyq · 2023-06-20T18:45:48Z

For React Native environment, we sometimes spam the console with warnings "Could not find Fiber with id ...".

This is an attempt to fix this or at least reduce the amount of such potential warnings being thrown.

Now checking if fiber is already unnmounted before trying to get native nodes for fiber. This might happen if you try to inspect an element in DevTools, but at the time when event has been received, the element was already unmounted.

alamenai · 2023-06-20T18:53:33Z

packages/react-devtools-shared/src/backend/views/Highlighter/index.js

@@ -104,15 +104,21 @@ export default function setupHighlighter(
    const renderer = agent.rendererInterfaces[rendererID];
    if (renderer == null) {


Why == and not ===?

To check if a value isn't equal to undefined or null with a single statement

hoxyq · 2023-06-21T11:39:33Z

packages/react-devtools-shared/src/backend/renderer.js

-      // Special case for a timed-out Suspense.
-      const isTimedOutSuspense =
-        fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
-      if (isTimedOutSuspense) {
-        // A timed-out Suspense's findDOMNode is useless.
-        // Try our best to find the fallback directly.
-        const maybeFallbackFiber = fiber.child && fiber.child.sibling;
-        if (maybeFallbackFiber != null) {
-          fiber = maybeFallbackFiber;
-        }
-      }


This is not needed, because we return hostFibers and this branch doesn't have any side effects

tyao1 · 2023-06-22T00:02:29Z

packages/react-devtools-shared/src/backend/renderer.js

-      // Special case for a timed-out Suspense.
-      const isTimedOutSuspense =
-        fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
-      if (isTimedOutSuspense) {
-        // A timed-out Suspense's findDOMNode is useless.
-        // Try our best to find the fallback directly.
-        const maybeFallbackFiber = fiber.child && fiber.child.sibling;
-        if (maybeFallbackFiber != null) {
-          fiber = maybeFallbackFiber;
-        }
-      }


List of changes: * Devtools:-Removed unused CSS ([Biki-das](https://github.com/Biki-das) in [#27032](#27032)) * fix[devtools/profilingCache-test]: specify correct version gate for test ([hoxyq](https://github.com/hoxyq) in [#27008](#27008)) * fix[devtools/ci]: fixed incorrect condition calculation for @reactVersion annotation ([hoxyq](https://github.com/hoxyq) in [#26997](#26997)) * fix[ci]: fixed jest configuration not to skip too many devtools tests ([hoxyq](https://github.com/hoxyq) in [#26955](#26955)) * fix[devtools/standalone]: update webpack configurations ([hoxyq](https://github.com/hoxyq) in [#26963](#26963)) * fix[devtools]: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [#26983](#26983)) * feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [#26951](#26951)) * chore[devtools]: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [#26887](#26887)) * fix[devtools]: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [#26947](#26947)) * fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [#25510](#25510)) * Fix:- Fixed dev tools inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [#26888](#26888)) * Updated copyright text to Copyright (c) Meta Platforms, Inc. and its … ([denmo530](https://github.com/denmo530) in [#26830](#26830)) * Fix strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [#26825](#26825))

…facebook#26983) For React Native environment, we sometimes spam the console with warnings `"Could not find Fiber with id ..."`. This is an attempt to fix this or at least reduce the amount of such potential warnings being thrown. Now checking if fiber is already unnmounted before trying to get native nodes for fiber. This might happen if you try to inspect an element in DevTools, but at the time when event has been received, the element was already unmounted.

List of changes: * Devtools:-Removed unused CSS ([Biki-das](https://github.com/Biki-das) in [facebook#27032](facebook#27032)) * fix[devtools/profilingCache-test]: specify correct version gate for test ([hoxyq](https://github.com/hoxyq) in [facebook#27008](facebook#27008)) * fix[devtools/ci]: fixed incorrect condition calculation for @reactVersion annotation ([hoxyq](https://github.com/hoxyq) in [facebook#26997](facebook#26997)) * fix[ci]: fixed jest configuration not to skip too many devtools tests ([hoxyq](https://github.com/hoxyq) in [facebook#26955](facebook#26955)) * fix[devtools/standalone]: update webpack configurations ([hoxyq](https://github.com/hoxyq) in [facebook#26963](facebook#26963)) * fix[devtools]: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [facebook#26983](facebook#26983)) * feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [facebook#26951](facebook#26951)) * chore[devtools]: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [facebook#26887](facebook#26887)) * fix[devtools]: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [facebook#26947](facebook#26947)) * fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [facebook#25510](facebook#25510)) * Fix:- Fixed dev tools inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [facebook#26888](facebook#26888)) * Updated copyright text to Copyright (c) Meta Platforms, Inc. and its … ([denmo530](https://github.com/denmo530) in [facebook#26830](facebook#26830)) * Fix strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [facebook#26825](facebook#26825))

…#26983) For React Native environment, we sometimes spam the console with warnings `"Could not find Fiber with id ..."`. This is an attempt to fix this or at least reduce the amount of such potential warnings being thrown. Now checking if fiber is already unnmounted before trying to get native nodes for fiber. This might happen if you try to inspect an element in DevTools, but at the time when event has been received, the element was already unmounted. DiffTrain build for commit 794b770.

fix[devtools]: check if fiber is unmounted before trying to highlight

136816b

hoxyq requested a review from tyao1 June 20, 2023 18:45

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jun 20, 2023

alamenai reviewed Jun 20, 2023

View reviewed changes

hoxyq marked this pull request as ready for review June 21, 2023 11:19

hoxyq commented Jun 21, 2023

View reviewed changes

tyao1 approved these changes Jun 22, 2023

View reviewed changes

hoxyq merged commit 794b770 into facebook:main Jun 22, 2023

hoxyq deleted the devtools/fix-highlighting-unmounted-fiber branch June 22, 2023 07:51

styfle mentioned this pull request Jun 30, 2023

chore(deps): bump react 18.3.0-canary-1fdacbefd-20230630 vercel/next.js#52005

Merged

hoxyq mentioned this pull request Jul 4, 2023

React DevTools 4.27.8 -> 4.28.0 #27051

Merged

styfle mentioned this pull request Jul 5, 2023

chore(deps): bump react to 7118f5dd7 vercel/next.js#52282

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix[devtools]: check if fiber is unmounted before trying to highlight #26983

fix[devtools]: check if fiber is unmounted before trying to highlight #26983

hoxyq commented Jun 20, 2023

alamenai Jun 20, 2023

hoxyq Jun 20, 2023

hoxyq Jun 21, 2023

tyao1 Jun 22, 2023

tyao1 Jun 22, 2023

		@@ -104,15 +104,21 @@ export default function setupHighlighter(
		const renderer = agent.rendererInterfaces[rendererID];
		if (renderer == null) {

fix[devtools]: check if fiber is unmounted before trying to highlight #26983

fix[devtools]: check if fiber is unmounted before trying to highlight #26983

Conversation

hoxyq commented Jun 20, 2023

alamenai Jun 20, 2023

Choose a reason for hiding this comment

hoxyq Jun 20, 2023

Choose a reason for hiding this comment

hoxyq Jun 21, 2023

Choose a reason for hiding this comment

tyao1 Jun 22, 2023

Choose a reason for hiding this comment

tyao1 Jun 22, 2023

Choose a reason for hiding this comment