feat: track and expose component error/warning counts (#35)

Author: piotrski

.changeset/error-warning-counts.md

@@ -0,0 +1,11 @@
+---
+"agent-react-devtools": minor
+---
+
+Track and expose component error/warning counts
+
+Components now track error and warning counts from the React DevTools protocol (`UPDATE_ERRORS_OR_WARNINGS` operations).
+
+- New `errors` command lists components with non-zero error or warning counts
+- `get component` output includes error/warning counts when non-zero
+- Tree, search, and component output annotates affected components (e.g., `@c5 [fn] Form ⚠2 ✗1`)

README.md

@@ -119,10 +119,28 @@ agent-react-devtools get tree [--depth N]          # Component hierarchy
 agent-react-devtools get component <@c1 | id>      # Props, state, hooks
 agent-react-devtools find <name> [--exact]          # Search by display name
 agent-react-devtools count                          # Component count by type
+agent-react-devtools errors                         # Components with errors/warnings
 ```
 
 Components are labeled `@c1`, `@c2`, etc. You can use these labels or numeric IDs interchangeably.
 
+Components with errors or warnings are annotated in tree and search output:
+
+```
+@c5 [fn] Form ⚠2 ✗1
+```
+
+Use the `errors` command to list only components with issues:
+
+```sh
+agent-react-devtools errors
+```
+
+```
+@c5 [fn] Form ⚠2 ✗1
+@c8 [fn] Input ✗3
+```
+
 ### Wait
 
 Block until a condition is met. Useful in scripts or agent workflows where the daemon starts before the app:
@@ -260,6 +278,7 @@ This project uses agent-react-devtools to inspect the running React app.
 - `agent-react-devtools get tree` — see the component hierarchy
 - `agent-react-devtools get component @c1` — inspect a specific component
 - `agent-react-devtools find <Name>` — search for components
+- `agent-react-devtools errors` — list components with errors or warnings
 - `agent-react-devtools profile start` / `profile stop` / `profile slow` — diagnose render performance
 ```
 

packages/agent-react-devtools/skills/react-devtools/SKILL.md

@@ -36,6 +36,7 @@ agent-react-devtools get component @c5  # Props, state, hooks for a specific com
 agent-react-devtools find Button        # Search by display name (fuzzy)
 agent-react-devtools find Button --exact # Exact match
 agent-react-devtools count              # Count by type: fn, cls, host, memo, ...
+agent-react-devtools errors             # List components with errors or warnings
 ```
 
 ### Performance Profiling
@@ -70,6 +71,8 @@ Every component gets a stable label like `@c1`, `@c2`. Use these to reference co
 
 Type abbreviations: `fn` = function, `cls` = class, `host` = DOM element, `memo` = React.memo, `fRef` = forwardRef, `susp` = Suspense, `ctx` = context.
 
+Components with errors or warnings show annotations: `⚠2` = 2 warnings, `✗1` = 1 error. Use `agent-react-devtools errors` to list only affected components.
+
 ### Inspected Component
 
 ```

packages/agent-react-devtools/skills/react-devtools/references/commands.md

@@ -54,6 +54,19 @@ Returns a flat list of matching components with labels, types, and keys.
 ### `agent-react-devtools count`
 Count components by type. Output: `42 components (fn:25 host:12 memo:3 cls:2)`.
 
+### `agent-react-devtools errors`
+List all components that have non-zero error or warning counts. React tracks console errors and warnings per component; this command surfaces them.
+
+Output example:
+```
+@c5 [fn] Form ⚠2 ✗1
+@c8 [fn] Input ✗3
+```
+
+`⚠N` = N warnings, `✗N` = N errors. Returns "No components with errors or warnings" when everything is clean.
+
+Error/warning annotations also appear in `get tree`, `get component`, and `find` output when counts are non-zero.
+
 ## Profiling
 
 ### `agent-react-devtools profile start [name]`

packages/agent-react-devtools/src/__tests__/component-tree.test.ts

@@ -226,4 +226,116 @@ describe('ComponentTree', () => {
     expect(tree.getNode(6)!.type).toBe('profiler');
     expect(tree.getNode(7)!.type).toBe('suspense');
   });
+
+  describe('UPDATE_ERRORS_OR_WARNINGS', () => {
+    it('should store error and warning counts on nodes', () => {
+      const ops = buildOps(1, 100, ['App', 'Form'], (s) => [
+        ...addOp(1, 5, 0, s('App')),
+        ...addOp(2, 5, 1, s('Form')),
+      ]);
+      tree.applyOperations(ops);
+
+      // Operation type 5 = UPDATE_ERRORS_OR_WARNINGS: opcode, id, numErrors, numWarnings
+      const errorOps = [1, 100, 0, 5, 2, 1, 3];
+      tree.applyOperations(errorOps);
+
+      const node = tree.getNode(2);
+      expect(node).toBeDefined();
+      expect(node!.errors).toBe(1);
+      expect(node!.warnings).toBe(3);
+
+      // App should still have zero counts
+      expect(tree.getNode(1)!.errors).toBe(0);
+      expect(tree.getNode(1)!.warnings).toBe(0);
+    });
+
+    it('should update counts when a second errors operation arrives', () => {
+      const ops = buildOps(1, 100, ['App'], (s) => [
+        ...addOp(1, 5, 0, s('App')),
+      ]);
+      tree.applyOperations(ops);
+
+      tree.applyOperations([1, 100, 0, 5, 1, 2, 0]);
+      expect(tree.getNode(1)!.errors).toBe(2);
+      expect(tree.getNode(1)!.warnings).toBe(0);
+
+      // Counts are replaced, not accumulated
+      tree.applyOperations([1, 100, 0, 5, 1, 0, 5]);
+      expect(tree.getNode(1)!.errors).toBe(0);
+      expect(tree.getNode(1)!.warnings).toBe(5);
+    });
+
+    it('should initialize errors and warnings to zero', () => {
+      const ops = buildOps(1, 100, ['App'], (s) => [
+        ...addOp(1, 5, 0, s('App')),
+      ]);
+      tree.applyOperations(ops);
+
+      expect(tree.getNode(1)!.errors).toBe(0);
+      expect(tree.getNode(1)!.warnings).toBe(0);
+    });
+  });
+
+  describe('getComponentsWithErrorsOrWarnings', () => {
+    it('should return only components with non-zero errors or warnings', () => {
+      const ops = buildOps(1, 100, ['App', 'Form', 'Button'], (s) => [
+        ...addOp(1, 5, 0, s('App')),
+        ...addOp(2, 5, 1, s('Form')),
+        ...addOp(3, 5, 1, s('Button')),
+      ]);
+      tree.applyOperations(ops);
+
+      // Give Form errors and Button warnings
+      tree.applyOperations([1, 100, 0, 5, 2, 3, 0]);  // Form: 3 errors
+      tree.applyOperations([1, 100, 0, 5, 3, 0, 2]);  // Button: 2 warnings
+
+      // Need to call getTree first to assign labels
+      tree.getTree();
+
+      const results = tree.getComponentsWithErrorsOrWarnings();
+      expect(results).toHaveLength(2);
+      expect(results.map((r) => r.displayName).sort()).toEqual(['Button', 'Form']);
+
+      const form = results.find((r) => r.displayName === 'Form')!;
+      expect(form.errors).toBe(3);
+      expect(form.warnings).toBeUndefined();
+
+      const button = results.find((r) => r.displayName === 'Button')!;
+      expect(button.errors).toBeUndefined();
+      expect(button.warnings).toBe(2);
+    });
+
+    it('should return empty array when no components have errors', () => {
+      const ops = buildOps(1, 100, ['App'], (s) => [
+        ...addOp(1, 5, 0, s('App')),
+      ]);
+      tree.applyOperations(ops);
+
+      tree.getTree();
+      const results = tree.getComponentsWithErrorsOrWarnings();
+      expect(results).toHaveLength(0);
+    });
+  });
+
+  describe('tree output includes error annotations', () => {
+    it('should include errors/warnings on tree nodes when non-zero', () => {
+      const ops = buildOps(1, 100, ['App', 'Form'], (s) => [
+        ...addOp(1, 5, 0, s('App')),
+        ...addOp(2, 5, 1, s('Form')),
+      ]);
+      tree.applyOperations(ops);
+
+      tree.applyOperations([1, 100, 0, 5, 2, 1, 2]);
+
+      const treeNodes = tree.getTree();
+      const formNode = treeNodes.find((n) => n.displayName === 'Form')!;
+      expect(formNode.errors).toBe(1);
+      expect(formNode.warnings).toBe(2);
+
+      // App has no errors/warnings, so they should be omitted
+      const appNode = treeNodes.find((n) => n.displayName === 'App')!;
+      expect(appNode.errors).toBeUndefined();
+      expect(appNode.warnings).toBeUndefined();
+    });
+  });
 });

