http: fix and improve HTTP, SSR and hydration from the October 2026 audit #324

Context

This comes from a code audit of the HTTP, SSR, hydration and transfer cache area, done during a comparison with other devtools in October 2026. Roadmap items live in #310, #311, #312 and #313. Items marked (to confirm) were not reproduced.

Problems

Medium

• compression breaks SSR sniffing and state edits: when compression() is mounted after ssrMiddleware, it wraps res.write outside our wrapper, so the middleware sees gzip or brotli bytes. The render mode sniff then reads garbage, and bufferForEdits joins the chunks as UTF-8, can't find the TransferState script and only notes "could not edit". Nothing checks content-encoding. Check res.getHeader('content-encoding'), skip the sniff and the edit when it is set, and say "mount ssrMiddleware after compression" in the override note and the request detail (packages/devtools/src/ssr-middleware.ts:156-162, ssr-middleware.ts:180-245).
• network inspector page is too big: network-inspector.ts is 2709 lines, with about 860 lines of inline CSS and the SSR requests, timeline, rules, overrides, hydration and payload sections in one class. Split it into child components (SSR requests, HTTP timeline, rule form, SSR override form, hydration card, payload tree) with a shared store service, and move the styles to a .css file (app/src/pages/network-inspector.ts:1221, network-inspector.ts:2078).

Low

• client cache check disagrees with the server one: transferCacheEligible ignores credentials: 'include' | 'same-origin', which cacheSkipReason treats as a skip, and can't mirror includePostRequests, includeRequestsWithAuthHeaders or includeHeaders. Share one predicate between both files, and let withPangular({ transferCache }) take the app's HttpTransferCacheOptions (packages/devtools/src/http.ts:170-181, packages/devtools/src/http-cache-reason.ts:24-44).
• server "cache hit" is misleading: on the server any synchronous, unmocked response gets cacheHit: true, and list-http-calls prints "cache hit", although Angular's transfer cache never replays on the server. Set cacheHit to false on the server and keep cacheStored as the server signal (packages/devtools/src/http.ts:292, packages/devtools/src/rpc/http-tools.ts:43).
• console patch moves every call site: captureHydrationWarnings replaces console.warn and console.error for good, so Chrome shows every warning and error as coming from http.ts. Add the package output to x_google_ignoreList in the published source maps, and keep a way to undo the patch. phase 3 of 4: a devframe shell as good as Vue and Nuxt DevTools #312 plans one console tap for all three patches; this fix should land with it (packages/devtools/src/http.ts:348-366).
• hydration scan goes stale: after 3 scans the scanner returns its cache while the counter key is unchanged. When ngDevMode is the boolean true, the key is always '', so mismatches from later incremental hydration never show. Each scan also walks up to 50k nodes with SHOW_ALL. Add a MutationObserver flag or a timestamp to the key, walk only elements, text and comments, and rescan after @defer (hydrate on ...) triggers (packages/devtools/src/http-overlay.ts:27-38, packages/devtools/src/http-hydration.ts:45-48).
• duplicated, unanchored URL glob: globMatch is copied in two files. A pattern matches as a substring anywhere, so /api also matches /apiv2 and URLs whose query string contains /api, with no way to anchor it. Extract one helper, support ^ to anchor at the path start (or match the path only, with an opt-in for the query), and show a live match count in the rule form (packages/devtools/src/http-rules.ts:116, packages/devtools/src/ssr-overrides.ts:61).

Improvements

• Payload tab extras: per-key size bars, a payload budget warning (for example over 100 KB, or the largest keys), duplicate keys or the same URL stored twice, and a "refetch this key" action (packages/devtools/src/http-payload.ts, app/src/pages/network-inspector.ts).
• Hydration mismatch diff: show expected and actual side by side, highlight the node through the overlay and jump to the owning component in the component tree (packages/devtools/src/http-hydration.ts, app/src/pages/network-inspector.ts).
• Duplicate and waterfall lint for client calls: the same GET fired N times in a window, sequential calls that could run in parallel, and calls after the stable point that re-request transfer-cache data, plus a lint-http agent tool listed in config.ts (packages/devtools/src/rpc/http-tools.ts, packages/devtools/src/config.ts).
• "Copy as fetch" and "Copy as cURL", and replay of a recorded call, with redacted headers (app/src/pages/network-inspector.ts, packages/devtools/src/http-redact.ts).
• HAR export of a page session, client and server calls plus Server-Timing, with redaction applied (app/src/pages/network-inspector.ts, packages/devtools/src/http-redact.ts).
• Server-Timing entry for each server HttpClient call (fetch-<n>;desc=url;dur=), so Chrome's own Network timing tab shows the breakdown (packages/devtools/src/ssr-middleware.ts, packages/devtools/src/http.ts).
• Rule presets: "offline" (status 0 network error through an ErrorEvent-based HttpErrorResponse), "slow 3G" as a global delay, and a flaky mode that fails at a set rate (packages/devtools/src/http-rules.ts, packages/devtools/src/http.ts).
• Label calls made by httpResource and resource(), and by @defer chunks, so users see which resource issued a request (packages/devtools/src/http.ts).
• Record native fetch calls (Analog $fetch, third-party SDKs, server fetches in resolvers) in dev on both sides, tagged with side and request id (packages/devtools/src/http.ts, packages/devtools/src/http-rules.ts).

Already tracked elsewhere

• SSR tracing for web-standard Request/Response handlers (Hono, h3, Nitro/Analog): phase 4 of 4: lead where no Angular devtools goes today #313.
• Agent tools for TransferState, SSR overrides and hydration explainers: phase 4 of 4: lead where no Angular devtools goes today #313.
• Redacted request and response headers on client calls, and a network waterfall: phase 4 of 4: lead where no Angular devtools goes today #313.