גבולות שגיאה (Error Boundaries) ב-Next.js App Router
רוב אפליקציות ה-Next.js עובדות היטב כשכל דבר הולך כשורה. הן נכשלות כשמשהו משתבש. אפליקציות באיכות גבוהה משתמשות ב-error boundaries כדי לטפל בכשלים הללו בצורה חלקה.
ה-App Router משתמש במודל שונה מזה של ה-Pages Router. הוא מסתמך על React Error Boundaries. משתמשים בקבצי error.js כדי לתפוס בעיות בכל רמה של ה-route שלכם.
איך זה עובד:
• שגיאות נשארות בתוך גבול ה-error.js הקרוב ביותר. • שגיאות אינן עוברות למטפל (handler) גלובלי אלא אם כן תרצו בכך. • ניתן להציג מסכי שגיאה שונים עבור חלקים שונים באפליקציה שלכם.
הכללים עבור קובץ error.js:
- הוא חייב להיות Client Component. יש להשתמש ב-'use client' בראש הקובץ.
- הוא תופס שגיאות באותו segment ובכל ה-children שלו.
- מקבלים פונקציית reset כדי לנסות שוב את ה-render שנכשל.
השתמשו בפונקציית ה-reset עבור בעיות זמניות כמו ניתוקי רשת. אל תשתמשו בה עבור שגיאות קבועות.
השתמשו ב-global-error.js עבור ה-root layout. קובץ ה-error.js הסטנדרטי אינו תופס שגיאות ב-root layout.js. ה-global-error.js הוא המוצא האחרון שלכם. הוא מחליף את ה-root layout, ולכן הוא זקוק לתגיות ו-
משלו.ניהול סוגי שגיאות שונים:
- השתמשו ב-notFound() עבור נתונים חסרים. זה מפעיל את not-found.js.
- השתמשו ב-throw Error() עבור כשלים בלתי צפויים. זה מפעיל את error.js.
ההפרדה הזו שומרת על האפליקציה שלכם נקייה. משתמש שמחפש פוסט בבלוג שחסר יראה דף 404. משתמש שנתקל בקריסת מסד נתונים יראה הודעת שגיאה.
אני משתמש בתבנית הזו עבור מחולל תמונות AI. לתהליך יש שלבים רבים כמו קריאות API והעלאות קבצים. אם שלב אחד נכשל, ה-error boundary מציג הודעה ספציפית. כפתור ה-reset מאפשר למשתמש לנסות שוב מבלי לאבד את ה-prompt שלו.
מבנה טוב נראה כך:
• global-error.js: רשת הביטחון האחרונה. • error.js: מטפל בשגיאות ברמת ה-root. • dashboard/error.js: מטפל בשגיאות בתוך ה-dashboard. • auth/error.js: מטפל בשגיאות התחברות או session.
גישה זו מונעת משגיאה קטנה אחת לשבור את כל האתר שלכם.