hermes-skills/skills/delegation-pattern/references/cascade-failure-debugging.md

Silent Cascade Failure — JS TypeError Kills Async Operations

Pattern (discovered Jul 12, 2026)

A single TypeError (e.g. .classList.add() on a null element) in early synchronous inline script kills ALL subsequent code — including fetch() calls that would load nav, content, or UI elements.

The symptom surface is confusing: blank page, no menu, no content, no visible error.

Example

// WRONG — crashes before nav fetch runs
if (Ops.isAuthenticated()) {
    overlay.classList.remove('show');
    document.getElementById('logoutBtn').classList.add('show');  // TypeError if nav not loaded
    loadContent();  // Never runs
}
fetch('/nav.html').then(...)  // Never runs either

Fix pattern

Always guard DOM lookups that depend on async-loaded content:

// Wait for async content before accessing
var wait = setInterval(function() {
    var el = document.getElementById('logoutBtn');
    if (el) {
        el.classList.add('show');
        clearInterval(wait);
        loadContent();
    }
}, 100);

Prevention checklist

• Every getElementById() call is guarded (especially elements from fetched templates)
• Auth logic does NOT touch DOM elements from separate fetches
• fetch() / setInterval() are NOT placed after unguarded DOM access
• Inline scripts tolerate missing elements without crashing