เมื่อพูดถึงการจัดการข้อผิดพลาดใน 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" ดูสิ ไปที่เว็บไซต์ของเราเพื่อเรียนรู้เพิ่มเติมและเริ่มเขียนข้อเสนอที่ชนะวันนี้