This post came from a debugging problem I kept hitting while building a visual IDE for React.
I realized there was an interesting category of components that existing tools simply can't inspect: the ones that never mount because something further down the import graph throws during module evaluation.
React DevTools, Profiler, error boundaries, etc. all assume a successful render has happened. When it hasn't, there's often no structural view of what the application was trying to build.
The approach described here is based on parsing the dependency graph directly from source (before execution), which makes it possible to inspect modules even when the runtime never reaches React.
I'm curious whether others have run into this class of problem, especially in large React codebases or monorepos. Have you built internal tooling around it, or do you mostly rely on logging and rebuild cycles?
Hi HN, I'm the author.
This post came from a debugging problem I kept hitting while building a visual IDE for React.
I realized there was an interesting category of components that existing tools simply can't inspect: the ones that never mount because something further down the import graph throws during module evaluation.
React DevTools, Profiler, error boundaries, etc. all assume a successful render has happened. When it hasn't, there's often no structural view of what the application was trying to build.
The approach described here is based on parsing the dependency graph directly from source (before execution), which makes it possible to inspect modules even when the runtime never reaches React.
I'm curious whether others have run into this class of problem, especially in large React codebases or monorepos. Have you built internal tooling around it, or do you mostly rely on logging and rebuild cycles?
Happy to answer technical questions.