SSR inspector: trace a request from the browser to the rendered response

[erkamyaman]

Show what happens while the server renders a page, from the incoming request to the HTML sent back and hydration in the browser. Then use the same hooks to change responses and simulate failures.

Phase 1: observe

• Request timeline. One entry per SSR request:
  • method, URL and the matched ServerRoute with its RenderMode
  • server-side guards and resolvers, with timings
  • render time, and the final status and headers set through RESPONSE_INIT
• Server HTTP calls. Every HttpClient call made during render: URL, status, time and size.
• Transfer cache. Which responses went into the transfer cache, and which were left out and why (filter, auth headers, POST without includePostRequests). Also flag calls the browser made again after hydration, meaning the cache missed.
• Hydration. Hydrated nodes, NG0500 mismatches, and time until the page was interactive.
• One id per request. It links the server trace to the page that loaded in the browser, so both sides show as one story.
• Server-Timing. Add a Server-Timing header so the browser's own Network panel shows render and fetch time too.
• MCP tools: list-ssr-requests and explain-ssr-request.

Phase 2: intervene (dev only, opt-in, clearly marked)

• Override a server HttpClient response: status, body, headers, delay.
• Simulate failures: API error, timeout, an error thrown during render. Then show what the user gets (client-side fallback, error page, status code).
• Force the render mode for one request (Server, Client, Prerender fallback) without editing app.routes.server.ts.
• Edit transfer cache entries before hydration to test how the client handles different data.

How it could work

• Devframe already runs in the same Node process as the SSR server, so server events can be recorded directly. feat(analog): Analog support, from file routes to server calls #30 does this for Analog (load() calls, API routes, render mode per request) and can be reused.
• Record through the AngularNodeAppEngine handler and an HttpClient interceptor that is only added in development. REQUEST and REQUEST_CONTEXT carry the request id.
• Open question: can we add the interceptor without the user editing app.config.server.ts, or is one opt-in provider acceptable?
• Redact secrets in headers, cookies and bodies, the same way forms values are redacted.

Prior art

• Nuxt DevTools: payload tab and payload editor (edit what the server passed to the client), server routes playground.
• react-router-devtools: network tab with server loader tracing, errors tab for hydration issues.
• Next.js: development logging of incoming requests, server fetches and Server Function durations.