Error Boundaries & การจัดการข้อผิดพลาด
Error boundaries, componentDidCatch, error fallback, error recovery, กลยุทธ์การ logging
1Error Boundary ใน React คืออะไร?
Error Boundary ใน React คืออะไร?
คำตอบ
Error Boundary เป็น class component ของ React ที่จับข้อผิดพลาด JavaScript ที่เกิดขึ้นในแผนผังคอมโพเนนต์ลูก แสดง fallback UI และป้องกันไม่ให้แอปพลิเคชันทั้งหมดล่ม โดยใช้เมธอด componentDidCatch() และ getDerivedStateFromError() เพื่อดักจับและจัดการข้อผิดพลาดในการ render
2ทำไมต้องใช้ Error Boundaries แทน try/catch แบบดั้งเดิมใน React?
ทำไมต้องใช้ Error Boundaries แทน try/catch แบบดั้งเดิมใน React?
คำตอบ
บล็อก try/catch ไม่สามารถจับข้อผิดพลาดที่เกิดขึ้นระหว่างการ render คอมโพเนนต์ React ได้ เนื่องจากข้อผิดพลาดเหล่านี้แพร่กระจายขึ้นไปในแผนผังแบบ asynchronous Error Boundaries ถูกออกแบบมาเพื่อดักจับข้อผิดพลาดในการ render, lifecycle และ constructor ของคอมโพเนนต์ลูกโดยเฉพาะ ในขณะที่ try/catch ทำงานได้เฉพาะกับโค้ดแบบ imperative ที่เป็น synchronous เท่านั้น
3เมธอด lifecycle ใดที่ช่วยดักจับข้อผิดพลาดใน Error Boundary?
เมธอด lifecycle ใดที่ช่วยดักจับข้อผิดพลาดใน Error Boundary?
คำตอบ
componentDidCatch(error, info) เป็นเมธอด lifecycle ที่ถูกเรียกหลังจากที่ Error Boundary จับข้อผิดพลาดได้ โดยรับ error และออบเจกต์ info ที่มี componentStack ทำให้สามารถบันทึก log ข้อผิดพลาดหรือดำเนินการ side-effect ได้ โปรดทราบว่า getDerivedStateFromError() ก็ถูกใช้เช่นกันแต่เพื่ออัปเดต state และแสดง fallback UI
บทบาทของ getDerivedStateFromError() ใน Error Boundary คืออะไร?
getDerivedStateFromError() กับ componentDidCatch() แตกต่างกันอย่างไร?
+15 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี