错误处理

开发

使用强大的服务器端框架的一个优势是，您免费获得内置的异常处理。例如，Laravel 附带了 Ignition，这是一个漂亮的错误报告工具，它在本地开发中显示格式良好的堆栈跟踪。

挑战在于，如果您正在进行 XHR 请求（Inertia 所做的），并且遇到服务器端错误，您通常需要在浏览器的开发者工具的网络选项卡中进行挖掘以诊断问题。

Inertia 通过在模态窗口中显示所有非 Inertia 响应来解决此问题。这意味着即使您通过 XHR 发出了该请求，您也会获得与您习惯的相同的漂亮错误报告。

正在加载…

生产

在生产环境中，您需要返回一个正确的 Inertia 错误响应，而不是依赖于开发期间存在的模态驱动的错误报告。为此，您需要更新框架的默认异常处理程序以返回自定义错误页面。

在构建 Laravel 应用程序时，您可以通过在应用程序的 bootstrap/app.php 文件中使用 respond 异常方法来实现这一点。

use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
use Inertia\Inertia;

->withExceptions(function (Exceptions $exceptions) {
    $exceptions->respond(function (Response $response, Throwable $exception, Request $request) {
        if (! app()->environment(['local', 'testing']) && in_array($response->getStatusCode(), [500, 503, 404, 403])) {
            return Inertia::render('Error', ['status' => $response->getStatusCode()])
                ->toResponse($request)
                ->setStatusCode($response->getStatusCode());
        } elseif ($response->getStatusCode() === 419) {
            return back()->with([
                'message' => 'The page expired, please try again.',
            ]);
        }

        return $response;
    });
})

您可能已经注意到，我们在上面的示例中返回了一个 Error 页面组件。您需要实际创建此组件，它将用作应用程序的通用错误页面。以下是一个您可以用作起点的示例错误组件。

<script setup>
import { computed } from 'vue'

const props = defineProps({ status: Number })

const title = computed(() => {
  return {
    503: '503: Service Unavailable',
    500: '500: Server Error',
    404: '404: Page Not Found',
    403: '403: Forbidden',
  }[props.status]
})

const description = computed(() => {
  return {
    503: 'Sorry, we are doing some maintenance. Please check back soon.',
    500: 'Whoops, something went wrong on our servers.',
    404: 'Sorry, the page you are looking for could not be found.',
    403: 'Sorry, you are forbidden from accessing this page.',
  }[props.status]
})
</script>

<template>
  <div>
    <H1>{{ title }}</H1>
    <div>{{ description }}</div>
  </div>
</template>