服务器端检测错误时+error.svelte页面未显示的问题

文件结构 #

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

当前实现代码（+layout.server.js） #

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

export async function load({ url }) {
    //...执行一些代码
    if(urlNotfound) {
            throw error(404, 'Not found here');
    }
    return { correctData };
}

我希望触发错误后显示对应的（或至少任意一个）+error.svelte页面，但所有自定义错误页均未显示，始终出现原生错误页。请问这是为什么？

1. 开发模式的默认调试行为
   在开发模式下，SvelteKit会强制显示包含错误堆栈、代码定位的原生调试页，这是框架默认的调试机制。你需要构建生产版本并预览（执行npm run build && npm run preview），才能看到自定义错误页的实际效果。

2. 错误页的作用范围限制

• 根目录的+error.svelte负责捕获全局未被更具体错误页处理的错误，根布局加载器抛出的错误会触发它
• portfolio/[slug]/+error.svelte仅作用于portfolio/[slug]路由及其子路由的错误，根布局层面的错误不会触发这个页面

3. 自定义错误页的实现规范
   确保你的+error.svelte正确接收框架传递的错误参数，示例实现如下：

<!-- +error.svelte -->
<script>
    export let status;
    export let error;
</script>

<div class="error-page">
    <h1>{status} 页面未找到</h1>
    <p>{error.message}</p>
</div>

内容的提问来源于stack exchange，提问作者16ar