DevTools show error icon when hook name parsing fails (#21820)

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

@@ -26,7 +26,6 @@ import {
   inspectElement,
 } from 'react-devtools-shared/src/inspectedElementCache';
 import {loadHookNames} from 'react-devtools-shared/src/hookNamesCache';
-import {ElementTypeFunction} from 'react-devtools-shared/src/types';
 import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext';
 import {SettingsContext} from '../Settings/SettingsContext';
 
@@ -112,7 +111,6 @@ export function InspectedElementContextController({children}: Props) {
       if (parseHookNames) {
         if (
           inspectedElement !== null &&
-          inspectedElement.type === ElementTypeFunction &&
           inspectedElement.hooks !== null &&
           loadHookNamesFunction !== null
         ) {

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css

@@ -81,4 +81,8 @@
 
 .HookName {
   color: var(--color-component-name);
+}
+
+.ToggleError {
+  color: var(--color-error-text);
 }

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

@@ -64,6 +64,17 @@ export function InspectedElementHooksTree({
     toggleParseHookNames();
   };
 
+  const hookParsingFailed = parseHookNames && hookNames === null;
+
+  let toggleTitle;
+  if (hookParsingFailed) {
+    toggleTitle = 'Hook parsing failed';
+  } else if (parseHookNames) {
+    toggleTitle = 'Parsing hook names ...';
+  } else {
+    toggleTitle = 'Parse hook names (may be slow)';
+  }
+
   const handleCopy = () => copy(serializeHooksForCopy(hooks));
 
   if (hooks === null) {
@@ -73,16 +84,13 @@ export function InspectedElementHooksTree({
       <div className={styles.HooksTreeView}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
-          {enableHookNameParsing && !parseHookNames && (
+          {enableHookNameParsing && (!parseHookNames || hookParsingFailed) && (
             <Toggle
+              className={hookParsingFailed ? styles.ToggleError : null}
               isChecked={parseHookNamesOptimistic}
-              isDisabled={parseHookNamesOptimistic}
+              isDisabled={parseHookNamesOptimistic || hookParsingFailed}
               onChange={handleChange}
-              title={
-                parseHookNames
-                  ? 'Parse hook names'
-                  : 'Parse hook names (may be slow)'
-              }>
+              title={toggleTitle}>
               <ButtonIcon type="parse-hook-names" />
             </Toggle>
           )}