What causes "inspect failed: ${result && result.type}" in vercel-labs/agent-browser?

Re-run 'react tree' and inspect the fresh id immediately

inspect failed: ${result && result.type}

Error message

inspect failed: ${result && result.type}

What it means

TREE_INSPECT calls ri.inspectElement(rendererId, id, null, true) and requires a result of type 'full-data'. React DevTools can return null or other result types (for example a 'hydrated' payload that needs a second inspect, or 'no-data') when the fiber re-rendered or unmounted between the snapshot and the inspect. The thrown message embeds the actual result type for diagnosis.

Source

Thrown at cli/src/native/react/scripts.rs:147

  });

  return JSON.stringify(nodes);
})()
"#;

/// Template for `inspect` — replace {{ID}} with the numeric fiber id.
pub const TREE_INSPECT: &str = r#"
(() => {
  const id = {{ID}};
  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
{{PICK_RI}}
  const __abRiId = __abPickReactRendererId(hook);
  const ri = (__abRiId != null && hook.rendererInterfaces && hook.rendererInterfaces.get) ? hook.rendererInterfaces.get(__abRiId) : null;
  if (!ri) throw new Error("No React renderer attached");
  if (!ri.hasElementWithId(id)) throw new Error("element " + id + " not found (page reloaded?)");
  const result = ri.inspectElement(__abRiId, id, null, true);
  if (!result || result.type !== "full-data") {
    throw new Error("inspect failed: " + (result && result.type));
  }
  const v = result.value;
  const name = ri.getDisplayNameForElementID(id);
  const lines = [name + " #" + id];
  if (v.key != null) lines.push("key: " + JSON.stringify(v.key));
  section("props", v.props);
  section("hooks", v.hooks);
  section("state", v.state);
  section("context", v.context);
  if (v.owners && v.owners.length) {
    lines.push("rendered by: " + v.owners.map((o) => o.displayName).join(" > "));
  }
  const source = Array.isArray(v.source)
    ? [v.source[1], v.source[2], v.source[3]]
    : null;
  return JSON.stringify({ text: lines.join("\n"), source });

  function section(label, payload) {

View on GitHub (pinned to 548b159b30)

Solutions

Re-run 'react tree' and inspect the fresh id immediately
If the message says 'hydrated', simply call 'react inspect <id>' again — the second call returns full data
Pin down flaky pages first (wait for stable state) before inspecting

Example fix

# before
agent-browser react inspect 42   # inspect failed: hydrated

# after
agent-browser react inspect 42   # call again; or re-snapshot:
agent-browser react tree && agent-browser react inspect 17

Defensive patterns

Strategy: retry

Try / catch

// try { await reactInspect(id); } catch (e) {
//   if (/inspect failed: hydrated/.test(String(e))) retry once;
//   else re-snapshot the tree and inspect the fresh id;
// }

Prevention

Snapshot immediately before inspect on dynamic pages
Retry once on 'hydrated' — the second inspectElement call returns full-data
Avoid inspecting during HMR or route transitions

When it happens

Trigger: Inspecting an element that unmounted or re-rendered (key change, route change, HMR) after the snapshot; inspecting immediately after a reload; concurrent features causing fiber churn during inspection.

Common situations: Agent flows that snapshot once and inspect much later; dev servers with hot reload invalidating fibers; animations/lists reordering element ids.

Related errors

AI-assisted analysis of vercel-labs/agent-browser@548b159b30 (2026-08-16). Data as JSON: /api/errors/a975dbbca7b8a3ff. Report an issue: GitHub.