Menangkap dan melaporkan ralat JavaScript dengan window.onerror

mata teras

• adalah acara penyemak imbas yang dicetuskan apabila ralat JavaScript yang tidak diketahui dibuang, menyediakan cara mudah untuk log ralat klien dan melaporkannya ke pelayan. Semua pelayar moden menyokong acara ini, tetapi butiran pelaksanaan berbeza -beza. window.onerror Objek ralat yang diluluskan kepada
sangat berharga untuk debugging kerana ia mengandungi jejak timbunan ralat yang menyediakan lokasi sumber untuk setiap bingkai apabila kesilapan program. Walau bagaimanapun, atribut stack tidak standard dan pelaksanaannya berbeza dalam pelayar yang berbeza.
• window.onerror Walaupun
disokong secara meluas, tidak semua penyemak imbas melewati objek ralat, yang bermaksud mereka tidak dapat mengambil sifat stack jejak. Batasan ini dapat diselesaikan dengan membungkus kod dalam blok cuba/menangkap untuk menangkap ralat dan sifat timbunannya.
• window.onerror Selepas menangkap ralat, langkah terakhir adalah untuk memindahkan mesej ralat ke pelayan. Ini memerlukan menyediakan perkhidmatan web laporan yang akan menerima data ralat melalui HTTP, log ke fail dan/atau menyimpannya dalam pangkalan data. Jika perkhidmatan itu terletak di domain yang berbeza, perkongsian sumber silang domain (CORS) perlu disokong.

Artikel ini dibuat dengan kerjasama Sentry. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

adalah acara penyemak imbas khas yang dicetuskan apabila ralat JavaScript yang tidak diketahui dilemparkan. Ia adalah salah satu cara paling mudah untuk log ralat klien dan melaporkannya ke pelayan. Ini juga merupakan salah satu mekanisme utama untuk integrasi JavaScript pelanggan Sentry (Raven-JS) untuk bekerja.

window.onerror Dengar

acara dengan memberikan fungsi kepada

window.onerror onerror Apabila ralat dilemparkan, parameter berikut diserahkan kepada fungsi:

<code class="language-javascript">window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}</code>

- Mesej yang dikaitkan dengan ralat, seperti "Uncaught ReferenceRor: Foo tidak ditakrifkan"

• msg - URL skrip atau dokumen yang berkaitan dengan ralat, seperti "/dist/app.js"
• url - Nombor baris (jika ada)
• lineNo - Nombor lajur (jika ada)
• columnNo - Objek ralat yang dikaitkan dengan ralat ini (jika ada)
• error Empat parameter pertama memberitahu anda skrip, baris, dan lajur yang berlaku. Parameter terakhir, objek ralat, mungkin yang paling berharga. Mari kita faham mengapa.

Objek ralat dan error.stack

Pada pandangan pertama, objek ralat tidak istimewa. Ia mengandungi 3 sifat normal: mesej, nama fail, dan linenumber. Nilai -nilai yang berlebihan ini telah diberikan kepada anda melalui .

Bahagian yang berharga adalah atribut

yang tidak standard : . Harta Stack ini memberitahu anda lokasi sumber setiap bingkai program apabila ralat berlaku. Jejak timbunan ralat boleh menjadi bahagian utama debugging. Walaupun tidak standard, harta ini boleh didapati di setiap pelayar moden. Error.prototype.stack

Berikut adalah contoh atribut stack untuk objek ralat dalam Chrome 46:

<code class="language-javascript">window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}</code>

Sukar untuk dibaca, bukan? Harta Stack benar -benar hanya rentetan yang tidak diformat.

Berikut adalah apa yang kelihatan seperti selepas pemformatan:

<code>"Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n    at <anonymous>:250:5\n    at <anonymous>:251:3\n    at <anonymous>:267:4\n    at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n    at <anonymous>:240:3\n    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)"
</anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></code>

Selepas pemformatan, mudah untuk melihat bagaimana harta stack penting dalam membantu kesilapan debug.

Hanya ada satu masalah: atribut stack tidak standard, dan pelaksanaannya dalam pelayar yang berbeza juga berbeza. Sebagai contoh, berikut adalah jejak timbunan yang sama di Internet Explorer 11:

