Fix inspectElement crash and show numeric IDs for unresolved components#47
Conversation
React DevTools backend may send hooks as a dehydrated object
{ data: [...], cleaned: [...], unserializable: [...] } instead of
a plain array. parseHooks() called .map() on this object, crashing
with "hooks.map is not a function". This caused get-component to
silently time out for ALL components (the crash happened inside
handleInspectedElement, swallowing the resolved promise).
Fix: add extractHooksArray() to handle both formats.
Components deep in the tree (e.g., 3000+ components in a React Native app) don't get @c labels assigned because getTree() traversal stops early. find returns @c? which can't be used with get-component. Fix: output @c?(id:667) so users can pass the numeric ID directly.
🦋 Changeset detectedLatest commit: 8d68fcc The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
find results show @c?(id:667) for components outside the labeled tree range, but resolveId treated anything starting with @c as a label map lookup — always returning undefined for this format. Add a regex match for @c?(id:N) before the generic @c branch so these IDs can be passed directly to get-component. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Thanks for the contribution @xilin, great catches on both of these.
One small thing I noticed the @c?(id:667) display format is the right call, but resolveId() treats anything starting with @c as a label map lookup, which means passing it to get component would always silently fail. I went ahead and pushed a fix along with a changeset.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
piotrski
force-pushed
the
fix/inspect-hooks-dehydrated-format-and-numeric-ids
branch
from
30b76eb to
8d68fcc
Compare
Sounds good, thanks again for creating this great tool! |
2 participants
Two fixes:
Handle dehydrated hooks format in inspectElement response.
React DevTools backend may send hooks as a dehydrated object
{ data: [...], cleaned: [...], unserializable: [...] } instead of
a plain array. parseHooks() called .map() on this object, crashing
with "hooks.map is not a function". This caused get-component to
silently time out for ALL components (the crash happened inside
handleInspectedElement, swallowing the resolved promise).
Fix: add extractHooksArray() to handle both formats.
Show numeric fiber ID when @c label is unresolved in find results.
Components deep in the tree (e.g., 3000+ components in a React
Native app) don't get @c labels assigned because getTree() traversal
stops early. find returns @c? which can't be used with get-component.
Fix: output @c?(id:667) so users can pass the numeric ID directly.