0

TL;DR; Is there an issue with rethrowing errors in promises (i.e. the fetch-api) and the webworker global onerror event handler ?

I'm having a hard time bubbling up an error thrown by the fetch api in a web worker to the client that started the web worker. I see an "Uncaught (in promise) Error" instead of the code in the webworkers self.onerror event handler.... When I throw an error in a synchronous function in that same web worker it does end up in the self.onerror event handler...

To explain in further detail, inside my webworker I'm having :

  • an onerror event handler
  • functions that call a webapi with the fetch api

I want to pass along certain errors encountered when calling the web api to my client... Thus I rethrow the error at the end of the fetch (in the catch block). This is how my current test looks like :

fetch('https://<server>/api/token?key=version', { method: 'GET', credentials: 'include'})
.then((response) => {
  throw new Error("Oh no - something went wrong");
  return response.json();
})
.then((data) => {
  /* do something with the data in normal flow */
})
.catch((error) => { 
  /* we want to pass along certain types of errors */
  throw(error); /* <---- this is the last error I see logged in F12 debug windows -->
})

However i never see the error reaching the onerror event handler, which looks like this (just some test output) : 

self.onerror = function (event) {
    console.trace(event);
}

I see (using F12 debug) that an Uncaught (in promise) Error is logged at the line that the fetch api catch

Anything I'm overlooking ? Is there an issue with rethrowing errors and the global onerror event handler ?

AardVark71
  • 3,928
  • 2
  • 30
  • 50
  • o shoot.... 10 minutes after posting I finally found the answer... on StackOverflow. this is a duplicate of https://stackoverflow.com/questions/39992417 The trick is to use setTimeout like this : ** setTimeout(function() { throw err; }); ** – AardVark71 Apr 24 '20 at 11:16
  • @Kaiido yes, it does. This was one of the two solutions – AardVark71 Apr 25 '20 at 13:46
  • Yes I got it from your comments, stating that it was a dupe. So I did vote to close it as such, hoping it would help you in that demarche, but maybe I misunderstood that comment? – Kaiido Apr 25 '20 at 13:49

1 Answers1

1

It turns out there are two ways that I can make sure a rethrown error in a promise (fetch-api is promise-based) get's bubbled up :

1 ) The trick mentioned in How to bubble a web worker error in a promise via worker.onerror?

-- > just wrap the throw (inside the fetch catch block) in a setTimeout :

 fetch
 .then()
 .catch((error) => { 
    setTimeout(function() { throw error; });
 })

2) The new way mentioned in How to catch uncaught exception in Promise

-- > add an eventhandler for unhandledrejection to your webworker :

self.addEventListener('unhandledrejection', function (event) {
    // the event object has two special properties:
    // event.promise - the promise that generated the error
    // event.reason  - the unhandled error object
    throw event.reason;
});
AardVark71
  • 3,928
  • 2
  • 30
  • 50