DevTracePad↗
简体中文 ⌄
English简体中文日本語

实践手册 / 报错分析

分享调试背景,不分享秘密

保留失败结构、移除身份信息的实用脱敏流程。

从副本开始

处理相关片段的副本,不要改动唯一的原始日志。如果准确时间可能识别客户会话,可以使用相对时间。账号 ID 应一致替换,例如同一账号始终用 USER_A。每次出现都随机换一个值,可能破坏你正在调查的关联。

检查常见的隐藏位置

检查 Authorization 请求头、Cookie、连接字符串、URL 查询参数和带本地路径的堆栈。JSON 请求体和复制的配置也可能包含秘密。用 REDACTED 替换令牌时,要确保完整移除。自动检测会漏掉特殊格式,因此仍需人工检查。

保留类型与关系

如果失败取决于字符串被误当成数字,就不要把两者都改成相同的占位字符串。保留 null、缺失值和空值的区别。真实主机名可替换为 example.test,但应保留协议和端口是否存在。目标是构造行为结构相同的合成案例,而不只是得到一份看起来整洁却无法说明问题的日志。

确认内容将发往哪里

发送前阅读服务商名称和隐私说明。DevTracePad 的编写示例留在浏览器中,在线 AI 请求则经服务器发送你选择的原文和背景。应用不保留提示词历史,但托管日志和服务商留存属于不同环节。如果组织规则不允许外部处理,应使用合成示例或在已批准环境内调查。

拆解一个具体例子

报错分析

编写示例:这份固定结果仅对应示例原文,不是实时 AI 回复。

原始内容

TypeError: Cannot read properties of undefined (reading "map")
 at ProductList (ProductList.jsx:18)
const [products, setProducts] = useState();
return products.map(product => <li key={product.id}>{product.name}</li>);

解析结果

观察
首次渲染对 products 调用 .map,而 useState() 的初始值为 undefined。

可能原因
初始状态不是数组。这段代码支持此解释,但无法说明后续 API 是否返回合法数组。

下一步验证
检查 setProducts 之前的响应结构:数组是响应本身,还是 response.items?

可尝试的修改
使用 useState([]) 初始化,分别处理加载中、空数据和请求失败状态,并在设置状态前验证响应。

回归检查
检查首次渲染、空响应、正常响应和请求失败。本例没有实际运行组件。