คอมโพเนนต์ขอบเขตข้อผิดพลาด
การสร้างคอมโพเนนต์ wrapper ของ ErrorBoundary พร้อมสล็อตสำรองและการแสดงข้อผิดพลาด
คอมโพเนนต์ขอบเขตข้อผิดพลาด เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ขอบเขตจัดการข้อผิดพลาดคืออะไร
ขอบเขตข้อผิดพลาดคือคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ ซึ่งครอบส่วนหนึ่งของส่วนติดต่อผู้ใช้ ดักจับข้อผิดพลาดจากภายใน และแสดงส่วนแสดงผลสำรองแทนการปล่อยให้แอปพลิเคชันทั้งหมดหยุดทำงาน
แนวคิดหลัก
ขอบเขตนี้จะเก็บตัวบ่งชี้ hasError ไว้ เมื่อค่าเป็นเท็จจะแสดงคอมโพเนนต์ลูก แต่เมื่อดักจับข้อผิดพลาดได้ ตัวบ่งชี้จะเปลี่ยนเป็นจริงและแสดงส่วนแสดงผลสำรอง
import { ref } from "vue";
const hasError = ref(false);ดักจับข้อผิดพลาด
ใช้ onErrorCaptured เพื่อตั้งค่าตัวบ่งชี้และหยุดการส่งต่อ เพื่อให้ขอบเขตนี้เป็นผู้รับผิดชอบความล้มเหลวอย่างเต็มที่
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});จัดเก็บรายละเอียดข้อผิดพลาด
จัดเก็บตัวข้อผิดพลาดไว้ด้วย เพื่อให้ส่วนแสดงผลสำรองแสดงข้อความได้ หรือเพื่อให้คุณเสนอทางเลือกในการลองใหม่
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});โครงสร้างของแม่แบบ
แสดงสล็อตเริ่มต้น (คอมโพเนนต์ลูก) เมื่อทุกอย่างทำงานปกติ และแสดงสล็อตสำรองเมื่อเกิดข้อผิดพลาด
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>สล็อตเริ่มต้นแสดงคอมโพเนนต์ลูก
สล็อตเริ่มต้นเก็บส่วนติดต่อผู้ใช้ที่ต้องการป้องกันไว้ ภายใต้สภาวะปกติ ขอบเขตนี้จะมองไม่เห็น โดยเพียงส่งต่อคอมโพเนนต์ลูกไป
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>สล็อตสำรองแสดงเมื่อเกิดข้อผิดพลาด
กำหนดสล็อตชื่อ fallback สำหรับส่วนติดต่อผู้ใช้เมื่อเกิดข้อผิดพลาด สล็อตนี้สามารถรับข้อผิดพลาดผ่านพร็อพของสล็อตแบบมีขอบเขตได้
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>เพิ่มการลองใหม่
เปิดให้ใช้ reset เพื่อให้ผู้ใช้กู้คืนการทำงานได้ เมธอดนี้จะล้างตัวบ่งชี้และแสดงคอมโพเนนต์ลูกอีกครั้ง
function reset() {
hasError.value = false;
error.value = null;
}ลองใหม่ในส่วนแสดงผลสำรอง
ส่ง reset ผ่านสล็อตแบบมีขอบเขต เพื่อให้ส่วนแสดงผลสำรองเสนอปุ่มลองอีกครั้งแก่ผู้ใช้
<slot v-else name="fallback" :error="error" :reset="reset" />เนื้อหาสำรองเริ่มต้น
กำหนดเนื้อหาเริ่มต้นที่เหมาะสมให้ช่องสำรอง เพื่อให้ขอบเขตข้อผิดพลาดทำงานได้แม้ไม่ได้ระบุเนื้อหาสำรองแบบกำหนดเอง
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>เหตุใดขอบเขตข้อผิดพลาดจึงสำคัญ
หากไม่มีขอบเขตข้อผิดพลาด วิดเจ็ตที่ล้มเหลวเพียงรายการเดียวอาจทำให้มุมมองทั้งหมดหยุดทำงาน ขอบเขตข้อผิดพลาดจะแยกความล้มเหลวออกไป เพื่อให้ส่วนที่เหลือของ app ยังทำงานต่อได้ ซึ่งเป็นรูปแบบสำคัญสำหรับการรับมือความขัดข้อง
ตรวจสอบอย่างรวดเร็ว
ขอบเขตข้อผิดพลาดตัดสินใจอย่างไรว่าจะแสดงอะไร
สรุป
คุณสร้างขอบเขตข้อผิดพลาดที่ประกอบด้วยรีฟ hasError, onErrorCaptured ที่กำหนดค่าให้รีฟและส่งคืน false, ช่องเริ่มต้นสำหรับองค์ประกอบลูก และช่องสำรองที่มีข้อผิดพลาดกับการรีเซ็ต ซึ่งจะแสดงเมื่อเกิดข้อผิดพลาด เพื่อแยกความล้มเหลวออกจากส่วนที่เหลือของ app
คำถามที่พบบ่อย
บทเรียน “คอมโพเนนต์ขอบเขตข้อผิดพลาด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คอมโพเนนต์ขอบเขตข้อผิดพลาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คอมโพเนนต์ขอบเขตข้อผิดพลาด”
การสร้างคอมโพเนนต์ wrapper ของ ErrorBoundary พร้อมสล็อตสำรองและการแสดงข้อผิดพลาด คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “คอมโพเนนต์ขอบเขตข้อผิดพลาด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฮุกวงจรชีวิต onErrorCaptured
- คอมโพเนนต์ขอบเขตข้อผิดพลาด
- app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป
- การจัดการข้อผิดพลาดแบบอะซิงโครนัสในคอมโพสิเบิล