HTML Code
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Worker onerror</title><style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.6}
h1{margin:0 0 .5rem;font-size:1.25rem;color:#0f172a}p{margin:0 0 1rem;max-width:420px}
button{padding:.55rem 1rem;font-size:.9375rem;background:#2563eb;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-right:.5rem;margin-bottom:.5rem}
button:hover{background:#1d4ed8}button.secondary{background:#64748b}
#status,#result{margin-top:1rem;padding:.75rem 1rem;max-width:420px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem}
#status.ok{border-left:4px solid #22c55e}#status.err{border-left:4px solid #ef4444}
#tick{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:700}</style></head>
<body>
  <h1>Handle worker errors</h1>
  <p>This worker throws on purpose so you can see <code>onerror</code>.</p>
  <button type="button" id="runBtn">Trigger error</button>
  <p id="status">Ready.</p>
  <script>
    var statusEl = document.getElementById('status');
    if (typeof Worker === 'undefined') {
      statusEl.textContent = 'Web Workers are not supported in this browser.';
      statusEl.className = 'err';
    } else {
      var code = 'self.onmessage=function(){ unknownVar.boom(); };';
      var worker = new Worker(URL.createObjectURL(new Blob([code],{type:'application/javascript'})));
      worker.onerror = function (err) {
        statusEl.textContent = 'Worker error: ' + err.message;
        statusEl.className = 'err';
        err.preventDefault();
      };
      document.getElementById('runBtn').onclick = function () {
        statusEl.textContent = 'Sending message that will throw...';
        statusEl.className = '';
        worker.postMessage(1);
      };
    }
  </script>
</body></html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Web Workers — onerror Demo