<code>Error: foobar
    at new bar (<anonymous>:241:11)
    at foo (<anonymous>:245:5)
    at callFunction (<anonymous>:229:33)
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
</anonymous></anonymous></anonymous></anonymous></anonymous></code>

Format setiap bingkai bukan sahaja berbeza, tetapi juga mempunyai butiran yang lebih sedikit. Sebagai contoh, Chrome mengakui bahawa kata kunci baru telah digunakan dan mempunyai pemahaman yang lebih mendalam mengenai panggilan eval. Ini hanya perbandingan antara IE 11 dan Chrome - pelayar lain juga mempunyai format dan butiran yang berbeza sama.

bernasib baik, terdapat alat yang dapat menormalkan atribut timbunan supaya mereka konsisten merentasi pelayar. Sebagai contoh, Raven-JS menggunakan Tracekit untuk menormalkan rentetan ralat. Terdapat stacktrace.js dan beberapa projek lain.

Keserasian penyemak imbas

telah berada di penyemak imbas untuk seketika - anda boleh menemuinya di pelayar yang lebih tua seperti IE6 dan Firefox 2. window.onerror

Masalahnya adalah bahawa setiap pelayar melaksanakan

dengan cara yang berbeza, terutama dari segi bilangan parameter yang dihantar kepada pendengar OneRor dan struktur parameter ini. window.onerror

Berikut adalah jadual parameter yang diluluskan kepada OneRor dalam kebanyakan pelayar:

Sokongan terhad untuk onerror di Internet Explorer 8, 9 dan 10 mungkin tidak mengejutkan. Tetapi anda mungkin terkejut mendapati bahawa Safari tidak menambah sokongan untuk objek ralat sehingga Safari 10 (dikeluarkan pada tahun 2016). Di samping itu, peranti mudah alih warisan yang masih menggunakan pelayar Android stok (kini digantikan dengan mudah alih Chrome) masih wujud dan tiada objek ralat diluluskan.

Jika tiada objek ralat, tiada harta stack stack. Ini bermakna pelayar ini tidak dapat mengambil maklumat timbunan berharga daripada kesilapan yang ditangkap oleh onerror.

Gunakan cuba/menangkap untuk menyediakan polyfill untuk window.onerror

Tetapi ada penyelesaian - anda boleh membungkus kod dalam aplikasi dalam blok percubaan/menangkap dan menangkap kesilapan sendiri. Objek ralat ini akan mengandungi atribut timbunan yang kita impikan dalam setiap pelayar moden.

Pertimbangkan kaedah penolong berikut invoke, yang memanggil fungsi pada objek menggunakan satu siri parameter:

<code class="language-javascript">window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}</code>

Berikut ini dipanggil lagi invoke, kali ini dibungkus dalam percubaan/menangkap untuk menangkap sebarang kesilapan yang dilemparkan:

<code>"Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n    at <anonymous>:250:5\n    at <anonymous>:251:3\n    at <anonymous>:267:4\n    at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n    at <anonymous>:240:3\n    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)"
</anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></code>

Sudah tentu, sangat rumit untuk melakukan ini secara manual di mana -mana sahaja. Anda boleh memudahkannya dengan membuat fungsi utiliti pembalut biasa:

<code>Error: foobar
    at new bar (<anonymous>:241:11)
    at foo (<anonymous>:245:5)
    at callFunction (<anonymous>:229:33)
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
</anonymous></anonymous></anonymous></anonymous></anonymous></code>

Kerana JavaScript adalah satu -threaded, anda tidak perlu menggunakan pembalut di mana -mana - hanya bermula dengan setiap timbunan baru.

ini bermakna anda perlu membungkus pengisytiharan fungsi:

• pada permulaan permohonan (contohnya, jika anda menggunakan jQuery, dalam $(document).ready)
• dalam pengendali acara (mis., addEventListener atau $.fn.click)
• panggil balik berasaskan pemasa (mis. setTimeout atau ) requestAnimationFrame

Contoh:

<code>Error: foobar
   at bar (Unknown script code:2:5)
   at foo (Unknown script code:6:5)
   at Anonymous function (Unknown script code:11:5)
   at Anonymous function (Unknown script code:10:2)
   at Anonymous function (Unknown script code:1:73)</code>