packages/agent-react-devtools/src/__tests__/formatters.test.ts

@@ -4,6 +4,7 @@ import {
   formatComponent,
   formatSearchResults,
   formatCount,
+  formatErrors,
   formatStatus,
   formatAgo,
   formatProfileSummary,
@@ -428,6 +429,75 @@ describe('formatCommitDetail', () => {
   });
 });
 
+describe('formatErrors', () => {
+  it('should format empty results', () => {
+    expect(formatErrors([])).toContain('No components with errors or warnings');
+  });
+
+  it('should format components with errors and warnings', () => {
+    const nodes: TreeNode[] = [
+      { id: 2, label: '@c2', displayName: 'Form', type: 'function', key: null, parentId: 1, children: [], depth: 1, errors: 3, warnings: 0 },
+      { id: 3, label: '@c3', displayName: 'Input', type: 'function', key: null, parentId: 2, children: [], depth: 2, warnings: 2 },
+    ];
+
+    const result = formatErrors(nodes);
+    expect(result).toContain('@c2 [fn] Form');
+    expect(result).toContain('✗3');
+    expect(result).toContain('@c3 [fn] Input');
+    expect(result).toContain('⚠2');
+  });
+});
+
+describe('error annotations in tree', () => {
+  it('should annotate tree nodes with errors and warnings', () => {
+    const nodes: TreeNode[] = [
+      { id: 1, label: '@c1', displayName: 'App', type: 'function', key: null, parentId: null, children: [2], depth: 0 },
+      { id: 2, label: '@c2', displayName: 'Form', type: 'function', key: null, parentId: 1, children: [], depth: 1, errors: 1, warnings: 2 },
+    ];
+
+    const result = formatTree(nodes);
+    expect(result).toContain('@c2 [fn] Form ⚠2 ✗1');
+    // App should not have annotations
+    expect(result).toContain('@c1 [fn] App\n');
+  });
+});
+
+describe('error annotations in component', () => {
+  it('should show error/warning annotations when non-zero', () => {
+    const element: InspectedElement & { errors?: number; warnings?: number } = {
+      id: 5,
+      displayName: 'Form',
+      type: 'function',
+      key: null,
+      props: {},
+      state: null,
+      hooks: null,
+      renderedAt: null,
+      errors: 2,
+      warnings: 1,
+    };
+
+    const result = formatComponent(element, '@c5');
+    expect(result).toContain('@c5 [fn] Form ⚠1 ✗2');
+  });
+
+  it('should not show annotations when counts are zero', () => {
+    const element: InspectedElement = {
+      id: 5,
+      displayName: 'Form',
+      type: 'function',
+      key: null,
+      props: {},
+      state: null,
+      hooks: null,
+      renderedAt: null,
+    };
+
+    const result = formatComponent(element, '@c5');
+    expect(result).toBe('@c5 [fn] Form');
+  });
+});
+
 describe('formatChangedKeys', () => {
   it('should format all key categories', () => {
     const keys: ChangedKeys = { props: ['onClick', 'className'], state: ['count'], hooks: [0, 3] };

packages/agent-react-devtools/src/cli.ts

@@ -10,6 +10,7 @@ import {
   formatComponent,
   formatSearchResults,
   formatCount,
+  formatErrors,
   formatStatus,
   formatProfileSummary,
   formatProfileReport,
@@ -39,6 +40,7 @@ Components:
   get component <@c1 | id>     Props, state, hooks
   find <name> [--exact]         Search by display name
   count                         Component count by type
+  errors                        Components with errors/warnings
 
 Wait:
   wait --connected [--timeout S]       Block until an app connects
@@ -260,6 +262,17 @@ async function main(): Promise<void> {
       return;
     }
 
+    if (cmd0 === 'errors') {
+      const resp = await sendCommand({ type: 'errors' });
+      if (resp.ok) {
+        console.log(formatErrors(resp.data as any));
+      } else {
+        console.error(resp.error);
+        process.exit(1);
+      }
+      return;
+    }
+
     // ── Wait ──
     if (cmd0 === 'wait') {
       const timeoutSec = parseNumericFlag(flags, 'timeout', 30)!;