How to bubble a web worker error in a promise via worker.onerror?

Question

I\'m dealing with a web worker that needs to report back if an error has occured. Normally, I can use worker.onerror to listen to any errors that were thrown fr

Answer 1

postMessage doesn't work for some reason

That's because you're returning an object instead of a string, change it to self.postMessage({error: err.message});

As for your second problem, you can use the setTimeout(function() { throw err; }); trick. More information about the situation and trick can be found here.

function getInlineJS() {
  var js = document.querySelector('[type="javascript/worker"]').textContent;
  var blob = new Blob([js], {
    "type": "text\/plain"
  });
  return URL.createObjectURL(blob);
}

var worker = new Worker(getInlineJS());

worker.onerror = function(err) {
  document.getElementById('errors').innerHTML += 
    "error " + err.message + '\n';
}

worker.onmessage = function (msg) {
  console.log("message recieved", msg);
  document.getElementById('messages').innerHTML += 
    "message " + msg.data + '\n';
}


worker.postMessage("run");
worker.postMessage("promise");

should write "Normal Error and In Promise Error" below and in console (promise error only occurs in console though): <br>

<pre id="errors">
</pre>

messages:
<pre id="messages">
</pre>

<script type="javascript/worker">
self.addEventListener("message", function(e) {
    /* demonstration of normal error bubbling to onerror */
    if (e.data == 'run') {
      throw new Error('Normal Error');
      return;
    }
    new Promise(function(resolve, reject) {
      /* some logic that breaks */
    
      throw new Error('In Promise Error');
    }).then(function(result) {
      
    }).catch(function(err) {
      /* it logs to console just fine */
      console.log("In Promise Catch Error:", err);
      
      /* postMessage works when you return a string. */
      self.postMessage({error: err.message});

       setTimeout(function() { throw err; }); 
    });
});
</script>