使用Puppeteer page.$eval获取body子元素返回undefined，用于React fiber树渲染

根因说明 #

Puppeteer 中所有执行浏览器上下文代码的API（包括$eval、evaluate、evaluateHandle），返回值需要经过JSON序列化才能传递到Node.js运行环境：

• DOM元素属于浏览器宿主对象，本身无法被序列化，直接返回el.children会因为序列化失败得到undefined
• 强制对DOM元素调用jsonValue()时，因为DOM对象存在大量循环引用（父子节点互相引用、节点关联window和document对象等），就会抛出Object reference chain is too long报错

解决方案 #

你的核心需求是查找DOM节点上的_reactRootContainer属性，不需要把完整DOM节点回传到Node层，直接在浏览器上下文完成属性查找、提取可序列化数据即可，有两种常用实现方式：

方案1：浏览器侧完成逻辑，直接返回结果 #

const reactRootInfo = await page.$eval('body', el => {
  // 直接在浏览器环境遍历子节点找目标属性
  for (const child of el.children) {
    if (child._reactRootContainer) {
      // 仅返回需要的纯数据，过滤不可序列化的内容
      const fiberRoot = child._reactRootContainer._internalRoot
      return {
        tag: fiberRoot.tag,
        current: {
          type: fiberRoot.current.type,
          key: fiberRoot.current.key,
          elementType: fiberRoot.current.elementType
        }
        // 在这里按需添加你需要的Fiber节点属性即可
      }
    }
  }
  return null
})

console.log(reactRootInfo)

方案2：Node层用元素句柄操作 #

如果需要在Node侧控制遍历逻辑，可以用Puppeteer提供的ElementHandleAPI操作，不要直接转JSON：

const bodyHandle = await page.$('body')
// 获取body下所有子元素的句柄
const childHandles = await bodyHandle.$$(':scope > *')
let targetRoot = null

for (const handle of childHandles) {
  // 检查当前节点是否存在_reactRootContainer属性
  const hasReactRoot = await handle.evaluate(el => !!el._reactRootContainer)
  if (hasReactRoot) {
    targetRoot = handle
    break
  }
  // 释放不用的句柄避免内存泄漏
  await handle.dispose()
}

// 后续可对targetRoot做进一步操作，使用完记得释放
if (targetRoot) {
  // 你的业务逻辑
  await targetRoot.dispose()
}
await bodyHandle.dispose()

Fiber树爬取优化建议 #

针对你要爬取React Fiber树做可视化的场景，建议直接在浏览器上下文完成完整Fiber树的遍历、属性提取，组装成纯JSON结构之后再回传到Node层，既可以避免序列化问题，也能大幅提升执行效率。

内容的提问来源于stack exchange，提问作者Phil Sentance