+error.svelte page does not display upon server-side error detection

Question

My files structure is this:

/routes
├── [slug]
│   ├── +page.svelte
├── portfolio/[slug]
│   ├── +error.svelte
│   └── +page.svelte
├── +error.svelte
├── +layout.server.js
├── +layout.svelte
├── +page.svelte
└── +server.js

In layout.server.js I check URLs to send the correct data (not sure it's the right way but so far so good):

// +layout.server.js
import { error } from '@sveltejs/kit';

export async function load({ url }) {
    //...run some code
    if(urlNotfound) {
            throw error(404, 'Not found here');
    }
    return { correctData };
}

I want the correct (or at least any) +error.svelte page to display but none of them is shown. I keep having the native error page. Why?

Answer 1

Errors in layout load functions work differently:

If the error occurs inside a load function in +layout(.server).js, the closest error boundary in the tree is an +error.svelte file above that layout (not next to it).

So if you throw an error in the root layout, you get the default error or the src/error.html file if it exists (more info on error responses and this file).

You could work around this with a route group, i.e.

/routes
├── (app)
│   ├── +layout.server.js    | error thrown from here
│   └── [everything else...]
└── +error.svelte