טיפול בשגיאות

טעינות נכשלות. מסד הנתונים אינו זמין, הרשומה נעלמה, משהו זורק שגיאה. בלי תוכנית, await אחד שגוי מפיל איתו את כל המסך.

error.jsx הוא תמונת ראי של loading.jsx: אותו רעיון, תוצאה הפוכה. הצב אותו לצד דף והוא יתפוס כל שגיאה שהדף זורק בזמן הרינדור:

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

בניגוד ל־loading.jsx, יש לו דרישה קשיחה אחת:

'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 חייב להיות רכיב לקוח. הסיבה מופיעה ממש ב-JSX: onClick. כפתור ניסיון חוזר הוא אינטראקטיבי, ואינטראקטיביות דורשת רכיב שנשלח לדפדפן. אם לא מוסיפים 'use client', מקבלים את שגיאת מטפל האירועים מהפרק הקודם, דווקא בעמוד שתפקידו לטפל בשגיאות.

הוא מקבל שני מאפיינים:

• error: השגיאה שנזרקה, כדי שתוכלו לתעד אותה
• reset: פונקציה שמרנדרת מחדש את היחידה שנכשלה. קראו לה והדף ינסה שוב

reset הוא מה שהופך את זה ליותר ממסך קריסה נעים יותר. תקלה שנכשלה פעם אחת תעבוד לעיתים קרובות בפעם השנייה, והמשתמש לא היה צריך לטעון מחדש שום דבר.

בדומה לשאר הקבצים המיוחדים, error.jsx מכסה את התיקייה שלו ואת כל מה שמקונן בתוכה, כך שקובץ אחד סמוך לשורש משמש רשת ביטחון ליחידה שלמה באתר.