React Error Boundaries: คู่มือฉบับสมบูรณ์เพื่อการจัดการข้อผิดพลาดที่แข็งแกร่ง

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

React Error Boundaries คืออะไร?

Error Boundaries คือคอมโพเนนต์ของ React ที่ดักจับข้อผิดพลาด JavaScript ที่เกิดขึ้นที่ใดก็ได้ในโครงสร้างคอมโพเนนต์ลูก (child component tree) บันทึกข้อผิดพลาดเหล่านั้น และแสดง UI สำรอง (fallback UI) แทนที่โครงสร้างคอมโพเนนต์ที่ล่มไป มันทำหน้าที่เหมือนตาข่ายนิรภัย ป้องกันไม่ให้ข้อผิดพลาดในส่วนหนึ่งของแอปพลิเคชันทำให้ UI ทั้งหมดล่มลง Error Boundaries ถูกนำมาใช้ใน React 16 เพื่อแทนที่กลไกการจัดการข้อผิดพลาดแบบเดิมซึ่งมีความแข็งแกร่งน้อยกว่า

ลองนึกภาพว่า Error Boundaries เป็นเหมือนบล็อก `try...catch` สำหรับคอมโพเนนต์ React แต่ต่างจาก `try...catch` ตรงที่มันทำงานสำหรับคอมโพเนนต์โดยเฉพาะ ซึ่งเป็นวิธีการจัดการข้อผิดพลาดแบบประกาศ (declarative) และนำกลับมาใช้ใหม่ได้ทั่วทั้งแอปพลิเคชันของคุณ

ทำไมต้องใช้ Error Boundaries?

Error Boundaries มีประโยชน์ที่สำคัญหลายประการ:

• ป้องกันแอปพลิเคชันล่ม: ประโยชน์ที่สำคัญที่สุดคือการป้องกันไม่ให้ข้อผิดพลาดของคอมโพเนนต์เดียวทำให้แอปพลิเคชันทั้งหมดล่ม แทนที่จะเห็นหน้าจอว่างเปล่าหรือข้อความแสดงข้อผิดพลาดที่ไม่เป็นประโยชน์ ผู้ใช้จะเห็น UI สำรองที่สวยงาม
• ปรับปรุงประสบการณ์ผู้ใช้: การแสดง UI สำรองช่วยให้ผู้ใช้สามารถใช้งานส่วนต่างๆ ของแอปพลิเคชันที่ยังคงทำงานได้อย่างถูกต้องต่อไป ซึ่งช่วยหลีกเลี่ยงประสบการณ์ที่ติดขัดและน่าหงุดหงิด
• แยกข้อผิดพลาด: Error Boundaries ช่วยแยกข้อผิดพลาดไปยังส่วนต่างๆ ของแอปพลิเคชัน ทำให้ง่ายต่อการระบุและแก้ไขสาเหตุที่แท้จริงของปัญหา
• การบันทึกและตรวจสอบที่ดีขึ้น: Error Boundaries เป็นศูนย์กลางในการบันทึกข้อผิดพลาดที่เกิดขึ้นในแอปพลิเคชันของคุณ ข้อมูลนี้มีค่าอย่างยิ่งสำหรับการระบุและแก้ไขปัญหาเชิงรุก ซึ่งสามารถเชื่อมต่อกับบริการตรวจสอบ เช่น Sentry, Rollbar หรือ Bugsnag ซึ่งทั้งหมดนี้ครอบคลุมทั่วโลก
• รักษาสถานะของแอปพลิเคชัน: แทนที่จะสูญเสียสถานะทั้งหมดของแอปพลิเคชันเนื่องจากการล่ม Error Boundaries ช่วยให้ส่วนที่เหลือของแอปพลิเคชันยังคงทำงานต่อไปได้ รักษาความคืบหน้าและข้อมูลของผู้ใช้ไว้

การสร้างคอมโพเนนต์ Error Boundary

ในการสร้างคอมโพเนนต์ Error Boundary คุณต้องกำหนดคลาสคอมโพเนนต์ (class component) ที่มีการใช้งานเมธอด lifecycle อย่างน้อยหนึ่งหรือทั้งสองอย่างต่อไปนี้:

