Membangunkan alat pelaporan ralat javascript

Kata Pengantar

Dalam pembangunan bahagian hadapan, pelaporan ralat ialah isu yang biasa dan penting. Apabila pengguna menghadapi ralat, kami perlu mengumpul maklumat ralat dan melaporkannya kepada pelayan atau platform pihak ketiga. Jika tiada laporan ralat, kami tidak akan dapat mengesan masalah dan membuat pembaikan tepat pada masanya.

Artikel ini akan menerangkan cara membangunkan alat pelaporan ralat berasaskan JavaScript supaya kami dapat mencari dan menyelesaikan masalah dengan cepat semasa proses pembangunan.

Langkah Pertama: Mengumpul Maklumat Ralat

Ralat bahagian hadapan biasanya terdapat dalam dua jenis: ralat JavaScript dan ralat sumber. Ralat JavaScript biasanya merujuk kepada ralat sintaks atau ralat masa jalan. Ralat sumber termasuk kegagalan pemuatan, kegagalan permintaan rangkaian, dsb.

1. Pengumpulan ralat JavaScript

Untuk mengumpul ralat JavaScript, kami perlu mengikat peristiwa ralat pada objek tetingkap dan mengumpul maklumat ralat. Peristiwa ralat biasanya mempunyai tiga atribut: mesej, nama fail dan lineno:

window.onerror = function(message, source, lineno, colno, error) {
  console.log('Error:', message, source, lineno, colno, error);
  // 上报错误信息
}

Acara ini dicetuskan apabila JavaScript pada halaman melemparkan pengecualian yang tidak ditangkap. Dalam pengendali acara ini, kami boleh mencetak maklumat tentang mesej ralat kepada konsol dan melaporkannya kepada pelayan atau platform pihak ketiga.

2. Pengumpulan ralat sumber

Untuk mengumpul ralat sumber, kita perlu mengikat peristiwa ralat pada objek tetingkap dan mengumpul maklumat sumber. Biasanya, apabila ralat sumber berlaku, kami akan menerima acara gagal memuatkan. Peristiwa ini boleh ditangkap dengan mengikat peristiwa ralat pada objek tetingkap:

window.addEventListener('error', function(event) {
  var target = event.target || event.srcElement;
  console.log('Load error:', target.tagName, target.src, event.message);
  // 上报错误信息
}, true);

Pengendali acara ini akan dicetuskan apabila mana-mana sumber dalam halaman gagal dimuatkan. Dalam pengendali acara ini, kami boleh mencetak maklumat ralat ke konsol dan melaporkannya kepada pelayan atau platform pihak ketiga.

Langkah 2: Melaporkan maklumat ralat

Apabila kami mengumpul maklumat ralat, langkah seterusnya ialah melaporkannya kepada pelayan atau platform pihak ketiga. Kita boleh mencapai ini melalui permintaan Ajax, objek Imej atau menggunakan perpustakaan pihak ketiga. Dalam artikel ini, kami akan menggunakan kaedah menyerahkan permintaan Ajax untuk mencapai ini.

1. Pelaporan permintaan Ajax

Dengan mengandaikan kami menggunakan perpustakaan jQuery, kami boleh menggunakan kod berikut untuk menghantar permintaan pelaporan ke pelayan:

$.ajax({
  url: '/api/report-error',
  method: 'POST',
  data: {
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    error: error && error.stack
  }
});

Pas Dengan menghantar permintaan POST, kami boleh menghantar mesej ralat ke pelayan dalam bentuk data. Di latar belakang, kami boleh mendapatkan maklumat ini dengan menghuraikan badan permintaan untuk mencari dan membaiki ralat.

2. Pelaporan objek imej

Jika kami tidak mahu menggunakan permintaan Ajax atau perpustakaan jQuery, kami boleh menggunakan objek Imej untuk menghantar permintaan GET ke pelayan :

var img = new Image();
img.src = '/api/report-error?message=' + encodeURIComponent(message)
  + '&source=' + encodeURIComponent(source)
  + '&lineno=' + encodeURIComponent(lineno)
  + '&colno=' + encodeURIComponent(colno)
  + '&error=' + encodeURIComponent(error && error.stack);

Kelemahan kaedah ini ialah kita perlu menyambung maklumat ralat ke dalam rentetan pertanyaan, yang mungkin menyebabkan URL terlalu panjang.

3. Pelaporan perpustakaan pihak ketiga

Selain membangunkan alatan pelaporan ralat kami sendiri, kami juga boleh menggunakan beberapa perpustakaan pihak ketiga untuk menyelesaikan tugasan ini. Antaranya, beberapa pustaka pelaporan ralat yang lebih popular termasuk:

• Sentry: perkhidmatan pelaporan ralat sumber terbuka yang menyediakan fungsi pengumpulan ralat, antara muka Web, API dan SDK
• Bugsnag : Alat pemantauan dan pelaporan ralat masa nyata yang secara automatik mengesan ralat dan menyediakan pelbagai fungsi seperti penjejakan ralat, analisis ralat, dll.; dan ralat analisis dan kedudukan.
• Kaedah penggunaan perpustakaan ini adalah serupa, kami hanya perlu mengkonfigurasinya mengikut garis panduan dokumentasinya.

Langkah Tiga: Pengoptimuman Prestasi

Selepas kami melengkapkan pembangunan alat pelaporan ralat, kami perlu melakukan beberapa pengoptimuman prestasi untuk memastikan alat tersebut kurang memberi kesan kepada prestasi tapak web.

Gabungkan maklumat ralat

1. Jika terdapat berbilang skrip JavaScript pada halaman, apabila ralat berlaku dalam skrip, kami perlu melaporkan maklumat ralat kepada pelayan. Jika kami mengikat peristiwa ralat dalam setiap skrip, maka kami akan menghantar berbilang permintaan. Untuk mengurangkan bilangan permintaan, kami boleh menggabungkan berbilang mesej ralat ke dalam satu permintaan dan menggunakan Penimbal untuk caching.

Pelaporan pensampelan

2. Apabila trafik halaman besar, jumlah data yang tersilap dilaporkan mungkin besar. Untuk mengelak daripada meletakkan terlalu banyak beban pada pelayan, kami boleh memperkenalkan mekanisme pelaporan pensampelan dan hanya melaporkan sebahagian daripada maklumat ralat. Sebagai contoh, kami boleh menetapkan kadar pelaporan ralat dan hanya menghantar maklumat ralat kepada pelayan mengikut kadar kadar laporan ralat.

Pelaporan berdasarkan persekitaran rangkaian

3. Dalam persekitaran rangkaian berkelajuan rendah, pelaporan ralat akan memberi kesan yang lebih besar pada prestasi dan mungkin menyebabkan halaman ranap. Untuk mengelakkan situasi ini daripada berlaku, kami boleh melaraskan kadar pelaporan ralat secara automatik mengikut keadaan persekitaran rangkaian semasa. Sebagai contoh, kita boleh menetapkan kadar pelaporan ralat kepada 100% (iaitu, laporkan semua) di bawah 4G dan mengurangkan kadar kepada 20% di bawah 2G.

Kesimpulan

Membangunkan alatan pelaporan ralat JavaScript adalah sangat penting untuk pembangun bahagian hadapan. Ia boleh membantu kami mencari dan menyelesaikan masalah dengan cepat serta meningkatkan pengalaman pengguna. Dalam artikel ini, kami menerangkan aspek seperti mengumpul maklumat ralat, melaporkan maklumat ralat dan pengoptimuman prestasi. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Membangunkan alat pelaporan ralat javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!