Panduan untuk pengendalian ralat yang betul di JavaScript

mata utama

CLEVERLY Gunakan blok penyataan
• untuk menguruskan pengecualian dengan berkesan, meningkatkan proses penyahpepijatan dengan membenarkan kesilapan untuk gelembung ke timbunan panggilan, dengan itu memaparkan kesilapan dengan lebih jelas. try…catch
Melaksanakan pengendali ralat global (seperti
• peristiwa) untuk memusatkan dan memudahkan pengendalian ralat untuk pengurusan dan penyelenggaraan yang mudah di bahagian -bahagian yang berlainan aplikasi. window.onerror
Gunakan keupayaan penyemak imbas untuk merekodkan maklumat ralat terperinci (termasuk stack panggilan) untuk meningkatkan diagnosis kesilapan dan mempunyai pemahaman yang lebih jelas tentang sumber dan konteks kesilapan.
Betulkan teka -teki pengendalian ralat asynchronous dengan menggunakan
• di blok try…catch atau menggunakan pengendali ralat global yang sesuai untuk semua konteks pelaksanaan, memastikan kesilapan dalam kod tak segerak ditangkap dan diuruskan dengan berkesan. setTimeout
Meningkatkan mesej ralat dengan membuat jenis ralat tersuai atau memperkaya mesej ralat, menjadikannya lebih mudah untuk mengenal pasti dan menyelesaikan isu -isu tertentu dan meningkatkan kekukuhan keseluruhan kod JavaScript.

Pengendalian ralat di JavaScript penuh dengan cabaran. Ikuti undang -undang Murphy, apa -apa yang boleh salah akan salah. Artikel ini akan meneroka pengendalian ralat di JavaScript, perangkap penutup, amalan terbaik, dan menerangkan kod asynchronous dan Ajax sebagai contoh.

Artikel ini dikemas kini pada 8 Jun 2017 untuk menangani maklum balas pembaca. Khususnya, nama fail telah ditambah ke coretan kod, ujian unit telah dibersihkan, corak pembalut telah ditambah kepada

, dan bahagian-bahagian mengenai CORS dan pengendali ralat pihak ketiga telah ditambah. uglyHandler

Saya fikir paradigma yang didorong oleh peristiwa JavaScript menambah kekayaan kepada bahasa. Saya suka memikirkan penyemak imbas saya sebagai mesin yang didorong oleh acara ini, dan kesilapan tidak terkecuali. Apabila ralat berlaku, peristiwa akan dilemparkan pada masa tertentu. Secara teori, boleh dikatakan bahawa kesilapan hanya peristiwa mudah dalam JavaScript.

Jika anda mendapati ini pelik, sila pakai tali pinggang keledar anda kerana anda akan mempunyai perjalanan yang indah. Dalam artikel ini, saya hanya akan memberi tumpuan kepada JavaScript sisi pelanggan.

Topik ini berdasarkan konsep yang dijelaskan dalam "Pengendalian Pengecualian Cemerlang dalam JavaScript". Jika anda tidak biasa dengannya, saya cadangkan membaca asas -asas. Artikel ini juga mengandaikan bahawa anda mempunyai tahap pengetahuan JavaScript yang sederhana. Jika anda ingin meningkatkan tahap anda, mengapa tidak mendaftar untuk SitePoint Premium dan menonton kursus kami JavaScript: Seterusnya? Pelajaran pertama adalah percuma.

Dalam mana -mana kes, matlamat saya adalah untuk meneroka keadaan yang diperlukan di luar pengendalian pengecualian. Selepas membaca artikel ini, apabila anda melihat blok yang baik, anda akan berfikir dua kali sebelum anda bertindak.

try...catch

Demo

program demo yang akan digunakan dalam artikel ini boleh didapati di GitHub, yang dibentangkan seperti berikut:

Semua butang akan meletupkan "bom" apabila diklik. Bom ini mensimulasikan pengecualian yang dilemparkan sebagai TypeError. Berikut adalah definisi modul ini:

// scripts/error.js

function error() {
  var foo = {};
  return foo.bar();
}

Pertama, fungsi ini mengisytiharkan objek kosong bernama Foo. Sila ambil perhatian bahawa bar() tidak ditakrifkan di mana -mana sahaja. Mari kita gunakan ujian unit yang baik untuk mengesahkan bahawa ini akan meletupkan bom:

// tests/scripts/errorTest.js

