การเฝ้าติดตามและติดตามข้อผิดพลาดในระบบจริง
ดูแลให้แอป Next.js ที่นำไปใช้งานแล้วทำงานได้ดีด้วยการบันทึกแบบมีโครงสร้าง การติดตามข้อผิดพลาดผ่าน Sentry การวิเคราะห์ประสิทธิภาพ และการเฝ้าติดตามเวลาพร้อมใช้งาน
การเฝ้าติดตามและติดตามข้อผิดพลาดในระบบจริง เป็นบทเรียน Next.js 15 Fullstack (App Router + Server Actions) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack (App Router + Server Actions) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
Why Monitor Production?
Once your app is live, you cannot reproduce every user's environment. Monitoring tells you when something breaks, how often, and for whom — so you fix issues before they spread.
The Three Pillars
Observability rests on:
- Logs: discrete events
- Metrics: numbers over time (latency, error rate)
- Traces: the path of a request across services
Structured Logging
Plain text logs are hard to search. Emit structured JSON logs with consistent fields so tools can filter and aggregate them.
console.log(JSON.stringify({
level: 'error',
route: '/api/checkout',
userId: 42,
msg: 'payment failed'
}));Installing Sentry
Sentry captures unhandled errors with stack traces and context. The wizard wires it into both server and client.
npx @sentry/wizard@latest -i nextjsCapturing Errors
Sentry catches uncaught exceptions automatically, but you can also report handled errors with extra context.
import * as Sentry from '@sentry/nextjs';
try {
await charge();
} catch (e) {
Sentry.captureException(e, { tags: { feature: 'billing' } });
}Error Boundaries with error.tsx
An error.tsx file catches render errors in a route segment and shows a fallback instead of a white screen. It is a Client Component.
'use client';
export default function Error({ error, reset }) {
return <button onClick={reset}>Try again</button>;
}Performance with Web Vitals
Track real user experience with Core Web Vitals — LCP, CLS, INP. Next.js exposes them through a reporting hook.
export function reportWebVitals(metric) {
if (metric.name === 'LCP') sendToAnalytics(metric);
}Vercel Analytics & Speed Insights
On Vercel, the Analytics and Speed Insights packages collect real-world metrics with one component each, no extra config.
import { SpeedInsights } from '@vercel/speed-insights/next';
// render <SpeedInsights /> in your root layoutUptime Monitoring
An uptime monitor pings a health endpoint at intervals and alerts you if it fails. Expose a lightweight route for this.
// app/api/health/route.ts
export function GET() {
return Response.json({ status: 'ok' });
}Setting Up Alerts
Data is useless if no one looks. Configure alerts: notify the team on Slack when error rate spikes or latency crosses a threshold. Alert on symptoms users feel, not noise.
Best Practices
Stay on top of production:
- Emit structured logs
- Track errors with Sentry and error.tsx
- Watch Core Web Vitals
- Add an uptime check and meaningful alerts
Quick Check
Test your monitoring knowledge.
Recap
You learned to monitor production:
- Logs, metrics, and traces form observability
- Use structured logging and Sentry for error tracking
- Catch render errors with
error.tsx - Track Web Vitals, add a health endpoint, and set alerts
Now you find and fix problems before users complain.
เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 22
- บทเรียน
- 88
คำถามที่พบบ่อย
บทเรียน “การเฝ้าติดตามและติดตามข้อผิดพลาดในระบบจริง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเฝ้าติดตามและติดตามข้อผิดพลาดในระบบจริง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack (App Router + Server Actions) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเฝ้าติดตามและติดตามข้อผิดพลาดในระบบจริง”
ดูแลให้แอป Next.js ที่นำไปใช้งานแล้วทำงานได้ดีด้วยการบันทึกแบบมีโครงสร้าง การติดตามข้อผิดพลาดผ่าน Sentry การวิเคราะห์ประสิทธิภาพ และการเฝ้าติดตามเวลาพร้อมใช้งาน คุณปฏิบัติ Next.js 15 Fullstack (App Router + Server Actions) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack (App Router + Server Actions) หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack (App Router + Server Actions) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การเฝ้าติดตามและติดตามข้อผิดพลาดในระบบจริง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack (App Router + Server Actions) นี้ได้ไหม
ได้ บทเรียน Next.js 15 Fullstack (App Router + Server Actions) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การนำไปใช้งานบน Vercel
- การสร้างแอปพลิเคชันฟูลสแตก
- การทบทวนโครงการและแนวทางปฏิบัติที่ดี
- การเฝ้าติดตามและติดตามข้อผิดพลาดในระบบจริง