Apa maksud 'ralat skrip'?-tutorial js-php.cn

What the Heck Does

mata teras

apabila fail JavaScript berasal dari sumber yang berbeza. Ini adalah untuk alasan keselamatan untuk mengelakkan kebocoran maklumat yang berpotensi sensitif. onerror
sifat skrip dan menambah tajuk HTTP domain silang. Ini membolehkan mana -mana sumber untuk mendapatkan fail dan sebarang kesilapan yang dicetuskan oleh skrip akan dilaporkan kepada crossorigin="anonymous". window.onerror
sebagai alternatif. Dengan membungkus kod pihak ketiga dalam blok try/catch, anda boleh mendapatkan wawasan tentang kesilapan yang dibuang oleh skrip silang domain. Walau bagaimanapun, jika boleh, masih disyorkan untuk menetapkan sifat dan tajuk CORS. try/catch

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

Jika anda telah menggunakan acara JavaScript sebelum ini, anda mungkin menghadapi situasi berikut:

onerror

ralat skrip.

Apabila ralat berasal dari fail JavaScript dari sumber yang berbeza (nama domain, port, atau protokol yang berbeza), penyemak imbas menghantar "ralat skrip" ke fungsi panggilan balik

. Ini menyakitkan kerana walaupun ralat berlaku, anda tidak tahu apa kesilapannya, atau kod mana yang ralat berasal. Dan keseluruhan tujuan

adalah untuk mendapatkan wawasan tentang kesilapan yang tidak diketahui dalam permohonan itu. onerror window.onerror

Alasan: Skrip silang domain

untuk lebih memahami apa yang sedang berlaku, pertimbangkan contoh dokumen html contoh berikut, dengan asumsi ia berasal dari

http://example.com/test

Ini adalah kandungan

<!DOCTYPE html>
<html>
<head>
  <title>example.com/test</title>
</head>
<body>
  <🎜>
  <🎜>
</body>
</html>

Salin selepas log masuk

. Ia mengisytiharkan satu fungsi yang dipanggil

panggilan yang akan sentiasa membuang http://another-domain.com/app.js. foo ReferenceError

Apabila dokumen ini dimuatkan dan JavaScript dilaksanakan dalam penyemak imbas, berikut adalah output ke konsol (direkodkan melalui fungsi panggilan balik

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}

Salin selepas log masuk

window.onerror

"Kesalahan skrip.", "", ", 0, 0, undefined

Ini bukan ralat JavaScript - penyemak imbas sengaja menyembunyikan fail skrip dari sumber yang berbeza untuk alasan keselamatan. Ini adalah untuk mengelakkan skrip daripada tidak sengaja membocorkan maklumat yang berpotensi sensitif ke dalam fungsi panggilan balik

yang tidak dapat dikawal. Oleh itu, penyemak imbas hanya membenarkan

untuk mendapatkan wawasan tentang kesilapan yang berasal dari domain yang sama. Apa yang kita tahu ialah ralat berlaku -tidak mengetahui apa -apa lagi! onerror window.onerror

Saya bukan orang jahat, betul -betul!

Walaupun penyemak imbas dalam niat baik, anda ingin menggali jauh ke dalam kesilapan yang dibuang oleh skrip dari sumber yang berbeza, dan ada beberapa alasan yang sangat baik:

fail JavaScript aplikasi anda datang dari nama hos yang berbeza (contohnya, static.sentry.io/app.js).
Anda menggunakan perpustakaan yang disediakan dari CDN komuniti seperti CDNJS atau Google Hosting Library.
Anda menggunakan perpustakaan JavaScript pihak ketiga komersial yang hanya tersedia dari pelayan luaran.

Tetapi jangan risau! Pemahaman yang lebih mendalam tentang kesilapan JavaScript yang disediakan oleh fail -fail ini hanya memerlukan beberapa tweak mudah.

Penyelesaian: CORS Properties and Headers

Untuk memahami pengecualian JavaScript yang dibuang oleh skrip dari sumber yang berbeza, anda perlu melakukan dua perkara.

1. `crossorigin="anonymous"`

Ini memberitahu penyemak imbas bahawa fail sasaran harus diambil "tanpa nama". Ini bermakna apabila meminta fail ini, penyemak imbas tidak menghantar sebarang maklumat yang mengenal pasti pengguna yang berpotensi kepada pelayan, seperti kuki atau kelayakan HTTP.

