1

When using error() from inside an async function, the script crashes with this error.

Using import { error } from '@sveltejs/kit';

How can I call error() from within an async function in Svelte?

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Redirect>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v20.11.0

Code Minimum Sample src/routes/+page.svelte (loading base URL)

<script lang="ts">
    import { error } from '@sveltejs/kit';

    const tst = async() => error( 400, 'My error message' );

    tst();
</script>

Case 2 This code produces a smilar error (uncaught (in promise)) in the JS console

<script lang="ts">
    import { error } from '@sveltejs/kit';
    import { onMount } from 'svelte';

    onMount( async function() 
    {
        error( 400, 'My error message' );
    } ); 
</script>

Screenshot

enter image description here

Removing async from the function does solves this issue, but I would like to use async please.

And I also would like to avoid having to use try .. catch around every async function call.

7
  • 1
    It would help if you posted some code. In general you need to get that information that a redirect is required to the level where you would call a return. I'll assume this is some exceptional behavior. If you're awaiting something you could, for example, throw an error and look for it in a catch block and then return a redirect based on that.
    – possum
    Commented Feb 27, 2024 at 0:30
  • @possum Well, it's basically, async function inside async inside async inside async, through multiple files. Do I need to throw and try - catch that for every hierarchical call? (e.g. try { await x(); } catch( e ) { redirect( .. ); async x() { try { await y(); } catch( e ) { throw new Error( 'error' ) } etc?
    – Z0q
    Commented Feb 27, 2024 at 8:52
  • @possum I added my code (abstract).
    – Z0q
    Commented Feb 27, 2024 at 9:08
  • Where is my_http_request called? If you are on the page you are supposed to use goto, not redirect.
    – brunnerh
    Commented Feb 27, 2024 at 11:08
  • @brunnerh The first function is called in +page-server.ts
    – Z0q
    Commented Feb 27, 2024 at 11:30

1 Answer 1

1

error is meant for server functions like load and returns the HTTP response with the respective status. If you get the error from some server-side function, you probably forgot to await some function.

You should generally not use/need error in client code.

On the client I would opt to show errors within the given page or show something like an error notification rather than showing an entire error page (which can be unnecessarily disruptive).

You could still show an error page by e.g. setting up a context in a layout and conditionally show an error component rather than the slot containing the page. The context could contain a callback that can be invoked by a page on error.

2
  • Thank you. I'm not sure how the context works. I tried setting a context with a specific key in my page and getting this context in the layout, but even if I change its value, the value in the layout is not updated and so the layout is not changed either. I would like to show an entire page error in case of server outage.
    – Z0q
    Commented Feb 28, 2024 at 17:02
  • 1
    @Z0q: If you need reactivity, you have to put a store into the context. You can however also just pass in a function that closes over local state, then call that function in the page.
    – brunnerh
    Commented Feb 28, 2024 at 17:20

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.