TraceFault szerző: George Viaud

TraceFault

A Firefox extension that surfaces failed network requests at a glance. It shows a badge count on the toolbar icon and a detailed table (popup or pop‑out window) with each failure’s time, type, HTTP status (when present), error, and URL.

What it does

• Monitors page resource loads (images, scripts, stylesheets) and XHR/fetch requests
• Records failures from:
• HTTP 4xx/5xx responses
• Network errors (DNS, timeouts, blocked) via onErrorOccurred
• Maintains per‑tab state (counts and a capped list of recent failures)
• Displays a table of failures in the popup; supports a per‑tab pop‑out window
• Resets count/list on top‑frame reload

Quick start

1) Install dependencies:

npm install


2) Build the extension:

npm run build


3) Load into Firefox temporarily:
- Open about:debugging → This Firefox → Load Temporary Add‑on…
- Choose dist/manifest.json

Using TraceFault

• Browse to any page. When a resource or XHR/fetch fails, the toolbar badge increments.
• Click the icon to open the popup and see a table of recent failures.
• Click “Pop out” to open a dedicated window for that tab. Each tab can have its own pop‑out.
• Click “Clear” to reset the list and the badge for the current tab.

Quick test (in the web console on any page):

new Image().src = 'https://httpbin.org/status/404'


Permissions and privacy

• webRequest, webNavigation, tabs, windows, and "<all_urls>"
• Data is local only: URL, type, status/error, timestamp. No remote transmission.

Architecture

• Manifest: MV2 with background.scripts for broad Firefox compatibility
• Background (src/background.ts):
• Attaches webRequest.onCompleted and onErrorOccurred
• Tracks per‑tab failures in memory (capped)
• Updates per‑tab badge and broadcasts updates to views
• Manages per‑tab pop‑out windows
• Popup/Pop‑out (src/popup/*):
• Renders a table (Time, Type, Status, Error, URL)
• Live‑updates via background messages
• Pop‑out hides the pop‑out button and expands to full width; resizes responsively

Development

• Source lives in src/ (TypeScript). Vite bundles to dist/.
• After changes:

npm run build
cp public/manifest.json dist/manifest.json


• Load dist/manifest.json in about:debugging as above.

Troubleshooting

• No badge updates or empty popup:
• Ensure you loaded the built dist/manifest.json
• Test on a normal web page (not about:*)
• “background.service_worker is disabled”:
• This project uses MV2 (background.scripts) specifically to avoid that. Make sure you’re loading the dist/manifest.json generated from public/manifest.json.

Roadmap ideas

• Filters (by type/domain/code)
• Copy row / export list
• Optional persistent storage with retention policy

Authors

• George Viaud <george@infinitycyberworks.com>