Aiden Bai
1971506440
* feat(cli): record React-aware browser traces Add an interactive Playwright scanner that streams DevTools traces to disk and reports React rendering hotspots for humans and agents. * fix(cli): use shared telemetry anonymizer Keep runtime URL redaction on the canonical core utility after the telemetry helper consolidation. * feat(cli): visualize component renders during traces Flash labeled component outlines during runtime scans so users can connect slow interactions to the React work they trigger. * feat(skill): add runtime performance workflow Guide agents through repeatable React traces so performance findings stay tied to measured interactions. * docs(cli): guide runtime scan setup Explain the recording flow, browser isolation, authenticated sessions, output formats, and trace privacy directly in command help. * fix(cli): harden runtime trace capture Preserve evidence across navigations while keeping structured output, telemetry, trace files, and attached-browser cleanup safe under failures and cancellation. * fix(cli): preserve latest navigation evidence Keep cross-document layout shifts comparable and retain the most recent bounded performance entries so the recorded interaction remains represented. * fix(cli): bound runtime scan browser resources Prevent trace deadlocks, cross-tab capture, and unbounded browser evidence while preserving navigation data through an isolated validated relay. * fix(cli): preserve busy-page runtime snapshots Stop tracing concurrently with final probe collection and allow busy pages enough time to flush their bounded performance evidence. * feat(cli): prompt for runtime scan URL Let people start an interactive runtime scan without remembering the URL argument while keeping agents and CI deterministic. * feat(cli): suggest local apps for runtime scans Replace the bare URL field with a polished chooser that discovers common localhost development servers while preserving custom URL entry. * fix(cli): use scan terminology in runtime flow Keep the interactive copy aligned with the command users invoked instead of switching between recording and profiling language. * fix(cli): center runtime chooser in full terminal Render the interactive URL chooser as a terminal-sized view so it no longer appears anchored to the previous cursor position. * fix(cli): harden runtime scan edge cases Capture popup evidence without leaking browser pages, support redirected interactive output and IPv6 localhost apps, and keep bounded reports honest.
4.3 KiB
Your agent writes bad React, this catches it.
React Doctor deterministically scans your codebase and finds issues across state and effects, performance, architecture, security, accessibility, and maintainability. It highlights overly complex React functions and repeated JSX trees that are good candidates for composition.
Works across React frameworks and React-enabled sites - Next.js, Vite, Astro, TanStack, React Native, Expo, you name it.
Install
1. Quick start
Run this at your project root to get an audit.
npx react-doctor@latest
https://github.com/user-attachments/assets/07cc88d9-9589-44c3-aa73-5d603cb1c570
2. Install for agents
Once you have an audit, you can install the skill for your coding agent to learn from the issues and fix them in the future.
npx react-doctor@latest install
Works with Claude Code, Cursor, Codex, OpenCode, and many more.
3. Run in CI
React Doctor reviews every pull request and reports only the issues your change introduced, not your existing backlog. Set it up with one command:
npx react-doctor@latest ci install
This adds the workflow, scans every pull request, and posts a summary comment. Change the gate, scan scope, and comments anytime with react-doctor ci config, and bump the action with react-doctor ci upgrade. GitHub Actions is fully supported; GitLab CI gets a gate-only scaffold.
4. Configure rules
You can configure which rules to run and how to run them in doctor.config.ts.
Runtime performance traces
Record a Chrome DevTools performance trace while you interact with a running React app:
npx react-doctor@latest scan http://localhost:3000
React Doctor opens system Chrome in a temporary isolated profile, records until you press Enter
(up to five minutes), and flashes purple outlines with component names as React renders. It then
returns a readable summary plus the path to a compressed DevTools trace. Use --format json or
--format jsonl for coding agents. In an interactive terminal, you can run react-doctor scan
without a URL and choose a detected localhost app or enter another URL; coding agents and CI must
pass the URL explicitly.
An already-open normal browser is left alone. To reuse an authenticated session, start a dedicated Chrome profile with remote debugging, sign in, close its non-blank tabs, and pass its endpoint:
npx react-doctor@latest scan https://app.example.com --cdp http://127.0.0.1:9222
Chrome performance tracing is browser-wide, so React Doctor rejects attached profiles with open pages. It closes blank startup tabs before tracing and closes its scan tab afterward; the attached browser stays open. The trace is stored locally and is never uploaded, but it can contain page URLs, source paths, and React profiling details. Treat it as sensitive application data.
Telemetry
The CLI reports crashes, basic run traces, and anonymous usage counters to Sentry to help us fix bugs and prioritize work.
We collect:
- Environment: CLI version, platform, Node version
- Invocation: which command, package manager, and run context (whether it's local vs. CI vs. coding agent)
- Project shape: framework, React version, TypeScript, project size (NO file contents)
- Rules fired: rule names and counts only (e.g.
react-doctor/no-array-index-as-key) (NO code or specific findings) - De-minified React Doctor CLI stack traces
To opt out, run: npx react-doctor@latest --no-telemetry
Contributing
MIT-licensed