Laravel 10+Inertia自定义错误页跳转失效问题求助

问题分析 #

你配置了后端异常处理器，但触发500错误时仍显示Inertia默认模态框，核心原因有两点：

1. Inertia前端默认会拦截所有错误响应并展示内置模态框，不会自动跳转页面
2. 后端的异常处理逻辑可能没有正确覆盖Inertia的默认响应格式

解决方案 #

1. 调整后端Handler.php逻辑 #

修改render方法，优先处理异常，避免parent::render返回JSON格式的Inertia错误响应：

public function render($request, Throwable $e)
{
    // 先处理生产环境的错误页面跳转
    if (!app()->environment(['local', 'testing'])) {
        $statusCode = $this->isHttpException($e) ? $e->getStatusCode() : 500;
        
        if (in_array($statusCode, [403, 404, 500, 503])) {
            return Inertia::render('Error', ['status' => $statusCode])
                ->toResponse($request)
                ->setStatusCode($statusCode);
        }
        
        if ($statusCode === 419) {
            return back()->with(['message' => '页面已过期，请重试。']);
        }
    }

    // 本地/测试环境保留默认处理
    return parent::render($request, $e);
}

关键：先判断环境和状态码，再返回Inertia页面，避免先调用parent::render生成JSON响应被前端拦截。

2. 前端禁用Inertia默认错误模态框 #

在Vue3的Inertia配置文件（通常是resources/js/app.js）中，添加错误处理逻辑覆盖默认行为：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
  // 自定义错误处理
  errorHandler: (errors) => {
    if (import.meta.env.PROD) {
      const statusCode = errors.response?.status || 500
      window.location.href = `/error/${statusCode}`
    } else {
      // 本地环境保留控制台错误日志
      console.error(errors)
    }
  },
})

3. 添加错误页路由 #

在routes/web.php中添加错误页路由，确保Inertia能正确渲染：

Route::get('/error/{status}', function ($status) {
    return Inertia::render('Error', ['status' => $status]);
})->name('error');

4. 清理生产环境缓存 #

执行以下命令确保配置生效：

php artisan config:clear
php artisan cache:clear

验证测试 #

触发重复主键错误后，应该自动跳转到/error/500页面，显示你的自定义Error.vue组件内容，而非Inertia默认模态框。

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