Vue Academy · บทเรียน

การเฝ้าติดตามและบำรุงรักษา

เฝ้าติดตามแอปที่ใช้งานจริงและดูแลให้ทำงานได้อย่างมีประสิทธิภาพ

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

การดูแลหลังเปิดตัว

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

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

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

Sentry สำหรับติดตามข้อผิดพลาด

Sentry เป็นบริการติดตามข้อผิดพลาดที่มีผู้ใช้งานอย่างแพร่หลาย ให้ติดตั้ง SDK และเริ่มต้นการทำงานเมื่อแอปเริ่มทำงาน เพื่อบันทึกข้อผิดพลาดที่ไม่ได้จัดการโดยอัตโนมัติ

npm install @sentry/vue

การเริ่มต้น Sentry

เริ่มต้น Sentry ด้วย DSN ของโครงการและอินสแตนซ์แอป Vue เพื่อให้ Sentry เชื่อมเข้ากับการจัดการข้อผิดพลาดของ Vue ได้

import * as Sentry from "@sentry/vue"
import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
Sentry.init({
  app,
  dsn: "https://example@sentry.io/123"
})
app.mount("#app")

การบันทึกข้อผิดพลาดที่กำหนดเอง

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

try {
  riskyOperation()
} catch (err) {
  Sentry.captureException(err)
}

การเพิ่มการวิเคราะห์การใช้งาน

การวิเคราะห์การใช้งาน ช่วยบอกว่าผู้ใช้ใช้แอปของคุณจริงอย่างไร เช่น เข้าชมหน้าใด คลิกอะไร และออกจากการใช้งานตรงไหน ข้อมูลนี้ช่วยชี้แนวทางการตัดสินใจด้านผลิตภัณฑ์

การติดตามการเข้าชมหน้า

เมื่อใช้ Vue Router คุณสามารถส่งเหตุการณ์การเข้าชมหน้าในทุกการนำทางได้โดยใช้จุดเชื่อมต่อของเราเตอร์

router.afterEach((to) => {
  trackPageView(to.fullPath)
})

การอัปเดตแพ็กเกจที่ต้องพึ่งพา

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

npm outdated
npm update

การตรวจสอบหาช่องโหว่

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

npm audit
npm audit fix

การเฝ้าติดตามประสิทธิภาพในสภาพแวดล้อมจริง

ผู้ใช้จริงมีอุปกรณ์และเครือข่ายที่หลากหลาย ให้ใช้การเฝ้าติดตามผู้ใช้จริง (ซึ่งมักมีอยู่ในเครื่องมือติดตามข้อผิดพลาด) และตัวชี้วัดอย่างเวลาโหลด เพื่อให้แน่ใจว่าประสิทธิภาพยังดีหลังเปิดตัว

การจัดการการเปลี่ยนแปลงที่ทำให้เข้ากันไม่ได้

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

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการเฝ้าติดตามและการบำรุงรักษาของคุณ

สรุปทบทวน

หลังเปิดตัว ให้เฝ้าติดตามด้วยการติดตามข้อผิดพลาด (Sentry) ทำความเข้าใจการใช้งานด้วยการวิเคราะห์การใช้งาน รักษาแพ็กเกจให้เป็นปัจจุบันด้วย npm outdated และ npm audit และเฝ้าดูประสิทธิภาพในสภาพแวดล้อมจริง จัดการการเปลี่ยนแปลงที่ทำให้เข้ากันไม่ได้อย่างรอบคอบโดยใช้ชุดทดสอบของคุณ บทถัดไป คุณจะสำรวจรูปแบบขั้นสูงและแนวทางปฏิบัติที่ดี

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

บทเรียน “การเฝ้าติดตามและบำรุงรักษา” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเฝ้าติดตามและบำรุงรักษา”

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

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

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

บทเรียน “การเฝ้าติดตามและบำรุงรักษา” ใช้เวลานานแค่ไหน

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

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

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

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

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