Vue Academy · Pelajaran

app.config.errorHandler untuk Ralat Global

Pengendali ralat global, mencatat log ke Sentry/Datadog, serta paparan ralat mengikut persekitaran.

Pelajaran 3 daripada 413 langkah

app.config.errorHandler untuk Ralat Global ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Pengendali Ralat Global

Vue menyediakan app.config.errorHandler, iaitu satu fungsi yang menangkap ralat dari mana-mana bahagian dalam app yang tidak dikendalikan secara setempat. Inilah barisan pertahanan terakhir anda.

Tandatangan Pengendali

Ia menerima tiga argumen yang sama seperti onErrorCaptured: ralat, tika komponen dan rentetan maklumat.

app.config.errorHandler = (err, instance, info) => {
  // global handling
};

Menyediakannya

Konfigurasikannya pada tika app dalam fail masukan anda, sebelum pemasangan.

const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
  console.error(err, info);
};
app.mount("#app");

Menangkap Ralat Tidak Dikendalikan

Ia menangkap ralat daripada paparan komponen, cangkuk kitar hayat, pemerhati dan pengendali peristiwa di seluruh app — termasuk ralat yang merambat melepasi cangkuk setempat onErrorCaptured.

Melaporkan kepada Sentry dalam Pengeluaran

Dalam pengeluaran, majukan ralat kepada perkhidmatan pemantauan seperti Sentry supaya anda mengetahui kegagalan yang dialami oleh pengguna.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) {
    Sentry.captureException(err, { extra: { info } });
  }
};

Pengelogan Terperinci dalam Pembangunan

Semasa pembangunan, logkan butiran yang lebih lengkap ke konsol untuk menyahpepijat dengan pantas.

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();
  }
};

Membuat Percabangan Berdasarkan Persekitaran

Pengendali yang kukuh melakukan kedua-duanya: melaporkan dalam pengeluaran dan mengelog secara terperinci dalam pembangunan, semuanya dalam satu fungsi.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) Sentry.captureException(err);
  else console.error("[Vue]", err, info);
};

Ralat Tak Segerak

Pengendali global turut menangkap ralat yang dilemparkan dalam cangkuk kitar hayat tak segerak dan pemerhati. Untuk penolakan janji mentah yang tidak dikendalikan di luar Vue, tambahkan pendengar window juga.

window.addEventListener("unhandledrejection", (e) => {
  Sentry.captureException(e.reason);
});

Hubungan dengan Sempadan

Sempadan setempat dan onErrorCaptured mengendalikan serta mengekang ralat berhampiran tempat ralat itu berlaku; pengendali global ialah jaringan keselamatan untuk segala-galanya yang terlepas. Gunakan kedua-duanya bersama.

Jangan Sembunyikan Ralat Secara Senyap

Elakkan pengendali kosong yang menyembunyikan ralat. Sekurang-kurangnya, sentiasa log atau laporkan ralat — kegagalan senyap menjadikan pepijat tidak kelihatan dan sangat sukar dikesan.

Menambahkan Konteks

Perkayakan laporan dengan laluan semasa, id pengguna atau versi app supaya pengasingan punca ralat pengeluaran dapat dilakukan dengan lebih pantas.

Sentry.captureException(err, {
  tags: { info },
  user: { id: currentUserId }
});

Semakan Ringkas

Apakah yang dikendalikan oleh app.config.errorHandler?

Imbas Kembali

Anda telah mempelajari bahawa app.config.errorHandler = (err, instance, info) => {} ialah penangkap semua global: laporkan kepada Sentry dalam pengeluaran, logkan butiran semasa pembangunan dan gabungkannya dengan sempadan setempat untuk pengendalian ralat berlapis yang tahan lasak.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
42
Pelajaran
156

Soalan Lazim

Adakah pelajaran “app.config.errorHandler untuk Ralat Global” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “app.config.errorHandler untuk Ralat Global”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “app.config.errorHandler untuk Ralat Global”?

Pengendali ralat global, mencatat log ke Sentry/Datadog, serta paparan ralat mengikut persekitaran. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “app.config.errorHandler untuk Ralat Global” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Cangkuk Kitar Hayat onErrorCaptured
  2. Komponen Sempadan Ralat
  3. app.config.errorHandler untuk Ralat Global
  4. Pengendalian Ralat Tak Segerak dalam Komposabel
← Kembali ke Vue Academy