Error Boundaries ใน Next.js App Router

แอป Next.js ส่วนใหญ่ทำงานได้ดีเมื่อทุกอย่างเป็นไปตามแผน แต่จะล้มเหลวเมื่อเกิดข้อผิดพลาดขึ้น แอปที่มีคุณภาพสูงจะใช้ Error Boundaries เพื่อจัดการกับความล้มเหลวเหล่านี้อย่างราบรื่น

App Router ใช้โมเดลที่แตกต่างจาก Pages Router โดยจะอาศัย React Error Boundaries คุณสามารถใช้ไฟล์ error.js เพื่อดักจับปัญหาในทุกระดับของ route ของคุณ

หลักการทำงาน:

• ข้อผิดพลาดจะถูกจำกัดอยู่ภายในขอบเขตของ error.js ที่ใกล้ที่สุด • ข้อผิดพลาดจะไม่ถูกส่งไปยังตัวจัดการระดับ global เว้นแต่คุณต้องการให้เป็นเช่นนั้น • คุณสามารถแสดงหน้าจอข้อผิดพลาดที่แตกต่างกันสำหรับส่วนต่างๆ ของแอปได้

กฎของไฟล์ error.js:

  • ต้องเป็น Client Component โดยใช้ 'use client' ไว้ที่ด้านบนสุด
  • มันจะดักจับข้อผิดพลาดใน segment นั้นและ segment ลูกทั้งหมด
  • คุณจะได้ฟังก์ชัน 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 image generator ซึ่งมีหลายขั้นตอน เช่น การเรียก API และการอัปโหลดไฟล์ หากขั้นตอนใดขั้นตอนหนึ่งล้มเหลว Error Boundary จะแสดงข้อความเฉพาะเจาะจง และปุ่ม reset จะช่วยให้ผู้ใช้ลองใหม่อีกครั้งได้โดยไม่ต้องเสีย prompt ที่พิมพ์ไว้

โครงสร้างที่ดีควรเป็นดังนี้:

• global-error.js: ตาข่ายนิรภัยด่านสุดท้าย • error.js: จัดการข้อผิดพลาดในระดับ root • dashboard/error.js: จัดการข้อผิดพลาดภายใน dashboard • auth/error.js: จัดการข้อผิดพลาดในการเข้าสู่ระบบหรือ session

วิธีการนี้ช่วยป้องกันไม่ให้ข้อผิดพลาดเล็กๆ เพียงจุดเดียวทำให้เว็บไซต์ทั้งหมดของคุณพังลง

ที่มา: https://dev.to/aon_infotech_3a1b6ff525fc/error-boundaries-in-nextjs-app-router-handling-failures-gracefully-3mif