Страница ошибки в Inertia

Пусть приложение уже вышло в боевой режим, а при визите на несуществующий адрес гость видит чужое модальное окно со стеком или пустой экран. Для продакшена Inertia ждёт ответ в своём формате: компонент Vue с понятным текстом и кодом статуса.

Метод handleExceptionsUsing в провайдере приложения принимает колбэк с объектом ExceptionResponse. У него есть метод statusCode и метод render, который именует компонент и пропсы. Цепочка withSharedData подтянет общие данные из middleware Inertia, иначе страница 404 не увидит те же пропсы, что и остальной сайт.

Давайте зарегистрируем обработчик для кодов 403, 404, 500 и 503:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Inertia\ExceptionResponse;
use Inertia\Inertia;

class AppServiceProvider extends ServiceProvider
{
	public function boot(): void
	{
		Inertia::handleExceptionsUsing(
			function (ExceptionResponse $response) {
				if (in_array($response->statusCode(), [403, 404, 500, 503])) {
					return $response
						->render('ErrorPage', [
							'status' => $response->statusCode(),
						])
						->withSharedData();
				}
			}
		);
	}
}

Давайте добавим компонент, который выводит заголовок и пояснение по коду:

<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>

Сделайте для отдела кадров компонент StaffErrorPage и подключите его через обработчик исключений, чтобы при коде 404 гость видел свой текст, а не модальное окно отладки.