unhandledrejection — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Where does a rejected promise actually go?</h1>
    <p class="pg-sub">
      This runs a <strong>real</strong> promise rejection in your browser, not a simulation.
      Flip the listener on and off and watch whether your "error tracker" below ever
      finds out something broke.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Set up your app</div>
      <label class="toggle" style="margin-bottom: 12px;">
        <input type="checkbox" id="listenerToggle" checked />
        <span class="switch"></span>
        <span>Global <code>window.addEventListener("unhandledrejection", ...)</code> wired up</span>
      </label>
      <p class="hint">This mirrors a real app: the checkbox controls whether that one listener exists anywhere in your code.</p>

<div class="btn-row">
        <button class="btn bad" id="failSilent">💥 Checkout fails — no .catch()</button>
        <button class="btn good" id="failSafe">✅ Checkout fails — with .catch()</button>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="storm">Simulate 3 silent failures in a row</button>
        <button class="btn sm ghost" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What the shopper sees</div>
      <div class="stage" id="stage">🛒 Ready to check out</div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Click a button above.</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What your error tracker sees</div>
      <div class="counters">
        <div class="counter bad">
          <div class="label">Checkouts that failed</div>
          <div class="num" id="failCount">0</div>
        </div>
        <div class="counter good">
          <div class="label">Failures actually reported</div>
          <div class="num" id="reportCount">0</div>
        </div>
      </div>
      <div class="output log" id="log" style="margin-top:12px; max-height: 160px; overflow-y:auto;">
        <div class="empty-log">— nothing reported yet —</div>
      </div>
      <p class="hint" id="caption">Toggle the listener off, fail a checkout, and compare: the shopper and the failure count both notice. Only the report count depends on the listener.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.