it('throws a TypeError', function () {
  should.throws(error, TypeError);
});

Ujian unit ini menggunakan mocha untuk pernyataan ujian dan kegunaan harus.js untuk pernyataan. Mocha adalah pelari ujian, dan harus.js adalah perpustakaan penegasan. Jika anda tidak biasa dengannya, jangan ragu untuk meneroka API Ujian. Ujian bermula dengan it('description') dan berakhir dengan lulus/kegagalan dalam should. Ujian unit dijalankan pada nod dan tidak memerlukan penyemak imbas. Saya cadangkan anda memberi perhatian kepada ujian ini, kerana mereka membuktikan konsep utama dengan JavaScript tulen.

Selepas mengkloning repositori dan memasang kebergantungan, anda boleh menjalankan ujian menggunakan npm t. Sebagai alternatif, anda boleh menjalankan ujian tunggal ini seperti ini: ./node_modules/mocha/bin/mocha tests/scripts/errorTest.js.

seperti yang ditunjukkan, error() mentakrifkan objek kosong dan kemudian cuba mengakses kaedah. Oleh kerana bar() tidak wujud dalam objek, ia melemparkan pengecualian. Percayalah, untuk bahasa dinamik seperti JavaScript, ini berlaku kepada semua orang!

pengendalian miskin

Terdapat beberapa pengendalian ralat buruk seterusnya. Saya telah mengeksekusi pengendali pada butang dari pelaksanaan. Inilah yang kelihatan seperti pengendali:

// scripts/badHandler.js

function badHandler(fn) {
  try {
    return fn();
  } catch (e) { }
  return null;
}

Pengendali ini menerima panggilan balik fn sebagai parameter. Panggilan balik ini kemudian dipanggil dalam fungsi pengendali. Ujian unit menunjukkan apa itu:

// tests/scripts/badHandlerTest.js

it('returns a value without errors', function() {
  var fn = function() {
    return 1;
  };

  var result = badHandler(fn);

  result.should.equal(1);
});

it('returns a null with errors', function() {
  var fn = function() {
    throw new Error('random error');
  };

  var result = badHandler(fn);

  should(result).equal(null);
});

Seperti yang anda lihat, jika ada masalah, pengendali ralat buruk ini akan kembali null. Panggilan balik fn() boleh menunjuk kepada kaedah undang -undang atau bom.

pengendali acara klik berikut menerangkan seluruh cerita:

// scripts/badHandlerDom.js

(function (handler, bomb) {
  var badButton = document.getElementById('bad');

  if (badButton) {
    badButton.addEventListener('click', function () {
      handler(bomb);
      console.log('Imagine, getting promoted for hiding mistakes');
    });
  }
}(badHandler, error));

oops, saya hanya mendapat satu null. Ini membuatkan saya tidak mengabaikan apa -apa ketika saya cuba mencari tahu apa yang salah. Strategi kegagalan senyap ini terdiri daripada pengalaman pengguna yang buruk kepada rasuah data. Ia mengecewakan bahawa saya mungkin menghabiskan berjam -jam menyahpepijat gejala dan mengabaikan blok try-catch. Pengendali jahat ini akan menelan kesilapan dalam kod dan berpura -pura semuanya baik -baik saja. Ini boleh diterima untuk organisasi yang tidak menghargai kualiti kod. Walau bagaimanapun, kesilapan menyembunyikan boleh menyebabkan anda menghabiskan berjam -jam di masa depan untuk debug. Dalam penyelesaian pelbagai lapisan dengan timbunan panggilan yang mendalam, adalah mustahil untuk mengetahui di mana ralat akan berlaku. Setakat pengendalian kesilapan, ini sangat buruk.

Strategi kegagalan senyap akan membuat anda menginginkan pengendalian kesilapan yang lebih baik. JavaScript menyediakan cara yang lebih elegan untuk mengendalikan pengecualian.

(Kandungan berikut adalah serupa dengan output sebelumnya, kecuali bahasa dan ekspresi telah diselaraskan dengan halus untuk memastikan artikel ringkas dan mengelakkan pertindihan.)

... (selebihnya adalah serupa dengan output sebelumnya, kecuali bahasa dan ekspresi diselaraskan dengan halus untuk memastikan artikel ringkas dan mengelakkan pertindihan.) ...

Atas ialah kandungan terperinci Panduan untuk pengendalian ralat yang betul di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!