AutoTracerAutomated Tracing for JavaScript and React

From an Action to an Explanation ​

Choose an interaction or test, select the source to instrument, run it, and collect the trace. Use FlowTracer to inspect function calls and values, and ReactTracer to inspect component activity, props, and state.

The first-trace walkthrough connects a button click to a function return, a state change, and a React render. It includes build configuration, runtime initialization, start/stop commands, and the signals to verify.

For an existing integration, choose browser capture, browser test capture, or FlowTracer in Vitest. Then explain the observed execution, whether it is working as intended or showing a bug.

AutoTracer observes selected source during a capture window. It does not automatically record every statement or connect events across runtimes. The analysis guide explains what the output establishes and where further evidence is needed.

Choose Your Path ​

Packages ​

Package	Description	npm
@autotracer/react19	React 19 component render tracer
@autotracer/react18	React component render tracer runtime
@autotracer/flow	Function and code flow tracer runtime
@autotracer/plugin-vite-react19	Vite plugin for React 19 injection
@autotracer/plugin-vite-react18	Vite plugin for ReactTracer injection
@autotracer/plugin-babel-react19	Babel plugin for React 19 injection
@autotracer/plugin-babel-react18	Babel plugin for ReactTracer injection
@autotracer/plugin-vite-flow	Vite plugin for FlowTracer injection
@autotracer/plugin-babel-flow	Babel plugin for FlowTracer injection
@autotracer/dashboard	Browser dashboard for targeted control
@autotracer/logger	Internal shared logger utility