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?

Leftium · Accepted Answer · 2022-06-30T05:37:10.490

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:

npm init svelte load404 (Choose skeleton project, default options)
cd load404
yarn
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>

yarn dev --open

edited Jun 30 '22 at 05:37

answered Jun 30 '22 at 05:02

Leftium

16,497
6
64
99

Thanks for trying this out. Can you try it with the test app instead of the skeleton project. My test above is done with the test app that can be chosen when doing the npm create svelte my-app step. – Mat70x7 Jun 30 '22 at 05:10
Also I should point out that I return the 404 from the __layout.svelte page @Leftium – Mat70x7 Jun 30 '22 at 05:15
@Mat70x7 You probably should not return a 404 response from a layout. I updated my answer with more details. – Leftium Jun 30 '22 at 05:39
Ok that is fair. What I am trying to accomplish is throw a 404 if someone tries to access a page that requires authorization and they do not have the right permissions. I have multiple roles to account for so I need to make it dynamic. If I can't do the check and return in the load perhaps I can do it from the hooks.ts – Mat70x7 Jun 30 '22 at 05:45
403 Forbidden seems like a better status code, but it still results in an uncaught exception. Perhaps it would be worth opening a SvelteKit bug? Otherwise, you could also try redirecting to an "Unauthorized" page and encoding the error/reason as a URL param. @Mat70x7 – Leftium Jun 30 '22 at 05:59
Ok thank you the redirect might be the fastest solution. – Mat70x7 Jun 30 '22 at 06:01

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

1 Answers1

Old answer