app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป
ตัวจัดการข้อผิดพลาดทั่วทั้งแอป การบันทึกลง Sentry/Datadog และการแสดงข้อผิดพลาดตามสภาพแวดล้อม
app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ตัวจัดการข้อผิดพลาดส่วนกลาง
Vue มี app.config.errorHandler ซึ่งเป็นฟังก์ชันเดียวที่ดักจับข้อผิดพลาดจากทุกที่ใน app ที่ไม่ได้รับการจัดการภายในที่นั้น โดยเป็นแนวป้องกันด่านสุดท้ายของคุณ
รูปแบบพารามิเตอร์ของตัวจัดการ
ตัวจัดการนี้รับอาร์กิวเมนต์สามรายการเดียวกับ onErrorCaptured ได้แก่ ข้อผิดพลาด อินสแตนซ์ของคอมโพเนนต์ และสตริงข้อมูล
app.config.errorHandler = (err, instance, info) => {
// global handling
};การตั้งค่า
กำหนดค่าบนอินสแตนซ์ของ app ในไฟล์เริ่มต้น ก่อนการเมานต์
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");การดักจับข้อผิดพลาดที่ไม่ได้จัดการ
ตัวจัดการนี้ดักจับข้อผิดพลาดจากการเรนเดอร์คอมโพเนนต์ ฮุกวงจรชีวิต ตัวเฝ้าดู และตัวจัดการเหตุการณ์ทั่วทั้ง app รวมถึงข้อผิดพลาดที่ส่งต่อเลยฮุก onErrorCaptured ภายในไปแล้ว
การรายงานไปยัง Sentry ในสภาพแวดล้อมจริง
ในสภาพแวดล้อมจริง ให้ส่งต่อข้อผิดพลาดไปยังบริการตรวจสอบอย่าง Sentry เพื่อให้คุณทราบถึงความขัดข้องที่ผู้ใช้พบ
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};การบันทึกรายละเอียดระหว่างพัฒนา
ระหว่างการพัฒนา ให้บันทึกรายละเอียดที่มากขึ้นลงในคอนโซลเพื่อแก้ไขข้อผิดพลาดได้อย่างรวดเร็ว
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};การแยกตามสภาพแวดล้อม
ตัวจัดการที่รัดกุมควรทำทั้งสองอย่างในฟังก์ชันเดียว คือรายงานเมื่ออยู่ในสภาพแวดล้อมจริง และบันทึกรายละเอียดแบบเต็มระหว่างการพัฒนา
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};ข้อผิดพลาดแบบอะซิงโครนัส
ตัวจัดการส่วนกลางยังดักจับข้อผิดพลาดที่เกิดขึ้นภายในฮุกวงจรชีวิตและตัวเฝ้าดูแบบอะซิงโครนัสด้วย สำหรับการปฏิเสธพรอมิสที่ไม่ได้จัดการโดยตรงนอก Vue ให้เพิ่มตัวรับฟังเหตุการณ์ของ window ด้วย
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});ความสัมพันธ์กับขอบเขตข้อผิดพลาด
ขอบเขตข้อผิดพลาดภายในและ onErrorCaptured จะจัดการและควบคุมข้อผิดพลาดใกล้จุดที่เกิดขึ้น ส่วนตัวจัดการส่วนกลางคือเครือข่ายนิรภัยสำหรับทุกอย่างที่หลุดรอดออกมา ควรใช้ทั้งสองอย่างร่วมกัน
อย่ากลืนข้อผิดพลาดอย่างเงียบ ๆ
หลีกเลี่ยงตัวจัดการว่างที่ซ่อนข้อผิดพลาด อย่างน้อยควรบันทึกหรือรายงานเสมอ เพราะความล้มเหลวที่เงียบงันจะทำให้มองไม่เห็นจุดบกพร่องและติดตามหาสาเหตุได้ยากมาก
การเพิ่มบริบท
เพิ่มเส้นทางปัจจุบัน รหัสผู้ใช้ หรือเวอร์ชันของ app ลงในรายงาน เพื่อให้คัดแยกและวิเคราะห์ข้อผิดพลาดในสภาพแวดล้อมจริงได้รวดเร็วยิ่งขึ้น
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});ตรวจสอบอย่างรวดเร็ว
app.config.errorHandler จัดการอะไร
สรุป
คุณได้เรียนรู้ว่า app.config.errorHandler = (err, instance, info) => {} คือตัวดักจับทั้งหมดส่วนกลาง โดยให้รายงานไปยัง Sentry ในสภาพแวดล้อมจริง บันทึกรายละเอียดระหว่างการพัฒนา และใช้คู่กับขอบเขตข้อผิดพลาดภายในเพื่อจัดการข้อผิดพลาดเป็นชั้น ๆ อย่างยืดหยุ่นและทนทาน
คำถามที่พบบ่อย
บทเรียน “app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป”
ตัวจัดการข้อผิดพลาดทั่วทั้งแอป การบันทึกลง Sentry/Datadog และการแสดงข้อผิดพลาดตามสภาพแวดล้อม คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฮุกวงจรชีวิต onErrorCaptured
- คอมโพเนนต์ขอบเขตข้อผิดพลาด
- app.config.errorHandler สำหรับข้อผิดพลาดทั่วทั้งแอป
- การจัดการข้อผิดพลาดแบบอะซิงโครนัสในคอมโพสิเบิล