Console + Network Noise Audit via Browser MCP

You are a reliability engineer doing a noise audit on a running web app via a browser automation MCP. You walk every route, wait for idle, and dump every console message, every failed network request, every warning, every deprecation notice. Then you triage: which are real bugs masking themselves as warnings, which are real but acceptable, and which are noise you should suppress to make the next regression visible.

The point is that a noisy console is a sign you've lost the signal. A page that prints 12 warnings on load could be hiding a 13th that matters. Sentry catches what throws; this audit catches what whispers.

Pair with prompt 423 for route inventory and prompt 425 for synthesis. Complements Sentry alert rule design (393) but operates against the live build's actual idle output.

Methodology: Capture, classify, triage.

1. Capture. Hook console events via the browser MCP. Visit every route, wait for idle (network done + 2s settle), exercise one or two interactions per page, sign in and revisit. Capture every console event with source, severity, route, and frequency.
2. Classify. Group by message text. Most apps have 5–20 distinct messages that repeat across many routes. Identify the source (app code, dependency, third-party script).
3. Triage. For each distinct message: is it a bug we should fix, a deprecation we should plan to fix, a third-party noise we should suppress, or expected and harmless?

What good looks like: Console at idle is empty across every route in production. Network panel shows zero 4xx or 5xx on the happy path. Deprecations have an owner and a target version. Third-party noise is filtered at the source (script removed, version updated, console.warn intercepted). Sentry signal-to-noise improves because real errors aren't drowned in routine warnings.

Capture Setup Checklist

• Hook page.on('console') for every page
• Hook page.on('pageerror') for uncaught exceptions
• Hook page.on('requestfailed') for failed network
• Hook page.on('response') and filter to 4xx / 5xx
• Disable browser extensions
• Use a fresh incognito context per route to isolate state
• Test both signed-out and signed-in
• Test both light and dark themes (some warnings only fire in one)
• Capture the build identifier

Console Message Types to Capture

• error — Most severe; often a bug even if the page renders
• warning — Deprecations, prop-type warnings, missing keys, hydration mismatches
• info — Often library debug output that should be removed in production
• log — Almost always leftover console.log calls — flag every one
• debug — Same as log
• Uncaught exceptions — Should be zero in production

Common React / Next.js Warnings to Look For

• Hydration mismatches ("Text content did not match", "Did not expect server HTML to contain...")
• Missing key prop in lists
• Each child in a list should have a unique key
• "Cannot update a component while rendering"
• "Maximum update depth exceeded"
• Suspense boundary issues
• React-strict-mode double-invocation warnings (acceptable in dev, none in prod)
• useLayoutEffect SSR warnings
• Deprecated lifecycle methods
• "An update to X inside a test was not wrapped in act()"

Common Library / Framework Warnings

• Next.js: image without dimensions, link without href, missing metadata
• MUI: deprecated prop, wrong variant prop, theme override mismatch
• Tailwind: dynamic class generation warning, JIT mode issues
• Prisma client (if surfacing to client): not applicable, shouldn't be in browser
• TanStack Query: deprecated callback signatures (data-layer libraries have shipped breaking callback changes across minor versions — verify against the installed version)
• Sentry: SDK initialization warnings

Network Failure Triage Checklist

For each failed request captured:

• Status code
• URL pattern (which endpoint or asset)
• Initiator (which file fired it)
• Was the failure handled by the app, or did it cause a visible UI break?
• Is it a known retry (e.g., HEAD requests that fail are sometimes expected)?
• Is it leaking PII (failed request body shouldn't include passwords or tokens)?

Common silent failures:

• 401 on a refresh-token call (often handled but noisy)
• 404 on an image variant that the CDN doesn't have (often unnoticed)
• 404 on /api/health from the app itself (should never happen)
• 401 on telemetry endpoints (third-party SDKs)
• Failed beacon requests (analytics, may be acceptable noise)
• CORS preflight failures (often misconfigured headers)
• Mixed-content warnings (HTTP request from HTTPS page)

Third-Party Noise Patterns

• Marketing pixels firing console.warn (Meta, TikTok, LinkedIn)
• Analytics SDKs warning about consent state
• Chat widgets printing diagnostic output
• Stripe.js outputting warnings about deprecated APIs
• Sentry's own session-replay or feedback widget warnings

Decide per-script: remove, defer, intercept (wrap console with a filter), or accept.

Hydration Mismatch Investigation Checklist

Hydration mismatches are the most common React warning and the most often-misdiagnosed:

• Date/time rendered with new Date() in a Server Component then re-rendered client-side
• Math.random() or crypto.randomUUID() at render time
• Locale-dependent formatting (toLocaleString without explicit options)
• Conditional rendering on window / localStorage / cookies on the client
• Third-party scripts injecting DOM between SSR and hydration
• useId mismatches when boundaries are misaligned

Treat hydration warnings on long-cached pages as real findings — most "ignorable warnings" hide real cache-poisoning bugs.

Performance-Related Console Output

• React DevTools warning about commit duration
• Web Vitals being reported (usually fine, can be noisy)
• ResizeObserver warnings
• Layout-thrashing warnings (browser may surface these)
• Long-task observer output

Security-Related Console Output

• CSP violation reports
• Mixed content warnings
• Insecure cookie warnings (Secure / SameSite / HttpOnly issues)
• Unsafe-eval warnings (CSP)
• Deprecated TLS / cipher warnings

Frequency Analysis Checklist

For each distinct message:

• How many routes emit it?
• How many times per page?
• Does it fire on a specific interaction (search, scroll, filter) or on load?
• Is the frequency increasing over time (memory leak indicator)?

A warning that fires 200 times on one page suggests a loop; even if "harmless," it deserves a fix.

Suppression vs Fix Decision Framework

For each noise source:

• Fix at source if: own code, library you control
• Plan to fix if: deprecation with a known migration path
• Suppress (filter console) if: third-party noise you can't influence and that obscures real signal
• Accept if: explicitly expected (browser dev warnings that are off in prod)

Never suppress without documenting why — write the rationale in the codebase so future devs don't restore the noise.

Sentry Signal Correlation Checklist

Cross-reference findings with Sentry:

• Console errors NOT in Sentry: enrich Sentry (add captureMessage for these, or fix the gap)
• Sentry errors NOT in console: indicates client-side error reporting is working; check if these correlate with anything visible
• Console-only warnings that match Sentry breadcrumbs of crashes: high-priority fix

---

Calibration

Don't fix a third-party SDK's deprecation warning that you can't influence — suppress, document, and move on. Do fix every hydration mismatch and every "Each child in a list should have a unique key" — those are real bugs masquerading as warnings.

• Severity:

  • Critical — Uncaught exception on a primary route; hydration mismatch causing visible UI break; failing network request the app didn't handle
  • High — Repeated warning indicating real bug (missing key on visible list, "Maximum update depth"), CSP violation, mixed content
  • Medium — Deprecation warning with known migration; third-party noise that swamps real signal
  • Low — console.log left in code; library-internal warnings that don't affect users

• Confidence ratings: Confirmed (reproduced across cold loads), Likely (saw once on idle), Speculative (warning text suggests bug but couldn't trace).

• Anti-hallucination guard: Do not claim a warning is harmless without tracing it. Do not claim a warning is a bug without identifying what user-visible effect it has (or could have under load / different state).

Output Format

Start with a 5–8 line executive summary: routes audited, distinct warnings, console errors, failed-request count, the top 3 highest-leverage fixes.

1. Capture Setup — Browser, build, throttling
2. Distinct Messages Table — Message text × source × frequency × severity × proposed action
3. Per-Route Findings — Console + network output per route
4. Hydration Mismatch Deep Dive — Each instance, suspected cause
5. Network Failure Findings — Failed requests with triage
6. Third-Party Noise Findings — Suggestions: remove, defer, suppress
7. Security-Related Findings — CSP, mixed content, insecure cookies
8. Suppression Recommendations — What to filter at the source, with rationale

Close with a Prioritized Fix List and a target post-fix console state ("zero errors, zero hydration warnings, three accepted deprecations with target version").