Sveltekit returning a 404 on page load triggers an uncaught exception that breaks the page

Question

Taken directly from the sveltekit docs. When returning a 404 on page load an uncaught exception will occur that breaks the page:

<script context="module">
    /** @type {import('./__types/[...path]').Load} */  
    export function load({ params }) {
      return {
        status: 404,
        error: new Error(`Not found: /marx-brothers/`)
      };
    }
</script>

The above causes an uncaught error that shows up in the console:

This will cause any other JS to not work such as on:click events etc.

The docs do not elaborate any further on the matter: https://kit.svelte.dev/docs/layouts#error-pages

Can anyone explain why an uncaught exception is thrown when returning a 404 status for a page on page load? And how best can I solve the issue? Thank You.

Edit: I return the 404 on a __layout.svelte page which is the default layout page that other pages inherit from. Is there an issue with doing it that way?

Answer 1

update:

I was able to reproduce the uncaught exception using the demo app and adding the code snippet to __layout.svelte. Despite the exception, the page rendered OK. I didn't test if JS was broken; most 404 pages are simple. (See new screenshot.)

I did confirm changing error: new Error(...) to a simple string still resulted in an uncaught exception.

It is very odd to return a 404 response from a __layout.svelte. Layouts are meant to be used render common UI elements (and perhaps common logic like protecting pages behind authentication.)

The 404 status logic check and response logic should be placed in the main index.svelte file. If a route does not exist, SvelteKit will automatically generate the 404 response itself.

Screenshot when modifying Demo app:

---

Old answer

I was unable to reproduce the uncaught exception. SvelteKit rendered a 404 page, as expected:

My (original) process to reproduce:

1. npm init svelte load404 (Choose skeleton project, default options)
2. cd load404
3. yarn
4. Copy code snippet from question verbatim into index.svelte:

<script context="module">
    /** @type {import('./__types/[...path]').Load} */  
    export function load({ params }) {
      return {
        status: 404,
        error: new Error(`Not found: /marx-brothers/`)
      };
    }
</script>

5. yarn dev --open