Сетевая ошибка в Inertia

Допустим, юзер отправляет карточку работника, а связь обрывается раньше, чем Laravel успевает ответить. Это уже не страница ошибки и не код HTTP: ответа нет вовсе. Визит срывается, и клиент показывает своё окно, которое трудно связать с формой на экране.

Давайте изучим глобальное событие networkError. Его слушают через объект router на странице, где нужен свой текст. В деталях события лежит объект ошибки, а метод preventDefault у события отменяет стандартную реакцию Inertia, чтобы оставить открытый экран и вывести предупреждение рядом с формой.

Давайте опишем страницу создания работника:

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

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

	Route::post('/workers', function () {
		return back();
	});
?>

Давайте подключим слушатель и строку про обрыв связи:

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

	const offlineNotice = ref(false)

	function onNetworkError(event) {
		event.preventDefault()
		offlineNotice.value = true
	}

	let removeNetworkListener

	onMounted(() => {
		removeNetworkListener = router.on(
			'networkError',
			onNetworkError
		)
	})

	onUnmounted(() => {
		removeNetworkListener?.()
	})

	function save() {
		offlineNotice.value = false
		router.post('/workers', { name: 'Alex' })
	}
</script>

<template>
	<h1>New worker</h1>
	<p v-if="offlineNotice">
		Connection lost. Try again.
	</p>
	<button type="button" @click="save">
		Retry save
	</button>
</template>

Сделайте экран CrewBoard с сохранением записи, чтобы при обрыве связи появлялась ваша короткая надпись, а не стандартное сообщение клиента.