app.config.errorHandler untuk Error Global
Penangan error global, pencatatan ke Sentry/Datadog, serta tampilan error sesuai lingkungan.
app.config.errorHandler untuk Error Global adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Penangan Kesalahan Global
Vue menyediakan app.config.errorHandler, sebuah fungsi tunggal yang menangkap kesalahan dari mana pun dalam app yang tidak ditangani secara lokal. Ini adalah garis pertahanan terakhir Anda.
Tanda Tangan Penangan
Penangan ini menerima tiga argumen yang sama seperti onErrorCaptured: kesalahan, instans komponen, dan string informasi.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Menyiapkannya
Konfigurasikan penangan ini pada instans app di berkas titik masuk Anda, sebelum melakukan pemasangan.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Menangkap Kesalahan yang Tidak Tertangani
Penangan ini menangkap kesalahan dari perenderan komponen, kait siklus hidup, pengawas, dan penangan kejadian di seluruh app—termasuk kesalahan yang diteruskan melewati kait lokal onErrorCaptured.
Melaporkan ke Sentry dalam Produksi
Dalam produksi, teruskan kesalahan ke layanan pemantauan seperti Sentry agar Anda mengetahui kegagalan yang dialami pengguna.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Pencatatan Terperinci dalam Pengembangan
Selama pengembangan, catat detail yang lebih lengkap ke konsol agar kesalahan dapat ditelusuri dengan cepat.
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();
}
};Percabangan Berdasarkan Lingkungan
Penangan yang tangguh melakukan keduanya: melaporkan dalam produksi dan membuat log terperinci dalam pengembangan, semuanya dalam satu fungsi.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Kesalahan Asinkron
Penangan global juga menangkap kesalahan yang dilemparkan di dalam kait siklus hidup asinkron dan pengawas. Untuk penolakan janji mentah yang tidak tertangani di luar Vue, tambahkan juga pendengar window.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Hubungan dengan Batas
Batas lokal dan onErrorCaptured menangani serta menahan kesalahan di dekat tempat terjadinya; penangan global menjadi jaring pengaman untuk segala sesuatu yang lolos. Gunakan keduanya bersama-sama.
Jangan Menyembunyikan Secara Diam-diam
Hindari penangan kosong yang menyembunyikan kesalahan. Setidaknya selalu catat atau laporkan—kegagalan diam-diam membuat cacat tidak terlihat dan sangat sulit dilacak.
Menambahkan Konteks
Perkaya laporan dengan rute saat ini, ID pengguna, atau versi app agar triase kesalahan produksi dapat dilakukan lebih cepat.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Pemeriksaan Singkat
Apa yang ditangani oleh app.config.errorHandler?
Ringkasan
Anda telah mempelajari bahwa app.config.errorHandler = (err, instance, info) => {} adalah penangkap global untuk segala kesalahan: laporkan ke Sentry dalam produksi, catat secara terperinci selama pengembangan, dan pasangkan dengan batas lokal untuk penanganan kesalahan yang berlapis dan tangguh.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “app.config.errorHandler untuk Error Global” gratis?
Ya — teks lengkap “app.config.errorHandler untuk Error Global” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “app.config.errorHandler untuk Error Global”?
Penangan error global, pencatatan ke Sentry/Datadog, serta tampilan error sesuai lingkungan. Kamu berlatih Vue Academy 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 Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy 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 3 dari 4.
Berapa lama pelajaran “app.config.errorHandler untuk Error Global” 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 Vue Academy ini?
Ya. Setiap pelajaran Vue Academy 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
- Hook Siklus Hidup onErrorCaptured
- Komponen Error Boundary
- app.config.errorHandler untuk Error Global
- Penanganan Error Asinkron dalam Composable