ReactTracer Configuration
ReactTracer configuration has two layers:
- Runtime configuration in
reactTracer()controls when tracing starts, what appears in traces, and how output is formatted. - Optional build-time injection adds automatic component and hook labels so traces are richer without manual instrumentation across the app.
Most React apps should use both.
Keep tracing out of publicly accessible builds. The normal use case is development and restricted internal test or QA environments.
Recommended Integration Paths
Choose the path that matches your build system.
Vite
Use @autotracer/plugin-vite-react18 for build-time injection and reactTracer() for runtime startup.
This is the recommended path for Vite apps. It gives you automatic labels, optional file-based themes, optional dashboard mounting, and the normal ReactTracer runtime API.
Use these pages:
For restricted internal browser builds where you want narrow capture windows, start ReactTracer dormant and use the Dashboard workflow.
Next.js, Create React App, And Other Babel Builds
Use @autotracer/plugin-babel-react18 for build-time injection and reactTracer() for runtime startup.
This is the recommended path when your React build already goes through Babel.
Use these pages:
- Next.js Pages Router installation
- Next.js App Router installation
- Create React App installation
- ReactTracer Babel Plugin Settings
- @autotracer/plugin-babel-react18
- @autotracer/react18
Runtime-Only Setup
Use runtime-only setup when you do not want build-time injection and you are willing to use useReactTracer() or other runtime APIs manually.
Runtime-only setup is useful for manual harnesses, experiments, or cases where automatic labeling is not required.
Use these pages:
Custom Build Tooling
Use @autotracer/inject-react18 only when you are building your own integration layer instead of using the Vite or Babel plugin packages directly.
This path owns the shared AST transform and shared transform configuration. It does not initialize reactTracer() for you, and it does not replace the normal runtime package.
Use these pages:
Runtime Settings
The reactTracer() options are easiest to evaluate by concern:
- Startup and capture windows:
enabled,startTriggerFunctionName,endTriggerFunctionName,endTriggerMode, andtriggerRearmMode - Missing or noisy tree output:
maxFiberDepth,includeNonTrackedBranches,includeMount,includeRendered,includeReconciled,includeSkipped,filterEmptyNodes, andshowLevelDetails - Output format and appearance:
outputMode,colors, and ReactTracer Theme API - Noise reduction and diagnostics:
skippedObjectProps,detectIdenticalValueChanges,showFlags,internalLogLevel, andtrackedStateResolution
For exact per-option behavior and defaults, use ReactTracer Runtime Settings.
Runtime Control Surface
For runtime APIs such as reactTracer(), updateReactTracerOptions(), stopReactTracer(), useReactTracer(), and the global browser control surface on globalThis.autoTracer.reactTracer, use @autotracer/react18.
For browser-based internal web apps, the recommended control surface is the Dashboard workflow. The dashboard controls capture windows, but trace output still goes to the browser's normal logging surface.
Build-Time Injection
Build-time injection adds automatic component and hook labeling. It does not replace the runtime package.
- Use ReactTracer Vite Plugin Settings for Vite apps.
- Use ReactTracer Babel Plugin Settings for Next.js, Create React App, and other Babel-based builds.
- Use ReactTracer Shared Transform only when you are authoring custom tooling around the shared transform.
If multiple islands or microfrontends share one console, use the plugin-level prefix option documented in the plugin API page for your build path. This is a build-time label for component names, not automatic runtime tagging or a separate runtime filter.
Themes
Use runtime colors when you want programmatic project defaults.
If you use the Vite plugin, use ReactTracer Theme API for file-based theme loading and ReactTracer Example Themes for copyable examples.