Cara menangkap dan melaporkan ralat JS menggunakan kemahiran window.onerror

Cara menangkap dan melaporkan ralat JS menggunakan kemahiran window.onerror_javascript

WBOY

Lepaskan： 2016-05-16 15:17:30

asal

2276 orang telah melayarinya

Dua hari yang lalu, seorang pengguna 2048 Game melaporkan bahawa dia tidak boleh bermain permainan itu selepas membukanya. Hanya ada satu panel permainan, nombor tidak dapat dimulakan dan ia tidak boleh dialihkan dan iOS 5.1. Saya cuba membuka Safari daripada WeChat, tetapi ia masih tidak berjaya. Memandangkan permainan ini menggunakan banyak ciri HTML5, dianggarkan secara kasarnya ia disebabkan oleh ralat JS. Tetapi bagaimana untuk menangkap maklumat sedemikian? Sudah tentu ia adalah tetingkap legenda.onerror.

Cari pengenalan badan kaedah tentang window.onerror daripada W3C:

Ini pada asasnya bermakna bahawa untuk kaedah window.onerror, kita boleh menulisnya sebagai:

/** 
 * @param {String} errorMessage  错误信息 
 * @param {String} scriptURI   出错的文件 
 * @param {Long}  lineNumber   出错代码的行号 
 * @param {Long}  columnNumber  出错代码的列号 
 * @param {Object} errorObj    错误的详细信息，Anything 
 */
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
  // TODO 
}

Salin selepas log masuk

Walau bagaimanapun, anda mesti memberi perhatian kepada isu keserasian semasa penggunaan tidak semua pelayar mempunyai semua parameter dalam senarai parameter Chrome dan seumpamanya adalah peneraju dalam draf piawaian penyemak imbas, jadi gunakan parameter ini.

Jadi, anda boleh menulis Demo kecil untuk mencubanya:

<!DOCTYPE html> 
<html> 
<head> 
  <title>Js错误捕获</title> 
  <script type="text/javascript"> 
  /** 
   * @param {String} errorMessage  错误信息 
   * @param {String} scriptURI   出错的文件 
   * @param {Long}  lineNumber   出错代码的行号 
   * @param {Long}  columnNumber  出错代码的列号 
   * @param {Object} errorObj    错误的详细信息，Anything 
   */ 
  window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    console.log("错误信息：" , errorMessage); 
    console.log("出错文件：" , scriptURI); 
    console.log("出错行号：" , lineNumber); 
    console.log("出错列号：" , columnNumber); 
    console.log("错误详情：" , errorObj); 
  } 
  </script> 
</head> 
<body> 
  <script type="text/javascript" src="error.js"></script> 
</body> 
</html>

Salin selepas log masuk

Untuk kandungan dalam fail error.js, hanya tulis ini:

buang Ralat baharu("Ralat berlaku!");
Selepas menjalankan penyemak imbas, buka konsol dan pada dasarnya ia akan kelihatan seperti ini:

Jadi, data ini boleh dilaporkan.
Sudah tentu, error.js di atas adalah di bawah nama domain yang sama dengan halaman html Apakah yang akan berlaku jika error.js tidak berada di bawah domain yang sama? Mari tukar rujukan kepada error.js:

Buka konsol sekali lagi, dan apa yang kita lihat ialah ini:

Ia bersamaan dengan kaedah window.onerror hanya menangkap satu mesej ralat, dan ia adalah rentetan tetap, yang tidak mempunyai nilai rujukan. Selepas menyemak beberapa maklumat (Kod sumber Webkit), saya mendapati bahawa apabila penyemak imbas melaksanakan pemuatan sumber skrip, dasar asal yang sama dinilai Jika ia sumber bukan asal, mesej ralat ditulis sebagai ". Ralat skrip ”:

Nasib baik, teg skrip mempunyai atribut asal silang ia boleh memaparkan maklumat ralat yang lebih terperinci. Mari cuba menukar teg skrip:

Muat semula halaman Pada masa ini, anda boleh melihat output dalam konsol adalah seperti ini:

Tidak menghairankan bahawa ralat ini berlaku Memandangkan error.js ditetapkan kepada asal silang, Tajuk Respons HTTP error.js juga mesti ditetapkan supaya boleh diakses daripada sumber bukan asal. Untuk memudahkan penetapan Header, buat sedikit perubahan kepada error.js dan namakan semula: error-js.php.

<&#63;php 
  header('Access-Control-Allow-Origin:*'); 
  header('Content-type:text/javascript'); 
&#63;> 
throw new Error('出错了');

Salin selepas log masuk

Muat semula halaman pada masa ini dan lihat bahawa output dalam konsol adalah normal dan semua maklumat boleh ditangkap seperti biasa:

OK, analisis butiran teknikal sudah tamat! Sumber statik permainan 2048 saya diletakkan dalam domain statik (bukan sumber yang sama), jadi jika saya ingin menangkap maklumat ralat melalui window.onerror, saya perlu beroperasi mengikut situasi terakhir di atas:

1. Tambahkan atribut silang asal skrip

2. Konfigurasikan pelayan dan tetapkan Respons Javascript sumber statik kepada Access-Control-Allow-Origin