Handling rendering errors

[ebeloded]

I have a SvelteKit website with multiple pages and navigation between them. When user navigates to a page, which can't be rendered because of an error, the navigation stops working completely and the app becomes unresponsive.

The error page can be as simple as this:

<script lang="ts">
  let foo: any = {};
</script>

Error page

{foo.bar.length}

My question is: how do I recover the app from this error state? What is the best way to handle rendering errors?

[dan-livingston]

I would suggest having more strict types and using tools to cover possible issues. For example, you could so something like:

<script lang="ts">
    let foo: any = {};
</script>

Error page

{foo.bar?.length}

The question mark after bar says to only check for length if bar exists. You could also do something like this:

<script lang="ts">
    let foo: any = {};
</script>

Error page

{foo.bar ? foo.bar.length : ""}

This allows you to set up backup options to cover potential errors.

[nwaughachukwuma]

Sometimes the actual data shape is either not known or transformed at runtime which could result in a render error as reported above. It would be nice to have a standard way of dealing with it.