---
title: "Network Error Reporter: Chrome DevTools Failed Request Reporter"
description: A Chrome DevTools extension that turns failed network requests into structured Markdown and image reports.
image: "https://zengliangyi.com/_astro/network-error-reporter.B_slTpPj.png"
---

## Why does one failed request take several messages to explain?

A screenshot may omit request parameters. A copied JSON response may omit what the user was trying to do. Debugging then starts with another round of questions before anyone can reproduce the issue.

Network Error Reporter organizes request evidence and human context into a handoff document. Its Error Report panel in Chrome DevTools focuses on selecting one failed request, adding context and exporting the result.

## From request to handoff

The extension reads HAR data and newly completed requests, focusing on failed Fetch/XHR requests by default. After selection, it extracts useful fields and combines them with impact, frequency and reproduction notes.

It maintains its own list because extensions cannot directly read the selected request in Chrome’s native Network panel. The workflow makes that boundary explicit.

## What belongs in a useful report?

| Layer | Typical information | Purpose |

| --- | --- | --- |

| Environment and request | Page, URL, method, status, duration | Locate the failure |

| Request and response | Headers, parameters, payload and response summary | Supply technical evidence |

| Human context | Impact, frequency, steps, expected and actual results | Explain the scenario |

| Sharing review | Potentially sensitive-field hints | Prompt a final check |

## An anonymous example

Consider a list page whose `GET https://example.com/api/items` request returns `503 Service Unavailable`. Those fields identify a technical failure, but they do not establish its business impact.

Adding “open the list and refresh; items should appear, but loading fails” gives the recipient a reproducible starting point. The cover uses an anonymous request to demonstrate the actual report interface, not real business traffic.

## Implementation choices

Request normalization and report generation live in `panel/report.js`; interactions and preview rendering live in `panel/main.js`. This separates the collected data from how the report is presented.

The report extracts useful request and response details rather than copying all DevTools output indiscriminately. Field-selection controls help users choose the context worth including.

Sensitive-field detection is a warning mechanism, not a guarantee of automatic anonymization. The person sharing a report must still review headers, cookies, parameters and response content.

## Export and scope

Markdown works well in issues, tickets and collaboration messages. Image export supports quick visual handoff: it first attempts clipboard copying, then falls back to downloading a PNG.

The current scope is a single request. It does not include multi-request aggregation, native Network screenshots or HAR export. Use Chrome’s own Copy as cURL when needed.

Installation supports loading an unpacked extension in developer mode. See the [README](https://github.com/ZengLiangYi/network-error-reporter) for the current workflow and capabilities.

##  More projects

[2026

### ChatCrystal

A local-first knowledge app that turns AI coding conversations into reusable notes, semantic search and MCP memory.

#TypeScript

#AI

#MCP](/en/projects/chatcrystal)[2026

### Square Image Workshop

An offline browser tool for square image composition, white backgrounds and compressed JPG export.

#HTML

#Canvas

#Offline Tools](/en/projects/image-tool)[2026

### PaddleOCR-VL Document Parsing Evaluator

Evaluate Baidu Cloud document parsing by comparing reading order, layout coordinates, tables and Markdown with the source document.

#Python

#JavaScript

#Document AI](/en/projects/paddleocr-vl)

##  Have a question or an idea?

Send me a message to discuss an implementation or explore a project idea.

[Contact me](/en/contact) [All projects](/en/projects)

```json
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "ZengLiangYi Blog",
  "alternateName": [
    "Zeng Liangyi",
    "ZengLiangYi",
    "zengliangyi.com"
  ],
  "url": "https://zengliangyi.com",
  "description": "曾亮懿的个人网站。记录 AI Native 探索、开发者工具与全栈产品实践。"
}
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Network Error Reporter",
  "description": "A Chrome DevTools extension that turns failed network requests into structured Markdown and image reports.",
  "url": "https://zengliangyi.com/en/projects/network-error-reporter/",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "codeRepository": "https://github.com/ZengLiangYi/network-error-reporter",
  "image": "https://zengliangyi.com/_astro/network-error-reporter.B_slTpPj.png",
  "author": {
    "@type": "Person",
    "name": "曾亮懿",
    "url": "https://zengliangyi.com"
  }
}
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://zengliangyi.com/en"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Projects",
      "item": "https://zengliangyi.com/en/projects"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Network Error Reporter",
      "item": "https://zengliangyi.com/en/projects/network-error-reporter/"
    }
  ]
}
```