try block, like error boundary

Is your feature request related to a problem? Please describe.

I wonder would it possible to have a {#try} logic block, such that anything goes inside, if error would be handled in the {:catch} block, eg:

{#try}
   <Component />
{:catch}
   <div>Fallback uI </div>
{/try}

if an error thrown during init / update in <Component />, then will see the Fallback UI instead.

Describe the solution you’d like A clear and concise description of what you want to happen.

Describe alternatives you’ve considered A clear and concise description of any alternative solutions or features you’ve considered.

How important is this feature to you? Note: the more honest and specific you are here the more we will take you seriously.

Additional context Add any other context or screenshots about the feature request here.

[YamiOdymel]

I voted down for this. I don’t understand why this try & catch logics should be handled in the Svelte templates.

If a GraphQL response might be an error (as @marcus-sa 's example), it should be handled in the API Endpoint sections where you sent the request.

If the post title might be an undefined or null (as @thedivtagguy 's example), your backend should return a "" (empty string) instead of making the property disappear from the Object. The response structure should be strongly fixed instead of over dynamic.

If you are still aiming for this goal, try to fill your title when you received the response with .map:

let resp = await api.getPost({});

resp = resp.map((v) => {
    // Turning all the undefined title into a title with an empty string.
    if (v.title === undefined) {
        v.title = ""
    }
    return v
})

// resp[0].title will no longer be an undefined, yay!

[marcus-sa]

Good idea.

Maybe something like this would benefit even more, depending on the error getting thrown. So basically like a switch statement for catching errors.

<script>
import { GraphQLError } from 'graphql';
</script>


{#try}
   <Component />
{:catch GraphQLError}
	<div></div>
{:catch TypeError}
   <div></div>
{:catch}
   <div>Default fallback ui </div>
{/try}