Throwing `error` inside of the root `+layout.ts` prohibits the page from loading when ssr = false

oxisto commented 1 year ago

Describe the bug

If SSR is turned off and an error is thrown inside the "root" +layout.ts, the whole App does not load. Instead on the console you can see the error message as a rejected promise.

The intended behaviour would be to display the contents of the +error.svelte page - which seems to work fine if an error is thrown by any other +layout.ts file in any sub-directory except directly in src/routes/+layout.ts

Reproduction

Create a src/routes/+layout.ts:

import type { LayoutLoad } from './$types';
import { error } from '@sveltejs/kit';
export const ssr = false;
export const load = (async () => {
    throw error(400, "test")
}) satisfies LayoutLoad

I prepared a minimal repo as well: https://github.com/oxisto/layout-crash

Logs

Uncaught (in promise) HttpError {status: 400, body: {…}}body: {message: 'test'}status: 400[[Prototype]]: Objectconstructor: class HttpErrortoString: ƒ toString()[[Prototype]]: Object

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Memory: 81.80 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.6 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Safari: 16.4
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0
    @sveltejs/kit: ^1.20.4 => 1.20.4
    svelte: ^3.54.0 => 3.59.2
    vite: ^4.3.0 => 4.3.9

Severity

blocking all usage of SvelteKit

Additional Information

No response

Conduitry commented 1 year ago

The root +error.svelte also appears inside the root +layout.svelte. What happens during SSR if there is an error rendering +error.svelte or its +layout.svelte is that it displays a very simple error.html (https://kit.svelte.dev/docs/project-structure#project-files-src). There could maybe be some sort of similar feature for client-side rendering. I'm not sure what it would look like - but the solution isn't going to be to render +error.svelte, because we can't display that without its +layout.svelte.

oxisto commented 1 year ago

The root +error.svelte also appears inside the root +layout.svelte. What happens during SSR if there is an error rendering +error.svelte or its +layout.svelte is that it displays a very simple error.html (https://kit.svelte.dev/docs/project-structure#project-files-src). There could maybe be some sort of similar feature for client-side rendering. I'm not sure what it would look like - but the solution isn't going to be to render +error.svelte, because we can't display that without its +layout.svelte.

Aaah! that makes complete sense. Next to proposing a solution that works similarly like the error.html, may I suggest to add a caveat warning to the docs (here: https://kit.svelte.dev/docs/errors#expected-errors) that one needs to be careful in throwing expected errors in the root +layout.ts. It took me a while to figure out why my app was not rendering at all, finally tracing it back to the error in the root layout. Do you want me to prepare a PR for that?

sveltejs / kit