Skip to content

Layout.js throw error client navigation fail #6190

@lacherogwu

Description

@lacherogwu

Describe the bug

When using the error helper from @sveltejs/kit

import { error } from '@sveltejs/kit';

and trying to navigate to a page that throws an error using client navigation, the app throws an uncaught error and does not work as it should

What I did

I throw an error if the page pathname includes /abc, and instead of showing me the error page, the page just stays still and I see an uncaught error on the console

import { error } from '@sveltejs/kit';

export function load({ url }) {
	if (url.pathname.startsWith('/abc')) throw error(404, 'not found');
}

image

Just to mention, if you do the same function on a +page.js its works almost as expected, it does shows the error message but always shows error 500 instead of the error code passed in the function

Very important to mention

This bug happens only on client navigation, if I reload the page on the route that I throw an error, it works perfectly.
only if I'm trying to navigate to that page after the app is initialized the bug occur

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-owrn8f?file=src/routes/+layout.js

Create a +layout.js and add the function below

import { error } from '@sveltejs/kit';

export function load({ url }) {
	if (url.pathname.startsWith('/abc')) throw error(404, 'not found');
}

create also a +layout.svelte and add some a tag for navigation
and add a catch-all page or just normal pages on the routes folder so the app will function

and then try to navigate to the page /abc (the one we throw an error on in +layout.js)`

and you will notice an uncaught error on the console and the page will not change

Logs

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 585.48 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.0.0 - ~/.nvm/versions/node/v18.0.0/bin/node
    npm: 8.6.0 - ~/.nvm/versions/node/v18.0.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 102.0.1
    Firefox Developer Edition: 102.0
    Safari: 15.6.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.65 
    @sveltejs/kit: next => 1.0.0-next.429 
    svelte: ^3.44.0 => 3.49.0 
    vite: ^3.0.4 => 3.0.9

Severity

serious, but I can work around it

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions