console-triage

Console triage

Target: $ARGUMENTS (if empty, ask for the URL).

A page that looks correct in the screenshot and still logs a hydration mismatch is broken. The pixels were produced by a client re-render that threw away the server markup; the next state change, or the next visitor on a slow connection, gets a different page. Never close a diagnostics issue because the screenshot looks fine.

Steps

1. Capture with inspect_localhost_ui. Use delay: 3000 — most diagnostics fire during hydration and data fetching, so a short wait under-reports. fullPage is irrelevant here; leave it off unless lazy-loaded sections below the fold are what you are chasing.

2. Read summary first: consoleErrors, consoleWarnings, uncaughtPageErrors, failedRequests. Those four counts are your work list. If all four are zero, say so and stop — do not go hunting for problems.

3. Group by root cause, not by line. One bad prop can emit forty identical warnings. Collapse them into a single item with a count, and use consoleLogs[].location (file:line:column) to pin the origin.

4. Triage each group. The recurring ones and what they actually mean:

   • React hydration mismatch (Hydration failed, Text content did not match, did not match server-rendered HTML). Server and client rendered different trees. Usual causes: Date/Math.random/toLocaleString at render time, reading window/localStorage during the first render, typeof window !== 'undefined' branching in the returned markup, or invalid nesting the parser rewrites (<div> inside <p>, <p> inside <p>). Fix by moving the non-deterministic read into useEffect, or gating it behind a mounted flag. Highest severity: it invalidates the whole render.

   • Undefined access during render (Cannot read properties of undefined, x is not a function) — usually in uncaughtPageErrors, and usually paired with a blank or partial screenshot. Data arrived later than the component assumed, or a .map ran on undefined. Fix with the loading/empty state the component is missing, not with a blanket optional chain that hides the real hole.