SvelteKit中throw error()无法跳转至+error.svelte页面的问题

为什么throw error()不触发跳转？ #

SvelteKit的throw error()只有在服务器端的Action/Load函数，或者客户端的Load函数上下文里抛出时，才会自动触发对应路由的+error.svelte页面跳转。而use:enhance的回调是客户端的异步回调，不属于上述上下文，直接在这里抛出只会被当作普通JS错误，只会在控制台打印，不会触发页面跳转。你在onMount()里抛错无效也是同样的原因——onMount是客户端生命周期函数，不在Load/Action的上下文范围内。

解决方案1：把错误处理移到服务器端Action（推荐） #

这是符合SvelteKit设计模式的做法，直接在表单对应的+page.server.js/+page.server.ts的Action函数里验证逻辑并抛出错误，use:enhance会自动处理Action返回的错误，触发+error.svelte跳转：

服务器端Action代码：

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

export const actions = {
  default: async ({ request }) => {
    // 处理表单提交、数据验证逻辑
    const formData = await request.formData();
    // 示例：假设验证失败
    const validationPassed = false;

    if (!validationPassed) {
      // 直接在Action里抛错，SvelteKit会自动处理跳转
      throw error(500, { message: "Internal Server Error" });
    }

    return { success: true };
  }
};

客户端use:enhance代码简化：

use:enhance={() => {
  formDisabled = true;

  return async ({ result }) => {
    if (result.type === "success" && result.data.success === true) {
      formDisabled = false;
    }
    // 错误情况无需手动处理，SvelteKit会自动跳转到+error.svelte
  };
}}

解决方案2：客户端手动触发错误跳转（仅特殊场景使用） #

如果必须在客户端use:enhance回调里处理错误，可通过goto函数配合错误对象触发跳转：

客户端代码：

import { goto } from '$app/navigation';
import { error as createError } from '@sveltejs/kit';

// ...

use:enhance={() => {
  formDisabled = true;

  return async ({ result }) => {
    if (result.type === "success" && result.data.success === true) {
      formDisabled = false;
    } else {
      const err = createError(500, { message: "Internal Server Error" });
      // 跳转到当前路由的错误页面（根路由则用'/'，对应根目录的+error.svelte）
      goto(window.location.pathname, { error: err });
    }
  };
}}

内容的提问来源于stack exchange，提问作者Eli-ott