Remote function error, crashes the app entirely
Describe the bug
I see some examples of how to get derived results from remote functions in docs:
const post = $derived(await getPost(params.slug));
Also it's shown that you can error inside of remote functions:
export const getPost = query(async () => {
//something happens
error(404, 'Not found');
});
And for some reason, when it happens,svelte boundary is not helpful, it just crashes the app with:
ERR_UNHANDLED_REJECTION
I’ve seen similar issues before, but those issues were about boundary not catching error, and it was fall to root error . But this issue seems to be new one, as it’s crashing app entirely.
Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-kyjdrlu9?file=src%2Froutes%2F%2Bpage.svelte
Logs
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 20.19.1 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
svelte: ^5.43.6 => 5.43.8
Severity
blocking all usage of SvelteKit
Additional Information
No response
Okay, reading through different GH issues. I found that adding pending snippet into boundary, kinda helps.
But it still feels like a bug to me. As even without it, I'd expect app to catch the error at least into +error.svelte if not in boundary. Instead of crashing.
*EDIT: Also one thing I noticed. Not sure if it's expected or not. But it feels like presence of <svelte:boundary> on the page specifically pending snippet, is significantly slows down the first render. Even when there, nothing except static content.
Feels like app, is still force render loading state, before it starts. Which is a small flick, but still feels weird and slower then without it.
This is definitely a bug. Errors thrown inside remote functions are only caught properly on the client side.
<script lang="ts">
let { children } = $props()
</script>
<svelte:boundary>
{@render children()}
{#snippet failed(error, reset)}
<button onclick={reset}>oops! try again</button>
{/snippet}
</svelte:boundary>
Although the SvelteKit documentation states that such errors should be handled using svelte:boundary, in practice SSR errors from remote functions crash the entire app and bypass any boundary and +error.svelte pages. The only place they appear is in handleError within hooks.server.ts.
At the moment this kind of works as expected from a svelte:boundary perspective, because those deliberately don't catch errors right now. But remote functions also don't use +error.svelte pages because those are tied to load functions and remote functions are after that.
This is obviously not a great situation and we're hoping to resolve it soon.
Related #14398