Jika ini kelihatan seperti banyak kerja, jangan risau! Kebanyakan perpustakaan pelaporan pepijat mempunyai mekanisme yang meningkatkan fungsi terbina dalam seperti

dan addEventListener, jadi anda tidak perlu memanggil utiliti pembalut sendiri setiap kali. Ya, Raven-JS melakukan perkara yang sama. setTimeout

Ralat pemindahan ke pelayan

Ok, anda telah melakukan tugas anda - anda telah memasukkan

, dan anda juga membungkus fungsi dalam blok percubaan/menangkap untuk menangkap seberapa banyak maklumat ralat yang mungkin. window.onerror

Hanya satu langkah terakhir yang tersisa: Pindahkan mesej ralat ke pelayan. Untuk membuat kerja ini, anda perlu menyediakan beberapa jenis perkhidmatan web pelaporan yang akan menerima data ralat anda melalui HTTP, log masuk ke fail dan/atau menyimpannya dalam pangkalan data.

Jika perkhidmatan web ini berada di domain yang sama seperti aplikasi web anda, hanya gunakan XMLHTTPREQUEST. Dalam contoh berikut, kami menggunakan fungsi Ajax JQuery untuk memindahkan data ke pelayan kami:

<code class="language-javascript">function invoke(obj, method, args) {
    return obj[method].apply(this, args);
}

invoke(Math, 'max', [1, 2]); // 返回 2</code>

Perhatikan bahawa jika anda perlu menghantar ralat di seluruh sumber yang berbeza, titik akhir pelaporan anda perlu menyokong perkongsian sumber domain (CORS).

Ringkasan

Jika anda telah melakukan ini, anda kini mempunyai semua alat yang diperlukan untuk menatal melalui perpustakaan pelaporan ralat asas anda sendiri dan mengintegrasikannya dengan aplikasi anda:

Bagaimana
• window.onerror berfungsi dan penyemak imbasnya yang disokong
• Cara Menggunakan Try/Catch to Capture window.onerror Stack Stack Stack
• Pindahkan data yang salah ke pelayan

Sudah tentu, jika anda tidak mahu mengganggu dengan semua ini, terdapat banyak alat sumber komersial dan terbuka yang boleh melakukan semua pelaporan pelanggan yang berat untuk anda. (SHH: Anda mungkin mahu cuba menggunakan sentry untuk debug javascript.)

itu sahaja! Pemantauan ralat gembira.

FAQs (FAQ) menggunakan window.onerror untuk menangkap dan melaporkan ralat JavaScript

window.onerror Bagaimana fungsi berfungsi dalam JavaScript?

Acara window.onerror dalam JavaScript adalah pengendali acara global yang dicetuskan apabila ralat berlaku apabila melaksanakan kod JavaScript. Ia adalah alat pengendalian debugging dan ralat yang kuat kerana ia dapat menangkap dan melaporkan pengecualian yang tidak diketahui atau kesilapan runtime. Apabila ralat berlaku, fungsi window.onerror akan dipanggil dengan lima parameter: mesej ralat, URL di mana ralat berlaku, nombor baris, nombor lajur, dan objek ralat.

Apakah perbezaan antara window.onerror dan cuba menangkap JavaScript?

window.onerror dan cuba-menangkap kedua-duanya digunakan untuk pengendalian ralat dalam JavaScript, tetapi mereka bekerja dengan cara yang berbeza. Pernyataan Cuba-Catch membolehkan anda mengendalikan ralat secara langsung dengan membungkus kod yang boleh membuang ralat dalam blok cuba dan kemudian bertindak balas terhadap ralat di blok tangkapan. Sebaliknya, window.onerror adalah pengendali acara global yang dicetuskan apabila ralat runtime yang tidak diketahui berlaku. Ia adalah mekanisme pengendalian ralat yang lebih umum yang menangkap kesilapan yang tergelincir dari blok percubaan.

bagaimana menggunakan window.onerror untuk menangkap ralat JavaScript?

