Xử lý lỗi

Môi trường phát triển

Một lợi thế khi làm việc với server-side framework mạnh là bạn được hưởng sẵn cơ chế xử lý exception. Ví dụ, Laravel đi kèm công cụ báo lỗi trực quan, hiển thị stack trace được định dạng rõ ràng trong môi trường phát triển local. Khó khăn nằm ở chỗ khi bạn thực hiện request XHR (như Inertia vẫn làm) và gặp lỗi phía máy chủ, thông thường bạn phải mở tab Network trong devtools của trình duyệt để lần tìm và chẩn đoán vấn đề. Inertia giải quyết vấn đề này bằng cách hiển thị mọi response không phải Inertia trong một modal. Nhờ vậy, bạn vẫn có trải nghiệm báo lỗi trực quan quen thuộc dù request được thực hiện qua XHR. Với ứng dụng dùng Content Security Policy hạn chế inline style, bạn có thể truyền nonce vào createInertiaApp() để cho phép inline style do error modal inject. Xem Content Security Policy để biết chi tiết.

Production

Trong production, bạn nên trả proper Inertia error response thay vì dựa vào error reporting bằng modal vốn dùng trong development. Có thể thực hiện bằng phương thức Inertia::handleExceptionsUsing() trong service provider của ứng dụng.

// app/Providers/AppServiceProvider.php
use Inertia\Inertia;
use Inertia\ExceptionResponse;

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();
        }
    });
}

Vì exception như 404 xảy ra bên ngoài Inertia middleware (request không bao giờ tới route), error response mặc định không truy cập được shared data hoặc root view. Gọi withSharedData() rõ ràng sẽ resolve Inertia middleware và đưa shared props vào error page. Instance ExceptionResponse cung cấp exception, request và response dưới dạng public readonly property, cùng các method sau:

render($component, $props) - Render Inertia page component với props được cung cấp
withSharedData() - Bao gồm shared data từ Inertia middleware
usingMiddleware($class) - Chỉ định Inertia middleware dùng để resolve shared data và root view
rootView($view) - Đặt custom root view cho error response
statusCode() - Lấy HTTP status code của response ban đầu

Inertia middleware được tự động resolve từ matched route hoặc middleware group của kernel, nên withSharedData() thường hoạt động mà không cần chỉ định middleware class. Trả null từ callback sẽ fallback về cách render exception mặc định của Laravel.

Ví dụ trang lỗi

Bạn cần tạo các error page component được tham chiếu ở trên. Dưới đây là ví dụ có thể dùng làm điểm bắt đầu.

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

export default function ErrorPage({ status }) {
  const title = {
    503: "503: Service Unavailable",
    500: "500: Server Error",
    404: "404: Page Not Found",
    403: "403: Forbidden",
  }[status];

  const description = {
    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.",
  }[status];

  return (
    <div>
      <h1>{title}</h1>
      <div>{description}</div>
    </div>
  );
}

<script>
    let { status } = $props()

    const title = {
        503: '503: Service Unavailable',
        500: '500: Server Error',
        404: '404: Page Not Found',
        403: '403: Forbidden',
    }

    const description = {
        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.',
    }
</script>

<div>
    <h1>{title[status]}</h1>
    <div>{description[status]}</div>
</div>

Xử lý exception thủ công

Bên dưới, handleExceptionsUsing() đăng ký callback $exceptions->respond() trong file bootstrap/app.php của ứng dụng. Bạn có thể đăng ký callback này thủ công nếu muốn.

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('ErrorPage', ['status' => $response->getStatusCode()])
                ->toResponse($request)
                ->setStatusCode($response->getStatusCode());
        }

        return $response;
    });
})

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v3 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Môi trường phát triển

Production

Ví dụ trang lỗi

Xử lý exception thủ công

Tài liệu chính thức

​Môi trường phát triển

​Production

​Ví dụ trang lỗi

​Xử lý exception thủ công

​Tài liệu chính thức

Môi trường phát triển

Production

Ví dụ trang lỗi

Xử lý exception thủ công

Tài liệu chính thức