• static getDerivedStateFromError(error): เมธอดแบบ static นี้จะถูกเรียกใช้หลังจากที่คอมโพเนนต์ลูก (descendant component) เกิดข้อผิดพลาด มันจะได้รับข้อผิดพลาดที่เกิดขึ้นเป็นอาร์กิวเมนต์ และควรคืนค่าเพื่ออัปเดต state สำหรับการ render UI สำรอง
• componentDidCatch(error, info): เมธอดนี้จะถูกเรียกใช้หลังจากที่คอมโพเนนต์ลูกเกิดข้อผิดพลาด มันจะได้รับข้อผิดพลาดที่เกิดขึ้น รวมถึงอ็อบเจกต์ info ที่มีข้อมูลเกี่ยวกับคอมโพเนนต์ที่ทำให้เกิดข้อผิดพลาด คุณสามารถใช้เมธอดนี้เพื่อบันทึกข้อผิดพลาดหรือดำเนินการอื่นๆ ที่เป็น side effects

นี่คือตัวอย่างพื้นฐานของคอมโพเนนต์ Error Boundary:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // อัปเดต state เพื่อให้การ render ครั้งถัดไปแสดง UI สำรอง
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // ตัวอย่าง "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("Caught an error: ", error, info.componentStack);
    // คุณยังสามารถบันทึกข้อผิดพลาดไปยังบริการรายงานข้อผิดพลาดได้
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // คุณสามารถ render UI สำรองที่กำหนดเองได้
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

คำอธิบาย:

• คอมโพเนนต์ ErrorBoundary เป็นคลาสคอมโพเนนต์ที่สืบทอดมาจาก React.Component
• constructor จะเริ่มต้น state ด้วย hasError: false แฟล็กนี้จะถูกใช้เพื่อตัดสินใจว่าจะ render UI สำรองหรือไม่
• static getDerivedStateFromError(error) เป็นเมธอด static ที่ได้รับข้อผิดพลาดที่เกิดขึ้น มันจะอัปเดต state เป็น hasError: true ซึ่งจะกระตุ้นให้เกิดการ render UI สำรอง
• componentDidCatch(error, info) เป็นเมธอด lifecycle ที่ได้รับข้อผิดพลาดและอ็อบเจกต์ info ที่มีข้อมูลเกี่ยวกับ component stack มันถูกใช้เพื่อบันทึกข้อผิดพลาดไปยังคอนโซล ในแอปพลิเคชันที่ใช้งานจริง โดยทั่วไปคุณจะบันทึกข้อผิดพลาดไปยังบริการรายงานข้อผิดพลาด
• เมธอด render() จะตรวจสอบ state hasError หากเป็น true มันจะ render UI สำรอง (ในกรณีนี้คือแท็ก

  ง่ายๆ) มิฉะนั้น มันจะ render children ของคอมโพเนนต์

การใช้งาน Error Boundaries

ในการใช้ Error Boundary เพียงแค่ครอบคอมโพเนนต์ที่คุณต้องการป้องกันด้วยคอมโพเนนต์ ErrorBoundary:

หาก ComponentThatMightThrow เกิดข้อผิดพลาด ErrorBoundary จะดักจับข้อผิดพลาด อัปเดต state ของมัน และ render UI สำรอง ส่วนที่เหลือของแอปพลิเคชันจะยังคงทำงานได้ตามปกติ

การวางตำแหน่ง Error Boundary

การวางตำแหน่งของ Error Boundaries เป็นสิ่งสำคัญอย่างยิ่งสำหรับการจัดการข้อผิดพลาดที่มีประสิทธิภาพ ลองพิจารณากลยุทธ์เหล่านี้:

• Top-Level Error Boundaries: ครอบแอปพลิเคชันทั้งระบบด้วย Error Boundary เพื่อดักจับข้อผิดพลาดใดๆ ที่ไม่ได้รับการจัดการและป้องกันไม่ให้แอปพลิเคชันล่มโดยสิ้นเชิง ซึ่งเป็นการป้องกันในระดับพื้นฐาน
• Granular Error Boundaries: ครอบคอมโพเนนต์หรือส่วนเฉพาะของแอปพลิเคชันด้วย Error Boundaries เพื่อแยกข้อผิดพลาดและให้ UI สำรองที่ตรงเป้าหมายมากขึ้น ตัวอย่างเช่น คุณอาจครอบคอมโพเนนต์ที่ดึงข้อมูลจาก API ภายนอกด้วย Error Boundary
• Page-Level Error Boundaries: พิจารณาวาง Error Boundaries รอบๆ ทั้งหน้าหรือเส้นทาง (route) ในแอปพลิเคชันของคุณ ซึ่งจะช่วยป้องกันไม่ให้ข้อผิดพลาดในหน้าหนึ่งส่งผลกระทบต่อหน้าอื่นๆ

