How this rule is fixed

Pilot deterministic fixer: handbook_after · harness mode standalone · verify expect_rule_clean.

• Harness: apply-harness-fixture-remediation.py copies the After example HTML from this handbook page onto the defect fixture, then invoke-det-ruleset-remediation-verify.sh re-audits and expects zero findings for this rule.
• Production sites: run-website-ux-remediation-loop.sh runs handbook_html_patch (HTML patches in lib/ux-deterministic-fixers/fixers/patches/) before invoking the Cursor agent when the quality gate still fails.

Detection module: docs/design/ux-audit/deterministic-design-rules.md#det-js-no_console_error. Scroll down for Before / After examples and Evidence and remediation steps.

Purpose

Kitchen Sink pages ship Bootstrap 5 toggles (data-bs-toggle="tab", collapse, pill), <details> summaries, theme controls (forge-theme-trigger, [data-theme-toggle]), and mobile nav (navbar-toggler). Companion scripts under js/ (forge-theme.js, portal-nav.js, ks-diagram-modal.js, and related Ksj family modules) attach to those hooks during load and on user interaction.

This deterministic rule proves that golden-path smoke—a bounded sequence of up to five clicks on the selectors the auditor probes—does not emit console type error messages or pageerror uncaught exceptions. Failures usually mean a missing DOM hook, a script loaded before its dependency, or inline page logic that throws when a tab or theme control is activated.

Plan: Treat showcase and handbook routes with scripted chrome as smoke targets. Do: Fix the underlying exception in js/ or page wiring, then re-run Playwright smoke. Check: metrics.jsConsoleErrorReport has errorCount: 0. Adjust: Pair with DET.JS.PROGRESSIVE when content also depends on script to render; this rule does not replace noscript baseline checks.

Passing signals

• metrics.jsConsoleErrorReport: { errorCount: 0, errors: [], smokeSteps: N } after collectJsConsoleErrorReport (or precomputed crawl metrics).
• Golden-path clicks on [data-bs-toggle="tab"], collapse, pill, <details> summary, theme toggles, and .navbar-toggler[data-bs-toggle="collapse"] complete without new console errors.
• fs-tab-panel tab buttons switch panes via Bootstrap only; no inline handler calls console.error or references undefined globals (forgeAmbient, chart hosts, etc.).
• forge-theme-trigger dropdown opens and applies theme without throwing; forge-theme.js finds expected data-bs-theme-value nodes when present.
• pageerror channel stays silent during load and smoke (no Uncaught ReferenceError / TypeError from missing bundles).
• Ignored noise only: favicon load failures, ResizeObserver loop, extension URLs, devtools source-map chatter (shouldIgnoreConsoleMessage filters these).
• Showcase smoke and consumer handbook builds pass the same probe on audited URLs.

Failing signals

• console error during load or smoke—for example Chart init failed: missing container with kind=console and location=…app.js:12.
• pageerror—for example Uncaught ReferenceError: forgeAmbient is not defined (major severity).
• Finding evidence includes kind=console or kind=pageerror, quoted message="…", optional location=, smokeStep=N, and url=.
• Tab click on fs-tab-panel__tabs triggers an intentional console.error from inline <script> (harness defect pattern).
• Theme or mobile nav toggle runs before forge-theme.js / portal-nav.js is loaded, leaving handlers on undefined.
• Errors appear only after the fifth smoke step—still a fail if any non-ignored error occurred earlier on that URL.
• Page may still expose readable HTML without script (DET.JS.PROGRESSIVE) while failing here—console hygiene is independent of noscript baseline.

Before example

After example

Evidence and remediation

Evidence: Playwright listeners in beginJsConsoleErrorCapture record console error lines and pageerror events while runGoldenPathSmoke clicks up to five visible controls from SMOKE_SELECTORS (tabs, collapse, pills, details summary, theme toggle, navbar toggler). Findings cite kind=, message="…", optional location=, smokeStep=, and url=. Module: design-rules/deterministic/generated/det-js-no-console-error.check.js. Metric: metrics.jsConsoleErrorReport.

Remediate (in order):

1. Reproduce locally: Open DevTools → Console, load the failing route, click the same tab/theme/nav controls the auditor uses; note the first non-ignored error line.
2. Fix script defects: Guard optional modules (charts, ambient layers, diagram modals) until DOM hosts exist; load js/ bundles with defer in dependency order; remove debug console.error and inline throws from generators.
3. Align DOM hooks: Match data-bs-target / aria-controls ids to pane markup (fs-tab-panel__panes); ensure theme dropdown items expose data-bs-theme-value when forge-theme.js is included.
4. Verify ignores: Confirm failures are not favicon, ResizeObserver, or extension noise—those are filtered and should not mask real app errors.
5. Re-verify: Run python3 generator/build-showcase.py, then analyze-website-ux.mjs on showcase or consumer website/ roots; confirm jsConsoleErrorReport.errorCount === 0. Harness: generator/build_rule_defect_fixtures.py and auditor-tests/invoke-det-ruleset-harness.sh --only-rule DET.JS.NO_CONSOLE_ERROR.

Related rules

• DET.JS.PROGRESSIVE — critical copy visible without script; complements but does not replace console hygiene.
• DET.NAV.FOCUS_ORDER — keyboard order when scripts move focus after tab or offcanvas open.
• DET.MOTION.PREFERS_REDUCED — motion scripts must not throw when reduction prefs disable animation.
• AI.JS.BEHAVIOR_DISCOVERABILITY — judgment on whether scripted affordances are understandable; requires clean console on golden paths first.