PricingLoginStart free
Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Pemantauan dan Pelacakan Kesalahan di Produksi

Jaga kesehatan aplikasi Next.js yang telah di-deploy dengan pencatatan terstruktur, pelacakan kesalahan melalui Sentry, analitik kinerja, dan pemantauan waktu aktif.

Pelajaran 4 dari 413 langkah

Pemantauan dan Pelacakan Kesalahan di Produksi adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Mengapa Memantau Produksi?

Setelah aplikasi Anda aktif, Anda tidak dapat mereproduksi lingkungan setiap pengguna. Pemantauan memberi tahu Anda kapan sesuatu rusak, seberapa sering hal itu terjadi, dan kepada siapa — sehingga Anda dapat memperbaiki masalah sebelum menyebar.

Tiga Pilar

Observabilitas bertumpu pada:

  • Log: peristiwa terpisah
  • Metrik: angka dari waktu ke waktu (latensi, tingkat kesalahan)
  • Jejak: jalur suatu permintaan melintasi berbagai layanan

Logging Terstruktur

Log teks biasa sulit dicari. Hasilkan log JSON terstruktur dengan bidang yang konsisten agar alat dapat memfilter dan menggabungkannya.

console.log(JSON.stringify({
  level: 'error',
  route: '/api/checkout',
  userId: 42,
  msg: 'payment failed'
}));

Memasang Sentry

Sentry menangkap kesalahan yang tidak ditangani beserta jejak tumpukan dan konteksnya. Panduan penyiapan menghubungkannya ke sisi server dan klien.

npx @sentry/wizard@latest -i nextjs

Menangkap Kesalahan

Sentry secara otomatis menangkap pengecualian yang tidak tertangkap, tetapi Anda juga dapat melaporkan kesalahan yang ditangani beserta konteks tambahan.

import * as Sentry from '@sentry/nextjs';
try {
  await charge();
} catch (e) {
  Sentry.captureException(e, { tags: { feature: 'billing' } });
}

Batas Kesalahan dengan error.tsx

File error.tsx menangkap kesalahan saat perenderan dalam segmen rute dan menampilkan cadangan, bukan layar putih. File ini merupakan Komponen Klien.

'use client';
export default function Error({ error, reset }) {
  return <button onClick={reset}>Try again</button>;
}

Performa dengan Web Vitals

Lacak pengalaman pengguna nyata dengan Core Web Vitals — LCP, CLS, INP. Next.js menyediakan metrik tersebut melalui kait pelaporan.

export function reportWebVitals(metric) {
  if (metric.name === 'LCP') sendToAnalytics(metric);
}

Analitik Vercel & Speed Insights

Di Vercel, paket Analytics dan Speed Insights mengumpulkan metrik dunia nyata, masing-masing dengan satu komponen dan tanpa konfigurasi tambahan.

import { SpeedInsights } from '@vercel/speed-insights/next';
// render <SpeedInsights /> in your root layout

Pemantauan Waktu Aktif

Pemantau waktu aktif melakukan ping ke titik akhir kesehatan secara berkala dan memberi tahu Anda jika gagal. Sediakan rute ringan untuk keperluan ini.

// app/api/health/route.ts
export function GET() {
  return Response.json({ status: 'ok' });
}

Menyiapkan Peringatan

Data tidak berguna jika tidak ada yang melihatnya. Konfigurasikan peringatan: beri tahu tim melalui Slack saat tingkat kesalahan melonjak atau latensi melewati ambang batas. Beri peringatan berdasarkan gejala yang dirasakan pengguna, bukan gangguan yang tidak bermakna.

Praktik Terbaik

Terus pantau produksi:

  • Hasilkan log terstruktur
  • Lacak kesalahan dengan Sentry dan error.tsx
  • Pantau Core Web Vitals
  • Tambahkan pemeriksaan waktu aktif dan peringatan yang bermakna

Pemeriksaan Singkat

Uji pemahaman Anda tentang pemantauan.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mempelajari cara memantau produksi:

  • Log, metrik, dan jejak membentuk observabilitas
  • Gunakan logging terstruktur dan Sentry untuk melacak kesalahan
  • Tangkap kesalahan perenderan dengan error.tsx
  • Lacak Web Vitals, tambahkan titik akhir kesehatan, dan atur peringatan

Sekarang Anda dapat menemukan dan memperbaiki masalah sebelum pengguna mengeluh.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
22
Pelajaran
88
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemantauan dan Pelacakan Kesalahan di Produksi” gratis?

Ya — teks lengkap “Pemantauan dan Pelacakan Kesalahan di Produksi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemantauan dan Pelacakan Kesalahan di Produksi”?

Jaga kesehatan aplikasi Next.js yang telah di-deploy dengan pencatatan terstruktur, pelacakan kesalahan melalui Sentry, analitik kinerja, dan pemantauan waktu aktif. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pemantauan dan Pelacakan Kesalahan di Produksi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Deployment ke Vercel
  2. Membangun Aplikasi Fullstack
  3. Tinjauan Proyek & Praktik Terbaik
  4. Pemantauan dan Pelacakan Kesalahan di Produksi
← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)