Debugging asynchronous behavior in modern React applications, especially when it spans across fetches, effects, and timers, can quickly become overwhelming. Errors are often vague and buried deep in chains of callbacks, promises, and side effects. Our team set out to build Track-React, an open-source developer tool and Chrome DevTools extension that helps developers visualize, debug, and better understand async flows in their React apps. Building a tool that integrates seamlessly into user applications without degrading performance or affecting functionality was a major challenge.
In this post, we’ll break down the technical journey behind Track-React: how we inject async tracking logic into React apps without needing a wrapper component, how we traverse ASTs using Babel, how we built a custom Vite plugin and Chrome DevTools panel, and how we solved the many challenges that came with wiring it all together.