ตัวอย่าง:

function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

ในตัวอย่างนี้ แต่ละส่วนหลักของแอปพลิเคชัน (Header, Sidebar, ContentArea, Footer) ถูกครอบด้วย Error Boundary ซึ่งช่วยให้แต่ละส่วนสามารถจัดการข้อผิดพลาดได้อย่างอิสระ ป้องกันไม่ให้ข้อผิดพลาดเดียวส่งผลกระทบต่อทั้งแอปพลิเคชัน

การปรับแต่ง Fallback UI

UI สำรองที่แสดงโดย Error Boundary ควรให้ข้อมูลที่เป็นประโยชน์และเป็นมิตรต่อผู้ใช้ ลองพิจารณาแนวทางเหล่านี้:

• ให้ข้อความแสดงข้อผิดพลาดที่ชัดเจน: แสดงข้อความแสดงข้อผิดพลาดที่กระชับและให้ข้อมูลซึ่งอธิบายว่าเกิดอะไรขึ้น หลีกเลี่ยงศัพท์เทคนิคและใช้ภาษาที่ผู้ใช้เข้าใจง่าย
• เสนอแนวทางแก้ไข: แนะนำวิธีแก้ปัญหาที่เป็นไปได้ให้แก่ผู้ใช้ เช่น การรีเฟรชหน้าเว็บ ลองอีกครั้งในภายหลัง หรือติดต่อฝ่ายสนับสนุน
• รักษารูปแบบแบรนด์ให้สอดคล้องกัน: ตรวจสอบให้แน่ใจว่า UI สำรองเข้ากับการออกแบบและแบรนด์โดยรวมของแอปพลิเคชันของคุณ ซึ่งช่วยรักษาประสบการณ์ผู้ใช้ที่สอดคล้องกัน
• จัดเตรียมช่องทางในการรายงานข้อผิดพลาด: ใส่ปุ่มหรือลิงก์ที่ให้ผู้ใช้สามารถรายงานข้อผิดพลาดไปยังทีมของคุณได้ ซึ่งสามารถให้ข้อมูลอันมีค่าสำหรับการแก้ไขจุดบกพร่องและปัญหาต่างๆ

ตัวอย่าง:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // อัปเดต state เพื่อให้การ render ครั้งถัดไปแสดง UI สำรอง
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // คุณยังสามารถบันทึกข้อผิดพลาดไปยังบริการรายงานข้อผิดพลาดได้
    console.error("Caught an error: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // คุณสามารถ render UI สำรองที่กำหนดเองได้
      return (
        

          
อุ๊ปส์! มีบางอย่างผิดปกติ
          
ขออภัย เกิดข้อผิดพลาดขณะพยายามแสดงเนื้อหานี้
          
โปรดลองรีเฟรชหน้าเว็บหรือติดต่อฝ่ายสนับสนุนหากปัญหายังคงอยู่
           window.location.reload()}>รีเฟรชหน้า
          ติดต่อฝ่ายสนับสนุน
        
      );
    }

    return this.props.children; 
  }
}

ตัวอย่างนี้แสดง UI สำรองที่ให้ข้อมูลมากขึ้น ซึ่งรวมถึงข้อความแสดงข้อผิดพลาดที่ชัดเจน คำแนะนำในการแก้ไขปัญหา และลิงก์สำหรับรีเฟรชหน้าและติดต่อฝ่ายสนับสนุน

การจัดการข้อผิดพลาดประเภทต่างๆ

Error Boundaries จะดักจับข้อผิดพลาดที่เกิดขึ้นระหว่างการ render ในเมธอด lifecycle และใน constructor ของโครงสร้างทั้งหมดที่อยู่ภายใต้มัน แต่ *จะไม่* ดักจับข้อผิดพลาดสำหรับ:

• Event handlers (ตัวจัดการอีเวนต์)
• โค้ดแบบอะซิงโครนัส (เช่น setTimeout, requestAnimationFrame)
• การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (Server-side rendering)
• ข้อผิดพลาดที่เกิดขึ้นในตัว Error Boundary เอง (แทนที่จะเป็น children ของมัน)

ในการจัดการข้อผิดพลาดประเภทเหล่านี้ คุณต้องใช้เทคนิคที่แตกต่างกันไป

Event Handlers

สำหรับข้อผิดพลาดที่เกิดขึ้นใน event handler ให้ใช้บล็อก try...catch มาตรฐาน:

