Error.cause — interactive playground

<div class="pg">
    <h1 class="pg-title">🔗 <code>Error.cause</code> — don't lose the root cause when you rethrow</h1>
    <p class="pg-sub">
      <code>loadUser()</code> calls <code>fetchJSON()</code> calls <code>parse()</code> — a real
      <code>SyntaxError</code> is thrown three layers down. Toggle whether each <code>catch</code> block
      rethrows <strong>with</strong> or <strong>without</strong> <code>{ cause: err }</code>, then trigger
      the failure and watch how much of the original error survives to the top.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Call stack + rethrow style</div>

<div class="stack-row" id="stackRow" aria-hidden="true">
        <span class="stack-pill" data-stage="loadUser">loadUser()</span>
        <span class="stack-arrow">→</span>
        <span class="stack-pill" data-stage="fetchJSON">fetchJSON()</span>
        <span class="stack-arrow">→</span>
        <span class="stack-pill" data-stage="parse">parse()</span>
        <span class="stack-arrow">→ 💥</span>
      </div>

<div class="field" style="margin-bottom:14px">
        <span class="label">Each catch block will</span>
        <div class="seg" role="group" aria-label="Rethrow style">
          <button type="button" data-style="without" aria-pressed="true">Rethrow WITHOUT cause</button>
          <button type="button" data-style="with" aria-pressed="false">Rethrow WITH cause</button>
        </div>
      </div>

<div class="presets" style="margin-bottom:14px">
        <button class="btn sm" data-preset="without">▶ Worked example: show the loss</button>
        <button class="btn sm" data-preset="with">▶ Worked example: show the fix</button>
      </div>

<div class="btn-row">
        <button class="btn primary" id="run">Trigger the failure</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What each <code>catch</code> block actually runs</div>
      <div class="code" id="codeView"></div>
      <p class="hint">This is the same pattern at both <code>fetchJSON</code>'s and <code>loadUser</code>'s catch blocks — only the <code>{ cause: err }</code> option changes.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Error chain received by the caller</div>
      <div class="status" id="status" style="margin-bottom:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — click "Trigger the failure" above.</span>
      </div>
      <div class="output">
        <div class="chain" id="chain">
          <p class="muted" style="margin:0;font-size:0.88rem">No error yet. Trigger the failure to see what the top-level catch receives.</p>
        </div>
      </div>
      <p class="hint" id="hint">The chain shows every error the top-level <code>catch</code> can reach by walking <code>.cause</code>.</p>
    </div>
  </div>

preview

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