Skip to content

Enhance +error.svelte to receive server-side data from +layout.server.ts in SPA #11494

Open
@zommerberg

Description

@zommerberg

Describe the problem

The +error.svelte page currently does not receive server-side data from +layout.server.ts when ssr is false. This limitation affects the continuity of the user experience, particularly when handling 404 errors.

Currently, in SvelteKit, HTTP-only cookie data (like "userId") is passed from +layout.server.ts to +layout.svelte for user-specific layout rendering. However, this process does not include +error.svelte, leading to a problem: when a 404 error occurs, the user-specific layout, reliant on HTTP-only cookie data, is not displayed on the +error.svelte page. This results in an inconsistent and disrupted user experience during 404 error scenarios.

For a cohesive user experience, it is essential that +error.svelte has the capability to receive server-side data from +layout.server.ts. This would ensure that even in the event of a 404 error, the user still sees a layout personalized to their data.

Currently, I am using a workaround involving a [...notFound] folder with a nested +page.svelte. However, this approach is suboptimal compared to directly using +error.svelte for handling 404 errors. It adds complexity and deviates from the streamlined handling of error pages in SvelteKit.

Describe the proposed solution

I propose enabling +error.svelte to receive server-side data from +layout.server.ts when ssr is false. This will ensure that user-related layouts are consistently maintained, even when encountering 404 errors.

Reproduction

Here is a repo with an example: https://github.com/zommerberg/sveltekit-error-problem-demo
The problem seems to happen only when ssr is false.

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions