SvelteKit页面加载返回404触发未捕获异常致页面失效问题咨询

问题现象 #

在页面加载阶段返回404状态码时，浏览器控制台抛出未捕获异常，页面所有JavaScript逻辑（如on:click绑定事件）完全失效，复现代码如下：

<script context="module">
    /** @type {import('./__types/[...path]').Load} */  
    export function load({ params }) {
      return {
        status: 404,
        error: new Error(`Not found: /marx-brothers/`)
      };
    }
</script>

1. 未捕获异常的根本原因 #

• 写法不符合SvelteKit的load函数规范：status、error这两个返回字段仅允许在根级__error.svelte组件的load函数中使用，普通页面、布局组件的load函数如果要返回错误状态，必须抛出框架封装的预期错误对象，直接在return值里写这两个字段，框架不会将其识别为合法的错误响应，只会当成普通的组件返回值处理，最终导致错误逃逸到全局。
• 根布局没有上层错误边界兜底：SvelteKit的错误处理是逐层向上查找最近的错误边界（即父级布局/根级的__error.svelte），在最顶层的根__layout.svelte里触发错误时，如果没有正确抛出可被框架识别的预期错误，就没有上层组件能承接这个错误，直接打断客户端运行时初始化流程，后续的组件挂载、事件绑定全部终止，页面交互完全失效。

2. 最佳解决方案 #

• 修正错误返回写法：所有普通页面、布局（包括根布局）的load函数中，需要返回404等错误状态时，不要直接return带status和error的对象，使用load参数中提供的error方法构造预期错误抛出，框架会自动识别并走错误页渲染流程，不会触发未捕获异常。
  正确写法示例：

  <script context="module">
    /** @type {import('./__types/[...path]').Load} */  
    export function load({ params, error }) {
      // 自定义路径校验逻辑
      const pathValid = checkPathValid(params.path)
      if (!pathValid) {
        // 抛出框架可识别的预期404错误
        throw error(404, `Not found: /${params.path.join('/')}/`)
      }
      // 正常场景返回需要的props数据
      return {
        props: {
          // 页面所需数据
        }
      }
    }
  </script>
  

• 在项目路由根目录创建根级__error.svelte组件作为全局错误兜底，所有抛出的预期错误都会传入这个组件渲染，可自定义404、500等不同状态的展示样式，这个组件渲染时不会破坏SvelteKit的客户端运行时，页面交互逻辑可以正常工作。
• 如果404判断逻辑不需要在所有路由上全局执行，尽量把校验逻辑下沉到具体的路由页、或者匹配兜底路由的[...path]页面中，不要全部堆在根布局的load里，减少根布局load的逻辑复杂度，降低出错概率。

根布局实现方式说明 #

在所有页面继承的默认__layout.svelte的load函数中直接返回404对象的实现方式是错误的，既不符合SvelteKit的load返回规范，也绕过了框架自带的错误处理流程，是导致页面崩溃的直接原因，改成抛出error()构造的预期错误即可正常运行。

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