跳到正文
曾亮懿 ZengLiangYi Blog

Network Error Reporter

把 Chrome 中失败的网络请求转成结构化 Markdown 与图片报告,减少接口排查时的重复沟通。

目录 展开 收起

问题:一次失败请求,为什么需要反复解释?

前端看到接口失败,后端需要复现信息,协作者又想知道影响范围。只发一张截图往往缺少请求参数,只发响应 JSON 又缺少操作背景。复制、补写、再次追问,成为排查过程中的额外工作。

Network Error Reporter 把这些信息组织成一份面向交接的报告。它在 Chrome DevTools 中提供独立的 Error Report 面板,围绕单条失败请求完成选择、补充和导出。

从请求到交接材料

工具读取 HAR 和新完成的请求,默认聚焦失败的 Fetch/XHR。选择请求后,面板提取有价值的信息,再结合手动填写的影响范围、错误频率和复现步骤生成报告。

扩展维护自己的请求列表,用户在扩展面板中选择需要生成报告的请求。Chrome 扩展接口无法直接获取原生 Network 面板当前选中的请求。

报告里应该有什么?

一份可以交接的报告,需要同时回答技术问题和场景问题:请求发到了哪里、返回了什么、用户做了什么,以及接收者下一步该如何验证。

信息层 典型内容 作用
环境与请求 页面地址、请求 URL、方法、状态码、耗时 定位发生了什么
请求与响应 有价值的头部、参数、负载和响应摘要 提供排查证据
业务上下文 影响范围、频率、复现步骤、预期与实际结果 说明为何值得关注
分享检查 潜在敏感字段提示 提醒分享者检查内容

一个匿名示例

假设列表页加载失败,面板选中 GET https://example.com/api/items,响应状态为 503 Service Unavailable。技术字段能说明请求失败,但不能替用户判断业务影响。

补充“打开列表页后点击刷新,预期显示条目,实际出现加载失败”以后,接收者才有可执行的起点。页面首图使用这一类匿名请求展示实际报告界面,不含真实业务流量。

实现取舍:报告比原始数据更接近交接目标

请求归一化与报告生成集中在 panel/report.js,面板交互与预览在 panel/main.js。职责分离让“收集到的数据”和“怎么呈现给人”能够分别处理。

报告会提炼请求和响应中的信息。用户可以选择包含哪些字段,让接收者集中查看排查所需的内容。

分享前的敏感字段检测是提示机制,不是自动脱敏承诺。报告仍需要人工确认,尤其是包含认证头、Cookie、业务参数或响应正文时。

导出与当前边界

  • Markdown 适合粘贴到 Issue、工单或协作消息中,保留结构化文本。
  • 图片适合快速浏览和转发;导出会优先尝试复制到剪贴板,失败时回退为下载 PNG。
  • 当前聚焦单请求,不做多请求聚合分析、原生 Network 截图采集或 HAR 导出。
  • 需要 cURL 时,使用 Chrome 原生的 Copy as cURL。

安装可通过开发者模式加载解压后的扩展目录。完整流程和当前功能范围见 项目 README。

有问题或想法?

无论是讨论技术实现,还是交流项目思路,都可以给我留言。