Остаться на странице в Inertia

Давайте теперь отправим форму работника на адрес, где сервер иногда отвечает кодом 500. Inertia по умолчанию может открыть страницу ошибки и человек потеряет введённые поля, хотя сбой касался только одного действия.

У визита есть колбэк onHttpException. Он срабатывает, когда ответ не похож на JSON страницы Inertia. Если из колбэка вернуть false, клиент не выполнит переход на экран ошибки и оставит открытый компонент на месте. Текст сбоя можно вывести рядом с формой.

Давайте опишем страницу и адрес с принудительным сбоем:

<?php
	use Illuminate\Http\Request;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/workers/create', function () {
		return Inertia::render('Workers/Create');
	});

	Route::post('/workers', function (Request $request) {
		abort(500);
	});
?>

Давайте сохраним статус в ref и вернём false из колбэка:

<script setup>
	import { ref } from 'vue'
	import { router } from '@inertiajs/vue3'

	const name = ref('')
	const failureStatus = ref(null)

	function save() {
		failureStatus.value = null

		router.post('/workers', {
			name: name.value,
		}, {
			onHttpException(response) {
				failureStatus.value = response.status
				return false
			},
		})
	}
</script>

<template>
	<h1>New worker</h1>
	<input v-model="name" type="text">
	<p v-if="failureStatus">
		Server error: {{ failureStatus }}
	</p>
	<button type="button" @click="save">
		Send
	</button>
</template>

Сделайте форму сотрудника DeskHire на адресе /desk-hire/create, чтобы при ответе с кодом 503 экран не менялся, а под полями появлялся код статуса.