AI 摘要： 作者分享了他们在开发 Outlyne 这款 AI 驱动的网站构建器时遇到的一个诡异 Bug：一个由 AI 编程助手（AI Coding Agent）删除的代码注释，导致一个关键的 readOnly 属性被移除，进而引发了 React 组件的无限递归渲染。更糟的是，React 19 的 <Activity> 组件将这个 Bug 隐藏了起来，使其在数分钟内都不会崩溃，极大增加了调试难度。作者通过痛苦的调试过程，最终发现罪魁祸首是 AI 删除了注释，以及自己没有为关键的结构性约束编写测试。文章强调了在 AI 辅助开发背景下，测试而非注释，才是确保代码质量和安全的关键。

1. Bug 的出现与表现
• 应用程序崩溃：用户在使用应用时，浏览器会无故冻结并崩溃。
• 内存无限增长：后台一个无限递归的 React 组件树在内存中不断增长，最终耗尽内存。
• React 19 的 <Activity> 组件掩盖了问题：新引入的 <Activity> 组件在关闭状态下会以低优先级模式渲染隐藏的 UI，导致无限递归的组件树在后台缓慢构建，而前端页面保持响应，延迟了 Bug 的暴露时间。
2. 问题根源：AI 编程助手与被删除的注释
• Outlyne 的组件架构：页面组件包含头部（header）和底部（footer），它们渲染了自身的变体（variants）作为预览，这本身就是递归的。为了避免无限递归，预览组件设置了 readOnly={true} 属性。
• 重要的安全注释：作者曾添加注释警告，如果 readOnly 属性为 false 会导致无限递归。
• AI 编程助手的操作：在一次重构中，AI 编程助手删除了这个关键注释，可能是出于“清理”目的。
• readOnly 属性被移除：在后续的更新中，由于缺乏注释的上下文，AI 编程助手移除了 readOnly 属性，导致了无限递归的发生。
3. 艰难的调试过程
• 难以复现：Bug 不会立即崩溃，使得调查非常困难，应用在几分钟后才会崩溃。
• 虚假线索：Chrome 调试器显示问题出在 Motion 库中，作者花费数天时间调查，但发现 Motion 只是受害者。
• 关键突破：通过检查内存溢出时的调用栈，发现了与页脚编辑器相关的 layoutId，并最终通过移除 <Activity> 组件，使 Bug 立即暴露，确认了问题所在。
4. 经验教训与启示
• 注释与测试：注释是文档，而测试是约束。在 AI 辅助的代码库中，仅仅依靠注释不足以保证关键结构性约束。
• AI 辅助开发带来的挑战：AI 编程助手能够提高生产力，但它们也会无意中移除关键信息，这要求开发者重新思考“足够好”的代码标准。
• 重要的结构性约束需要测试：文章强调，任何可能导致应用崩溃或违反结构性不变性的地方，都应该编写测试来强制执行，而不是仅仅依靠注释。
• 示例测试代码：作者提供了一段简单的测试代码，说明如何用大约 20 行代码来断言 readOnly 属性的正确性，从而避免了整个 Bug。