使用Inertia.js与Laravel处理错误及成功响应遇问题

问题根源分析 #

核心问题是Laravel抛出500服务器错误时返回了HTML错误页面，而非Inertia可识别的响应，导致前端无法触发onError回调；同时前端回调写法存在冗余逻辑。

分步解决方案 #

1. 修复Laravel异常处理，让Inertia请求返回JSON响应 #

打开app/Exceptions/Handler.php，修改异常渲染逻辑，确保Inertia请求遇到服务器错误时返回JSON格式响应：

<?php

namespace App\Exceptions;

use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
use Throwable;

class Handler extends ExceptionHandler
{
    public function render($request, Throwable $e)
    {
        $response = parent::render($request, $e);

        // 针对Inertia请求，将500错误转为JSON响应
        if ($request->inertia() && $response->isServerError()) {
            return response()->json([
                'message' => $e->getMessage(),
                'errors' => [],
            ], $response->getStatusCode());
        }

        return $response;
    }
}

Laravel 8+版本也可以用renderable方法更优雅处理：

public function register()
{
    $this->renderable(function (Throwable $e, $request) {
        if ($request->inertia()) {
            return inertia('Error', [
                'message' => $e->getMessage(),
            ])->toResponse($request)->setStatusCode(500);
        }
    });
}

2. 修正前端回调写法，移除冗余逻辑 #

你的前端代码中onError和onSuccess的Promise.all完全多余，且提示文案与操作不匹配，修正后代码如下：

router.post(route("posts.update", this.tweet.id), formData, {
  onBefore: () => confirm("确定要更新这条帖子吗？"),
  onError: (errors) => {
    // 自定义错误处理逻辑，比如显示全局提示
    console.error('更新失败:', errors);
    alert('更新出错了，请检查后重试');
  },
  onSuccess: () => {
    // 成功后的操作，比如跳转列表页或提示用户
    alert('帖子更新成功');
    router.visit(route('posts.index'));
  },
});

3. 确认请求方法与Laravel路由匹配 #

Laravel中posts.update路由默认是PUT或PATCH方法，若前端用post请求会触发405方法不允许错误，进而导致服务器异常。可修改前端请求为put：

router.put(route("posts.update", this.tweet.id), formData, {
  // ... 回调逻辑
});

4. 检查Inertia基础配置 #

确保app/Http/Kernel.php的web中间件组包含Inertia中间件：

protected $middlewareGroups = [
    'web' => [
        // ... 其他中间件
        \Inertia\Middleware\HandleInertiaRequests::class,
    ],
];

验证 #

在Laravel的PostController@update方法中故意抛出异常测试：

public function update(Request $request, Post $post)
{
    throw new \Exception('测试服务器错误');
    // ... 原有逻辑
}

此时前端应触发onError回调，而非跳转到Laravel的500错误页面。

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