Promise.try() — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Promise.try()</h1>
    <p class="pg-sub">
      Pick how a function misbehaves, then pick how you call it. Watch whether
      your <code>.catch()</code> actually gets a chance to run.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> How <code>riskyOp()</code> behaves</div>
      <div class="seg" id="behaviorSeg" role="group" aria-label="Function behavior">
        <button data-val="throw" aria-pressed="true">Throws synchronously</button>
        <button data-val="reject">Returns a rejected promise</button>
        <button data-val="resolve">Resolves normally</button>
        <button data-val="delay">Rejects after a delay</button>
      </div>

<div class="panel-label" style="margin-top:18px"><span class="n">2</span> How you call it</div>
      <div class="seg" id="styleSeg" role="group" aria-label="Calling style">
        <button data-val="direct" aria-pressed="true">Direct call — riskyOp().then().catch()</button>
        <button data-val="try">Promise.try(riskyOp).then().catch()</button>
      </div>

<div class="btn-row" style="margin-top:16px">
        <button class="btn primary" id="run">Run it</button>
        <button class="btn ghost" id="reset">Reset</button>
        <button class="btn sm" id="repro" style="margin-left:auto">↻ Reproduce the 2am bug</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What happened</div>
      <div class="status" id="statusBox">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a behavior and a calling style, then run it.</span>
      </div>
      <div class="output log" id="log" aria-live="polite"></div>
      <p class="hint" id="hint">
        Caption: <strong>direct call</strong> only skips <code>.catch()</code> when <code>riskyOp</code> throws
        <em>synchronously</em> — every other case already reaches it. <strong>Promise.try</strong> normalizes all four.
      </p>
    </div>
  </div>

preview

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