await/then blocks don't allow errors (from promise) to bubble up

[thojanssens]

I have a global error handler for uncaught promise errors, that will send promise errors to my server. This code is in the entry file main.js:

window.addEventListener("unhandledrejection", e => { /* send error to server */ });

Problem is that as soon as I use await/then blocks, the errors can't bubble up:

<script>
  /* some imports */
  let userIdPromise = fetchCurrentUserId() // I tried adding `.catch(e => { throw e });` but error still doesn't bubble up
</script>

{#await userIdPromise}
  <p>...loading</p>
{:then _}
  <App/>
{/await}

[thojanssens]

what I have to do is:

{#await userIdPromise}
  <p>...loading</p>
{:then _}
  <App/>
{:catch error}
  {bubbleError(error)}
{/await}

function bubbleError(e) { throw e }

Do you think that we can have something nicer to bubble the error up?

[Conduitry]

I haven't tried this, but if this were as simple as making the error handler here re-reject with the error when there's no catch block, that sounds like a reasonable proposal to me.

[dimfeld]

Here's one workaround:

let userIdPromise = fetchCurrentUserId()
userIdPromise.catch(() => { throw e; });

The 2nd line creates a new promise that has the catch handler, but userIdPromise still refers to the original promise, and so the #await handler won't interfere with the one added in the .catch() statement. I put together a proof of concept here: https://svelte.dev/repl/dd8c7d7df1cc426db62d83e21c81daec?version=3.24.0

That said, you would have to do this for every promise so it's not very convenient. I think the approach suggested by @Conduitry is the proper solution.

[irshadshalu]

I have raised #5149 as per @Conduitry 's suggestion.

[Conduitry]

In 3.25.0, {#await}s with no {:catch} that receive a promise that rejects will now re-emit a rejected promise, which should be able to be caught by an unhandled rejection event listener.