<!DOCTYPE html>
<html>
<head>
  <title>example.com/test</title>
</head>
<body>
  <🎜>
  <🎜>
</body>
</html>

Salin selepas log masuk

CORS adalah singkatan untuk perkongsian sumber silang domain, dan ia adalah satu set API (terutamanya tajuk HTTP) yang menentukan bagaimana fail dimuat turun dan disajikan di seluruh domain.

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}

Salin selepas log masuk

Dengan menetapkan

, pelayan menunjukkan kepada penyemak imbas bahawa mana -mana sumber boleh mendapatkan fail ini. Sebagai alternatif, anda boleh mengehadkannya kepada sumber yang diketahui yang anda kendalikan:

<code>Access-Control-Allow-Origin: *</code> Apabila kedua-dua langkah ini selesai, sebarang kesilapan yang dicetuskan oleh skrip ini akan dilaporkan kepada

, sama seperti skrip domain yang sama. Oleh itu, contoh

<🎜>

Salin selepas log masuk

tidak lagi menjadi "ralat skrip", tetapi sebaliknya:

window.onerror onerror itu sahaja! "Kesalahan skrip" tidak lagi mengganggu anda dan pasukan anda.

<code>Access-Control-Allow-Origin: *</code>

Salin selepas log masuk

Alternatif: cuba/menangkap

Kadang -kadang kita tidak dapat menyesuaikan header HTTP skrip aplikasi web kami menggunakan. Dalam kes ini, terdapat alternatif: Gunakan .

Pertimbangkan contoh asal sekali lagi, kali ini menggunakan try/catch:

try/catch demi generasi akan datang,

sekali lagi seperti berikut:

$ curl --head https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js | \
    grep -i "access-control-allow-origin"

Access-Control-Allow-Origin: *

Salin selepas log masuk

some-domain.com/app.js Jalankan contoh html output dua entri berikut ke konsol:

<code>"ReferenceError: bar 未定义", "http://another-domain.com/app.js", 2, 1, [Object Error]</code>

Salin selepas log masuk

Kenyataan Konsol Pertama - dari

- berjaya mendapatkan objek ralat yang mengandungi jenis, mesej, dan stack jejak, termasuk nama fail dan nombor baris. Kenyataan konsol kedua dari

window.onerror = function (message, url, line, column, error) {
  console.log(message, url, line, column, error);
}

try {
  foo(); // 调用 app.js 中声明的函数
} catch (e) {
  console.log(e);
  throw e; // 故意重新抛出（由 window.onerror 捕获）
}

Salin selepas log masuk

hanya boleh mengeluarkan "ralat skrip".

try/catch Sekarang, adakah ini bermakna anda perlu cuba menangkap semua kod? Mungkin tidak. Jika anda boleh dengan mudah menukar HTML dan menentukan tajuk CORS pada CDN, lebih baik untuk melakukan ini dan melekat dengan window.onerror.

Tetapi, jika anda tidak mengawal sumber-sumber ini, membungkus kod pihak ketiga menggunakan window.onerror adalah cara yang boleh dipercayai (walaupun membosankan) untuk mendapatkan pemahaman yang lebih mendalam tentang kesilapan yang dibuang oleh skrip silang domain.

NOTA: Secara lalai, JavaScript SDK Raven.js Sentry dengan teliti mengesan kaedah terbina dalam untuk cuba membungkus kod anda secara automatik dalam blok try/catch. Ini dilakukan untuk cuba menangkap mesej ralat dan tumpukan jejak untuk semua skrip, tanpa mengira dari mana asalnya. Jika boleh, masih disyorkan untuk menetapkan sifat dan tajuk CORS.

Sudah tentu, terdapat banyak alat sumber komersial dan terbuka yang boleh melakukan semua mengangkat berat untuk anda. (SHH: Anda mungkin mahu mencuba debugging JavaScript dengan Sentry.)

itu sahaja! Pemantauan ralat gembira.

FAQ ralat skrip

(bahagian Soalan Lazim ditinggalkan di sini, kerana artikel itu terlalu panjang dan mempunyai korelasi yang lemah dengan subjek artikel, anda boleh menambah atau mengubah suai FAQ sendiri seperti yang diperlukan)

Atas ialah kandungan terperinci Apa maksud 'ralat skrip'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!