CauseScope traces React UI bugs back to the API call that caused them

CauseScope is a new open-source Vite plugin that fills a gap React DevTools leaves open: it walks backward from a rendered value to explain why it is what it is. Click a disabled button, for example, and it reconstructs the full chain — the condition that disabled it, the component state behind that condition, and the exact HTTP response and field path that produced that state.

Under the hood, a compile-time transform (compatible with both Babel and SWC React plugins) records expression provenance, while a runtime graph correlates it with Fiber state, setter/reducer transitions, and fetch/XHR traffic. Clicking an element resolves the intersection of both. Optional adapters exist for React Query and Zustand, and when evidence is missing the tool explicitly reports 'unavailable' rather than guessing.

The tool is Vite-only, supporting React 18/19 on Vite 5-8, with no Next.js support; React Server Components remain an open problem since they expose no DOM, Fiber state, or client-side requests to trace. It runs strictly in dev mode, ships zero instrumentation in production builds (enforced via CI), and redacts sensitive values like tokens and cookies by default. The project is MIT-licensed and currently in beta with an unfrozen public API.