untuk menggunakan window.onerror, anda perlu menentukan fungsi yang akan dipanggil apabila ralat berlaku. Fungsi ini harus mengambil lima parameter: mesej ralat, URL di mana ralat berlaku, nombor baris, nombor lajur, dan objek ralat. Di dalam fungsi ini, anda boleh mengendalikan kesilapan seperti yang diperlukan. Sebagai contoh, anda boleh log ralat ke konsol, menghantar laporan ke pelayan, atau memaparkan mesej kepada pengguna.

window.onerror Bolehkah semua jenis kesilapan JavaScript ditangkap?

Walaupun window.onerror adalah alat pengendalian ralat yang kuat, ia mempunyai beberapa batasan. Ia boleh menangkap kesilapan runtime yang paling tidak diketahui, tetapi ia tidak dapat menangkap pengecualian yang dilemparkan dan ditangkap dalam blok percubaan. Di samping itu, beberapa jenis kesilapan, seperti kesilapan rangkaian atau kesilapan CORS, mungkin tidak mencetuskan peristiwa window.onerror.

bagaimana menggunakan objek ralat dalam window.onerror?

Objek ralat

adalah parameter kelima yang diluluskan ke fungsi window.onerror. Ia mengandungi maklumat mengenai ralat yang berlaku, termasuk mesej ralat, nama ralat, dan jejak timbunan. Anda boleh menggunakan objek ini untuk mendapatkan maklumat yang lebih terperinci mengenai ralat, yang sangat berguna untuk penyahpepijatan atau pelaporan ralat.

Apakah jejak timbunan di JavaScript?

Stack Trace adalah laporan yang memberikan maklumat mengenai laluan pelaksanaan program apabila ralat berlaku. Ia memaparkan urutan panggilan fungsi yang menyebabkan kesilapan, yang sangat berguna untuk debugging. Dalam JavaScript, anda boleh mendapatkan jejak timbunan dari objek ralat.

Bagaimana untuk mendapatkan jejak stack di JavaScript?

Dalam JavaScript, anda boleh mendapatkan jejak timbunan dari objek ralat. Apabila ralat berlaku, objek ralat dibuat dan diserahkan kepada fungsi window.onerror. Objek ini mempunyai harta yang dipanggil Stack yang mengandungi jejak timbunan. Anda boleh mengakses harta ini untuk mendapatkan jejak timbunan.

Bolehkah saya menggunakan window.onerror untuk melaporkan ralat ke pelayan?

Ya, anda boleh menggunakan window.onerror untuk melaporkan kesilapan ke pelayan. Di dalam fungsi window.onerror anda, anda boleh menghantar permintaan ke pelayan dengan mesej ralat. Ini sangat berguna untuk memantau dan menyahpepijat, kerana ia membolehkan anda mengumpul dan menganalisis data ralat dari pengguna dalam masa nyata.

bagaimana menggunakan window.onerror untuk mengendalikan kesilapan CORS?

ralat CORS atau ralat perkongsian sumber silang domain berlaku apabila aplikasi web cuba mengakses sumber dari domain yang berbeza. Kesalahan ini adalah berkaitan dengan keselamatan dan atas sebab-sebab keselamatan, tiada butiran diberikan kepada pengendali acara window.onerror. Walau bagaimanapun, anda boleh mengendalikan kesilapan ini dengan menambahkan pengendali ralat kepada permintaan rangkaian tertentu yang boleh menyebabkan kesilapan CORS.

Apakah beberapa amalan terbaik untuk menggunakan window.onerror?

Apabila menggunakan window.onerror, pastikan anda mengendalikan kesilapan dengan cara yang tidak mengganggu pengalaman pengguna. Anda harus mengelakkan memaparkan mesej ralat teknikal kepada pengguna. Sebaliknya, pertimbangkan untuk memaparkan mesej ralat yang mesra atau diam -diam melog masuk kesilapan. Juga, sedar tentang kesan prestasi kod pengendalian ralat. Sebagai contoh, jika anda menghantar laporan ralat ke pelayan, pastikan untuk melakukan ini secara asynchronously supaya ia tidak menghalang benang utama.

Atas ialah kandungan terperinci Menangkap dan melaporkan ralat JavaScript dengan window.onerror. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!