function MyComponent() {
  const handleClick = () => {
    try {
      // โค้ดที่อาจทำให้เกิดข้อผิดพลาด
      throw new Error("Something went wrong in the event handler");
    } catch (error) {
      console.error("Error in event handler: ", error);
      // จัดการข้อผิดพลาด (เช่น แสดงข้อความแสดงข้อผิดพลาด)
      alert("เกิดข้อผิดพลาด โปรดลองอีกครั้ง");
    }
  };

  return Click Me;
}

โค้ดแบบอะซิงโครนัส

สำหรับข้อผิดพลาดที่เกิดขึ้นในโค้ดแบบอะซิงโครนัส ให้ใช้บล็อก try...catch ภายในฟังก์ชันอะซิงโครนัส:

function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // ประมวลผลข้อมูล
        console.log(data);
      } catch (error) {
        console.error("Error fetching data: ", error);
        // จัดการข้อผิดพลาด (เช่น แสดงข้อความแสดงข้อผิดพลาด)
        alert("ไม่สามารถดึงข้อมูลได้ โปรดลองอีกครั้งในภายหลัง");
      }
    }

    fetchData();
  }, []);

  return 
กำลังโหลดข้อมูล...
;
}

หรืออีกทางเลือกหนึ่ง คุณสามารถใช้กลไกการจัดการข้อผิดพลาดแบบโกลบอลสำหรับ unhandled promise rejections:

window.addEventListener('unhandledrejection', function(event) {
  console.error('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ');');
  // สามารถเลือกแสดงข้อความแสดงข้อผิดพลาดแบบโกลบอลหรือบันทึกข้อผิดพลาดไปยังบริการได้
  alert("เกิดข้อผิดพลาดที่ไม่คาดคิด โปรดลองอีกครั้งในภายหลัง");
});

เทคนิคขั้นสูงสำหรับ Error Boundary

การรีเซ็ต Error Boundary

ในบางกรณี คุณอาจต้องการให้ผู้ใช้สามารถรีเซ็ต Error Boundary และลองดำเนินการที่ทำให้เกิดข้อผิดพลาดอีกครั้ง ซึ่งจะมีประโยชน์หากข้อผิดพลาดเกิดจากปัญหาชั่วคราว เช่น ปัญหาเครือข่าย

ในการรีเซ็ต Error Boundary คุณสามารถใช้ไลบรารีการจัดการ state เช่น Redux หรือ Context เพื่อจัดการ state ของข้อผิดพลาดและจัดเตรียมฟังก์ชันสำหรับรีเซ็ต หรือคุณสามารถใช้วิธีที่ง่ายกว่าโดยการบังคับให้ Error Boundary ทำการ remount

ตัวอย่าง (การบังคับให้ Remount):

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorCount: 0, key: 0 };
  }

  static getDerivedStateFromError(error) {
    // อัปเดต state เพื่อให้การ render ครั้งถัดไปแสดง UI สำรอง
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // คุณยังสามารถบันทึกข้อผิดพลาดไปยังบริการรายงานข้อผิดพลาดได้
    console.error("Caught an error: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // คุณสามารถ render UI สำรองที่กำหนดเองได้
      return (
        

          
อุ๊ปส์! มีบางอย่างผิดปกติ
          
ขออภัย เกิดข้อผิดพลาดขณะพยายามแสดงเนื้อหานี้
          ลองอีกครั้ง
        
      );
    }

    return 
{this.props.children}
;
  }
}

ในตัวอย่างนี้ มีการเพิ่ม 'key' เข้าไปใน div ที่ครอบอยู่ การเปลี่ยนค่า key จะบังคับให้คอมโพเนนต์ทำการ remount ซึ่งเป็นการล้าง state ของข้อผิดพลาดอย่างมีประสิทธิภาพ เมธอด `resetError` จะอัปเดต state `key` ของคอมโพเนนต์ ทำให้คอมโพเนนต์ remount และ re-render children ของมันอีกครั้ง

การใช้ Error Boundaries ร่วมกับ Suspense

React Suspense ช่วยให้คุณสามารถ "พัก" (suspend) การ render ของคอมโพเนนต์จนกว่าเงื่อนไขบางอย่างจะสำเร็จ (เช่น ดึงข้อมูลเสร็จสิ้น) คุณสามารถรวม Error Boundaries เข้ากับ Suspense เพื่อมอบประสบการณ์การจัดการข้อผิดพลาดที่แข็งแกร่งยิ่งขึ้นสำหรับการดำเนินการแบบอะซิงโครนัส

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      กำลังโหลด...