Xử lý lỗi

Quá trình tải thất bại. Cơ sở dữ liệu ngừng hoạt động, bản ghi biến mất, có thứ gì đó ném ngoại lệ (exception). Không có phương án xử lý, chỉ một await lỗi cũng khiến cả màn hình gặp sự cố.

error.jsx là hình ảnh phản chiếu của loading.jsx: cùng ý tưởng, kết quả trái ngược. Đặt tệp này cạnh một trang, nó sẽ bắt mọi lỗi mà trang đó gây ra khi hiển thị:

app/
    menu/
        page.jsx
        loading.jsx    while it works
        error.jsx      when it doesn't

Không giống như loading.jsx, thành phần này có một yêu cầu bắt buộc:

'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Couldn't load the menu</h2>
            <button onClick={reset}>Try again</button>
        </div>
    );
}

error.jsx phải là một client component. Lý do nằm ngay trong JSX: onClick. Nút thử lại có tính tương tác, và tính tương tác cần một component được gửi đến trình duyệt. Nếu bỏ 'use client', bạn sẽ gặp lỗi trình xử lý sự kiện từ chương trước, ngay trên trang có nhiệm vụ xử lý lỗi.

Nó nhận hai prop:

• error: lỗi Error đã xảy ra để bạn có thể ghi lại
• reset: một hàm kết xuất lại phần bị lỗi. Gọi hàm này để trang thử lại

reset khiến tính năng này không chỉ là một màn hình báo lỗi đẹp mắt hơn. Một tín hiệu lỗi một lần thường sẽ hoạt động ở lần thứ hai, và người dùng không cần tải lại bất cứ thứ gì.

Giống như các tệp đặc biệt khác, error.jsx áp dụng cho thư mục chứa nó và mọi thư mục con, nên chỉ một tệp gần thư mục gốc cũng có thể bảo vệ cả một phần của trang web.