Frontend Academy · บทเรียน

ขอบเขตข้อผิดพลาด

ขอบเขตข้อผิดพลาด เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้ขอบเขตข้อผิดพลาด

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

เฉพาะคอมโพเนนต์คลาสเท่านั้น

ขอบเขตข้อผิดพลาดต้องเป็นคอมโพเนนต์คลาส ซึ่งยังคงเป็นเช่นนั้นในปี 2026 เพราะยังไม่มีสิ่งเทียบเท่าที่เป็นฮุก ฮุก useErrorBoundary มีอยู่ในไลบรารีอย่าง react-error-boundary

getDerivedStateFromError

เมธอดแบบคงที่ที่ถูกเรียกเมื่อคอมโพเนนต์ลูกหลานส่งข้อผิดพลาด ให้คืนค่าการอัปเดตสถานะที่ทำให้เกิดการเรนเดอร์เนื้อหาสำรอง

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

componentDidCatch สำหรับการบันทึกข้อมูล

ใช้ componentDidCatch เพื่อบันทึกข้อผิดพลาดไปยังบริการ เช่น Sentry หรือ Datadog โดยเมธอดนี้จะได้รับทั้งข้อผิดพลาดและสแต็กคอมโพเนนต์ของรีแอ็กต์

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

ครอบรากของแอป

ครอบ App ระดับบนสุดของคุณด้วยขอบเขตข้อผิดพลาด เพื่อป้องกันหน้าจอว่างเปล่าจากข้อผิดพลาดร้ายแรง

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

ขอบเขตแบบละเอียดต่อเส้นทางหรือวิดเจ็ต

ขอบเขตส่วนกลางหนึ่งจุดคือขั้นต่ำที่ควรมี เพิ่มขอบเขตแยกตามเส้นทาง เพื่อไม่ให้ข้อผิดพลาดในส่วนหนึ่งทำให้แอปทั้งแอปว่างเปล่า

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

สิ่งที่ขอบเขตดักจับข้อผิดพลาดไม่ดักจับ

ขอบเขตจะไม่ดักจับข้อผิดพลาดในตัวจัดการเหตุการณ์ โค้ดอะซิงโครนัส (setTimeout, พรอมิส) ข้อผิดพลาดที่เกิดขึ้นระหว่าง SSR และข้อผิดพลาดภายในขอบเขตเอง โปรดใช้ try/catch ในกรณีเหล่านี้

ข้อผิดพลาดในตัวจัดการเหตุการณ์

ครอบตัวจัดการเหตุการณ์ด้วย try/catch แล้วเรียกใช้ฟังก์ชัน reportError ด้วยตนเอง

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

ไลบรารี react-error-boundary

แพ็กเกจจากชุมชน react-error-boundary มี API ที่เหมาะกับคอมโพเนนต์ฟังก์ชัน พร้อมรองรับการรีเซ็ต

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

การรีเซ็ตเมื่อกู้คืนได้

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

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

การพัฒนาเทียบกับการใช้งานจริง

ในโหมดการพัฒนา React ยังคงแสดงโอเวอร์เลย์ข้อผิดพลาดสีแดงแม้จะมีขอบเขตแล้ว ซึ่งเป็นพฤติกรรมที่ตั้งใจไว้ ในการใช้งานจริง จะแสดงเฉพาะเนื้อหาสำรองของขอบเขต

แนวปฏิบัติที่ดี

1) วางขอบเขตส่วนกลางไว้ที่รากของแอป 2) ใช้ขอบเขตแยกตามเส้นทาง 3) ใช้ขอบเขตแบบละเอียดรอบวิดเจ็ตที่เป็นอิสระต่อกัน 4) บันทึกข้อมูลไปยังบริการติดตามเสมอ 5) แสดงการดำเนินการเพื่อกู้คืน เช่น ลองใหม่หรือกลับหน้าหลัก 6) อย่ากลืนข้อผิดพลาดโดยไม่แสดงอะไร

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ขอบเขตดักจับข้อผิดพลาดของ React ไม่ดักจับข้อผิดพลาดประเภทใด

ทบทวน: ขอบเขตดักจับข้อผิดพลาด

ใช้คอมโพเนนต์คลาสร่วมกับ static getDerivedStateFromError และ componentDidCatch เพื่อครอบส่วนย่อยและดักจับข้อผิดพลาดขณะเรนเดอร์ ไม่ดักจับข้อผิดพลาดในตัวจัดการเหตุการณ์ โค้ดอะซิงโครนัส หรือ SSR วางขอบเขตส่วนกลางไว้ที่รากของแอป พร้อมขอบเขตแยกตามเส้นทางและวิดเจ็ต บันทึกข้อผิดพลาดไปยัง Sentry และเสนอการดำเนินการเพื่อกู้คืน ไลบรารี react-error-boundary ช่วยให้ใช้งานได้สะดวกยิ่งขึ้น

คำถามที่พบบ่อย

บทเรียน “ขอบเขตข้อผิดพลาด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ขอบเขตข้อผิดพลาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ขอบเขตข้อผิดพลาด”

สร้างขอบเขตข้อผิดพลาดแบบใช้คลาสด้วย componentDidCatch และ getDerivedStateFromError เพื่อป้องกันไม่ให้ข้อผิดพลาดระหว่างเรนเดอร์ที่ไม่ได้ดักจับทำให้ทั้งแอปล่ม คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ขอบเขตข้อผิดพลาด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy