Обработка ошибок

Разработка

Одна из приятных сторон работы с серверной средой - это встроенная обработка исключений, которую Вы получаете бесплатно. Например, Laravel поставляется с Ignition, красивым инструментом сообщения об ошибках, который отображает хорошо отформатированную трассировку стека при локальной разработке.

Проблема в том, что если Вы делаете запрос XHR (что делает Inertia) и сталкиваетесь с ошибкой на стороне сервера, Вам обычно остается копаться во вкладке сети в инструментах разработки Вашего браузера.

Inertia решает эту проблему, показывая все ответы не Inertia в модальном режиме. Это означает, что Вы получите такой же красивый отчет об ошибках, даже если Вы сделали этот запрос через XHR!

Загрузка…

Обратите внимание, модальное поведение предназначено только для целей разработки.

Продакшен

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

use Throwable;
use Inertia\Inertia;

/**
 * Подготовить исключение для рендеринга.
 *
 * @param  \Throwable  $e
 * @return \Throwable
 */
public function render($request, Throwable $e)
{
    $response = parent::render($request, $e);

    if (!app()->environment('local') && in_array($response->status(), [500, 503, 404, 403])) {
        return Inertia::render('Error', ['status' => $response->status()])
            ->toResponse($request)
            ->setStatusCode($response->status());
    } else if ($response->status() === 419) {
        return back()->with([
            'message' => 'Срок действия страницы истек, попробуйте еще раз.',
        ]);
    }

    return $response;
}

Расширить метод render() в Вашем приложении App\Exceptions\Handler.php.

Обратите внимание, как в приведенном выше примере мы возвращаем компонент страницы Error. Вам нужно будет это создать. Вот пример компонента страницы ошибки, который Вы можете использовать в качестве отправной точки.

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

<script>
export default {
  props: {
    status: Number,
  },
  computed: {
    title() {
      return {
        503: '503: Сервис недоступен',
        500: '500: Ошибка сервера',
        404: '404: Страница не найдена',
        403: '403: Запрещено',
      }[this.status]
    },
    description() {
      return {
        503: 'Извините, мы проводим техническое обслуживание. Пожалуйста, попробуйте позже.',
        500: 'Упс, что-то пошло не так на наших серверах.',
        404: 'К сожалению, не удалось найти страницу, которую Вы ищете.',
        403: 'К сожалению, доступ к этой странице запрещен.',
      }[this.status]
    },
  },
}
</script>

На этой странице