เมื่อพูดถึงการจัดการข้อผิดพลาดใน React หนึ่งในของขวัญที่ยิ่งใหญ่ที่สุดที่เราได้รับคือขอบเขตข้อผิดพลาด แต่เช่นเดียวกับของขวัญอื่นๆ มันไม่มีประโยชน์หากแกะห่อและไม่เห็นค่า งั้นเรามาแกะอันนี้กันดีไหม?
ขอบเขตข้อผิดพลาด เครื่องช่วยชีวิต
ก่อนที่จะเจาะลึกถึงแนวทางปฏิบัติที่ไม่ดี เรามาทำความเข้าใจก่อนว่าขอบเขตข้อผิดพลาดคืออะไร คิดว่าขอบเขตของข้อผิดพลาดเป็นบล็อก catch ของคำสั่ง try-catch ของคุณ แต่สำหรับส่วนประกอบ React ของคุณ หากส่วนประกอบใดๆ ภายในขอบเขตข้อผิดพลาดส่งข้อผิดพลาดระหว่างการเรนเดอร์ ในวิธีวงจรชีวิต หรือใน Constructor ขอบเขตข้อผิดพลาดจะตรวจจับข้อผิดพลาดนั้น ป้องกันไม่ให้แอปทั้งหมดของคุณหยุดทำงาน แต่จะแสดง UI ทางเลือกซึ่งเป็นสิ่งที่คุณกำหนดแทน
ข้อผิดพลาดทั่วไปที่มีขอบเขตข้อผิดพลาด
ตอนนี้เราได้แกะของขวัญแล้ว เรามาดูวิธีการบางส่วนที่ของขวัญถูกนำไปใช้ในทางที่ผิดหรือน้อยเกินไปกันดีกว่า
ไม่ได้ใช้ขอบเขตข้อผิดพลาดเลย:
ข้อผิดพลาดแรกและชัดเจนที่สุดคือการไม่ใช้ขอบเขตข้อผิดพลาด หากเพิกเฉยต่อสิ่งเหล่านี้ คุณจะพลาดส่วนสำคัญของการจัดการข้อผิดพลาดใน React โดยพื้นฐานแล้ว คุณจะปล่อยให้แอปของคุณขัดข้องและเบิร์นในกรณีที่มีข้อผิดพลาด แทนที่จะจัดการอย่างเรียบร้อยและให้การตอบสนองที่เป็นประโยชน์แก่ผู้ใช้ของคุณ
ไม่วางขอบเขตข้อผิดพลาดในระดับที่เหมาะสม:
ขอบเขตข้อผิดพลาดทำงานเหมือนกับเครือข่าย โดยตรวจจับข้อผิดพลาดจากส่วนประกอบที่อยู่ด้านล่างในแผนภูมิ ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องวางพวกมันให้อยู่ในระดับที่ถูกต้อง หากวางไว้สูงเกินไป คุณอาจจะต้องเปลี่ยน UI ของแอปทั้งหมดในกรณีที่เกิดข้อผิดพลาดเล็กน้อย ในทางกลับกัน หากวางต่ำเกินไป คุณอาจพลาดข้อผิดพลาดบางอย่างที่เกิดขึ้นในส่วนประกอบหลัก
การใช้ขอบเขตข้อผิดพลาดแทนการจัดการข้อผิดพลาดที่เหมาะสม:
แม้ว่าขอบเขตข้อผิดพลาดจะเป็นเครือข่ายความปลอดภัยที่ดี แต่ก็ไม่สามารถทดแทนการจัดการข้อผิดพลาดที่เหมาะสมได้ มีไว้เพื่อตรวจจับข้อผิดพลาดที่คุณไม่คาดคิด ไม่ใช่ข้อผิดพลาดที่คุณทำ สำหรับข้อผิดพลาดที่คาดหวัง เช่น ข้อผิดพลาด API ควรใช้การจัดการข้อผิดพลาดที่เหมาะสมโดยใช้บล็อก try-catch หรือวิธี catch catch
ละเว้นข้อมูลที่ให้ไว้โดยขอบเขตข้อผิดพลาด:
เมื่อข้อผิดพลาดถูกตรวจพบโดย Error Boundary ข้อผิดพลาดจะถูกส่งผ่านไปยังวิธี componentDidCatch หรือไปยังวิธี getDerivedStateFromError แบบคงที่ ขึ้นอยู่กับว่าคุณจำเป็นต้องแสดงผล UI ทางเลือกหรือไม่ ออบเจ็กต์ข้อผิดพลาดนี้มีข้อมูลที่เป็นประโยชน์เกี่ยวกับสิ่งที่ผิดพลาด ซึ่งสามารถใช้เพื่อบันทึกข้อผิดพลาดไปยังบริการรายงานข้อผิดพลาด
ตัวอย่าง: การยอมรับขอบเขตข้อผิดพลาด
มาดูวิธีการใช้ขอบเขตข้อผิดพลาดอย่างถูกต้องกัน
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // You can also log the error to an error reporting service logErrorToMyService(error, info); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; } }
ในแอปของคุณ ให้รวมส่วนประกอบที่อาจเกิดข้อผิดพลาดได้ง่ายด้วย ErrorBoundary:
<ErrorBoundary> <MyComponent /> </ErrorBoundary>
หาก MyComponent
หรือส่วนประกอบอื่นๆ ภายใน ErrorBoundary
เกิดขึ้นระหว่างการเรนเดอร์ ข้อผิดพลาดจะถูกตรวจพบและ UI ทางเลือกจะปรากฏขึ้น
เมื่อใช้ขอบเขตข้อผิดพลาด คุณจะนำความยืดหยุ่นมาสู่แอปของคุณมากขึ้น แทนที่จะปล่อยให้ข้อผิดพลาดที่ไม่ถูกตรวจจับมาทำลายประสบการณ์ของผู้ใช้ คุณกำลังควบคุมการเล่าเรื่องและบอกพวกเขาว่า "เฮ้ มีบางอย่างผิดพลาด แต่เรากำลังดำเนินการอยู่"
แต่จำไว้ว่าขอบเขตข้อผิดพลาดไม่ใช่ไม้วิเศษที่จะลบล้างข้อผิดพลาดทั้งหมด สิ่งเหล่านี้เป็นเพียงส่วนหนึ่งของกลยุทธ์การจัดการข้อผิดพลาดที่ใหญ่กว่าซึ่งควรมีหลักการบันทึก การทดสอบ และการจัดการข้อผิดพลาดทั่วไปที่เหมาะสม พวกเขาเป็นแนวป้องกันสุดท้าย ไม่ใช่แนวแรกและแนวเดียว
ดังนั้น หากคุณกีดกัน Error Boundaries ก็ถึงเวลานำขอบเขตเหล่านั้นมามีบทบาท ผู้ใช้ของคุณอาจไม่เคยเห็นพวกเขาทำงานเลย — และนั่นก็เป็นสิ่งที่ดี แต่เมื่อสิ่งต่างๆ ตกต่ำ คุณจะดีใจที่มันอยู่ที่นั่น พร้อมที่จะรับการล้มและเล่นเกมต่อไป
ในส่วนถัดไปของซีรีส์นี้ เราจะยังคงจัดการกับแนวทางปฏิบัติ React ที่ไม่ดีเพิ่มเติมต่อไป คอยติดตาม เรียนรู้ต่อไป และเหนือสิ่งอื่นใด จงเขียนโค้ดต่อไป คุณกำลังก้าวไปสู่การไม่ใช่แค่นักพัฒนา React แต่ยังเป็นนักพัฒนาที่ยอดเยี่ยมอีกด้วย
ไว้คราวหน้าล็อกไว้ที่นี่เพื่อให้ React เป็นของจริง ลาก่อน.
ขอบคุณที่อ่าน! หากคุณเป็นฟรีแลนซ์ที่ต้องการปรับปรุงเกมการเขียนข้อเสนอของคุณและเข้าถึงลูกค้าได้มากขึ้น ลองใช้ "Bingo" ดูสิ ไปที่เว็บไซต์ของเราเพื่อเรียนรู้เพิ่มเติมและเริ่มเขียนข้อเสนอที่ชนะวันนี้