F12 Console Audit

The F12 Console Audit page (/admin/f12-audit) loads every page on the site in a hidden iframe and captures console errors, warnings, uncaught exceptions, and failed resource loads. It's the equivalent of opening DevTools on each page and checking the Console tab.

How It Works

Capture Script

Both CosmicLayout.astro and BaseLayout.astro inject a tiny capture script that intercepts console.error, console.warn, and window.onerror events, storing them in window.__f12. When the audit page loads each URL in an iframe, it waits 2 seconds for the page to settle, then reads window.__f12 from the iframe's contentWindow.

Page Suites

Pages are organized into 10 suites:

Suite	Pages	Scope
Core Pages	10	Homepage, about, contact, status, etc.
Blog & Content	5	Blog, journal, projects, resources, tags
Documentation	3	Docs landing + sample pages
Playground	12	All playground subpages
Command Center	10	All command center panels
User & Dashboard	7	User pages + dashboard
Ansible	2	Sandbox + docs
Learn & Resources	9	Learning content + resource categories
Projects	3	Project showcase pages
Admin Pages	30	All admin panel pages

Total: ~91 pages tested per run.

Noise Filtering

The audit filters out known-harmless messages that would create false positives:

Pattern	Source	Why Filtered
Download the React DevTools	React	Dev-only advisory
Lit is in dev mode	Lit	Dev-only advisory
[vite]	Vite HMR	Dev-only messages
DevTools failed to load source map	Browser	Extension-related
chrome-extension://	Extensions	Not our code
moz-extension://	Extensions	Not our code
net::ERR_BLOCKED_BY_CLIENT	Ad blockers	User's browser config
beacon.min.js	CF Analytics	Blocked by iframe same-origin policy
Network API unavailable	Command Center	Expected when backend is offline

UI Features

Summary Dashboard

Five stat cards show aggregate counts: Errors, Warnings, Exceptions, Clean pages, and Elapsed time. Cards with non-zero error/warning/exception counts display a subtle glow effect.

Card-Based Results

Each page result renders as an individual glass card with:

• Left border accent (3px) color-coded by status: red (error), amber (warning), green (clean), gray (timeout)
• Status dot with glow effect
• Path in monospace font
• Count tags for errors, warnings, exceptions, and failed resources
• Timing badge showing page load duration

Click a card to expand its detail panel showing categorized messages with icons and colored sub-cards.

Filtering

Pill-shaped filter buttons toggle visibility by status: All, Errors, Warnings, Clean, Timeout.

Export Options

• Copy Results — Formats all non-clean results as human-readable text and copies to clipboard
• Download JSON — Exports full results including timestamp, summary stats, and per-page data as a .json file named f12-audit-YYYY-MM-DD.json

Auto-Collapse

After the audit completes, suites where every page is clean automatically collapse to reduce noise.

Progress Persistence (Resume Support)

The audit now persists checkpoint state to browser storage while running so a refresh or route change does not lose progress.

• Storage key: argobox:f12-console-audit:checkpoint:v1
• Saved state includes:
  • current run status (running, completed)
  • start time and elapsed duration
  • current cursor (suite/page index)
  • all completed page results (status + message arrays + timing)
• Save points:
  • before each page audit starts
  • after each page audit completes
  • on manual stop
  • on astro:before-swap navigation

On page load, /admin/f12-audit restores saved cards and summary. If a prior run is incomplete, it automatically resumes from the first not-yet-completed page unless the run was explicitly stopped by the user.

Navigation behavior:

• Leaving /admin/f12-audit during a run now saves a resumable checkpoint (running: true) instead of forcing a stopped state.
• Returning to the page auto-continues from the next incomplete URL.
• Using the Stop button marks the checkpoint as user-halted and disables auto-resume until you click Run Audit again.

Limitation:

• This audit is client-side (hidden iframe runner), so it does not execute while you are off-page.
• It resumes accurately when you return, but true background execution requires moving the runner to a server-side job API.

Interpreting Results

Status Levels

Status	Meaning	Action
Clean	No console output after noise filtering	None needed
Warning	console.warn or failed resources	Review — may be expected (offline APIs)
Error	console.error or uncaught exceptions	Investigate — likely a real bug
Timeout	Page didn't load within 20 seconds	Check if page hangs or has redirect loops

Common Patterns

Cross-origin redirect (CF Access login?) — The page redirected to Cloudflare Access login. This happens for SSR admin pages that require authentication. Expected when not logged in.

Page redirected to /path — The iframe's final URL differs from the requested URL. May indicate a redirect that should be expected behavior.

Failed to fetch / HTTP 404 — A client-side API call returned 404. This may be expected if the backing service is offline, but should use console.warn (not console.error) if the page has fallback UI.

Bug Fix Patterns

When the F12 audit finds real errors, common fixes include:

import.meta in Inline Scripts

<script is:inline> tags are plain JavaScript — they cannot use import.meta.env. Move env var reads to the Astro frontmatter and inject via define:vars:

---
const API_URL = import.meta.env.PUBLIC_API_URL || 'https://fallback.example.com';
---
<script is:inline define:vars={{ API_URL }}>
  // API_URL is available as a plain variable
  fetch(API_URL + '/endpoint');
</script>

API Fetch Error Severity

Pages that fetch from optional backends should use console.warn (not console.error) when the API is unavailable, provided the page has fallback UI. This keeps the F12 audit clean while still logging the issue.

Key File

File	Role
src/pages/admin/f12-audit.astro	The full audit page — HTML, CSS, and inline JS