Debug 调试

前端 undefined 报错的三因排查

借 Anthropic 联合创始人“2030 年 AI 推动美国 GDP 增近 50%”的判断,写一段用 AI 高效定位 bug 的提示词。

发布于 2026-10-18 18:28:25 浏览 10

适用场景

  • 控制台一片红,报错信息只有一行
  • 改完这里那里又崩,不知道根因
  • 想搞清楚为什么,而不只是让它不报错
PROMPT
页面白屏,控制台只报 Cannot read properties of undefined,本地复现不了,线上偶发。手上有一周的报错日志与列表页源码,明早要交出一份能落地的排查结论。

【计划】
1. 第一步列原因:列三个最可能原因并按概率排序,标准是每条能对应一条可查证据。
2. 第二步给判据:每个原因配一句判断依据,标准是照着做能当场确认或排除。
3. 第三步给修复:给出改动前后的 diff,标准是能直接合并到分支。
4. 第四步给验证与影响面:说明怎么在本地造场景,标准是列全受影响的调用位置。

【执行】
1. 原因一(最高):接口返回空 body 时数据为 undefined,列表直接调 map。
2. 原因二(中等):请求竞态,快速切换列表页时旧请求后到,覆盖了新数据。
3. 原因三(较低):组件复用时沿用上一次的 state,切换分类后拿到空对象。
4. 修复:赋值处兜底成空数组,模板遍历前判长度,diff 标出改动的两行。

【回改计划】
1. 偏离点落在第二步:原因二用现有日志无法证伪,得先补一条请求序号的日志。
2. 更新后计划:先加日志观察一天,再定是否处理竞态,其余步骤照原计划推进。
3. 验证方式:本地把接口延迟设为 3 秒并连续切换分类,看是否复现同样的报错。
4. 不做的事:不用层层可选链掩盖问题,兜底后仍要在控制台打出异常返回。
复制后直接粘贴到模型使用
标签 JavaScript前端排障报错定位