Kesalahan skrip adalah masalah umum yang sering terjadi. Namun, tidak ada pesan kesalahan lengkap atau tumpukan kesalahan yang tersedia untuk jenis kesalahan ini, sehingga sulit untuk didiagnosis. Artikel ini menganalisis penyebabnya, memberikan solusi, serta menjelaskan cara mengabaikan jenis kesalahan ini di Application Real-Time Monitoring Service (ARMS).
Penyebab kesalahan skrip
Kesalahan skrip juga dikenal sebagai kesalahan lintas asal. Kesalahan ini dapat terjadi ketika sebuah situs web meminta dan menjalankan skrip yang dihosting di bawah nama domain pihak ketiga. Skenario yang paling umum adalah penggunaan jaringan pengiriman konten (CDN) untuk meng-host sumber daya JavaScript (JS).
Untuk pemahaman lebih baik, anggaplah halaman HTML berikut diimplementasikan pada nama domain http://test.com:
<!doctype html>
<html>
<head>
<title>Halaman uji di http://test.com</title>
</head>
<body>
<script src="http://another-domain.com/app.js"></script>
<script>
window.onerror = function (message, url, line, column, error) {
console.log(message, url, line, column, error);
}
foo(); // Memanggil metode foo yang didefinisikan dalam file app.js.
</script>
</body>
</html>Asumsikan bahwa metode foo memanggil metode bar yang tidak terdefinisi:
// another-domain.com/app.js
function foo() {
bar(); // ReferenceError: bar bukan fungsi
}Setelah halaman dimuat, kesalahan berikut ditangkap:
"Script error.", "", 0, 0, undefined Sebenarnya, ini bukan kesalahan JS. Untuk alasan keamanan, browser secara sengaja menyembunyikan kesalahan tertentu yang dilemparkan oleh file JS dari asal lain. Dengan cara ini, informasi sensitif dapat dicegah agar tidak disadap secara tidak sengaja oleh skrip pihak ketiga yang tidak terkendali. Oleh karena itu, hanya skrip dari asal yang sama yang dapat menangkap pesan kesalahan spesifik, sedangkan skrip dari asal lain hanya dapat mendeteksi kesalahan tanpa menangkap pesan kesalahan spesifik. Untuk informasi lebih lanjut, lihat .
bool ScriptExecutionContext::sanitizeScriptError(String& errorMessage, int& lineNumber, String& sourceURL)
{
KURL targetURL = completeURL(sourceURL);
if (securityOrigin()->canRequest(targetURL))
return false;
errorMessage = "Script error.";
sourceURL = String();
lineNumber = 0;
return true;
}Berikut ini menjelaskan cara menyelesaikan kesalahan skrip.
Solusi 1: Aktifkan Berbagi Sumber Daya Lintas Domain (CORS)
Untuk menangkap kesalahan JS lintas asal, ikuti langkah-langkah berikut:
Tambahkan atribut
crossorigin="anonymous".<script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>Langkah ini memberi tahu browser untuk mendapatkan skrip pihak ketiga secara anonim. Artinya, browser tidak akan mengirimkan informasi identitas pengguna potensial, seperti cookie dan sertifikat HTTP, ke server saat meminta skrip.
Tambahkan header respons HTTP lintas asal. Sebagai contoh, Anda dapat menjalankan perintah berikut:
Access-Control-Allow-Origin: *Atau, Anda dapat menjalankan perintah berikut:
Access-Control-Allow-Origin: http://test.comCatatanSecara default, sebagian besar CDN utama memiliki atribut
Access-Control-Allow-Origin. Contoh berikut berasal dari Alibaba Cloud CDN:$ curl --head https://retcode.alicdn.com/retcode/bl.js | grep -i "access-control-allow-origin" => access-control-allow-origin: *
Setelah dua langkah di atas dilakukan, Anda dapat menangkap kesalahan lintas asal menggunakan penanganan window.onerror. Dalam contoh sebelumnya, setelah halaman dimuat ulang, kesalahan berikut ditangkap:
=> "ReferenceError: bar tidak terdefinisi", "http://another-domain.com/app.js", 2, 1, [Object Error]Solusi 2: Tambahkan perintah try catch (Opsional)
Jika atribut lintas asal sulit ditambahkan ke header permintaan atau respons HTTP, gunakan perintah try catch.
Tambahkan perintah try catch ke halaman HTML sebelumnya. Kode berikut memberikan contohnya:
<!doctype html>
<html>
<head>
<title>Halaman uji di http://test.com</title>
</head>
<body>
<script src="http://another-domain.com/app.js"></script>
<script>
window.onerror = function (message, url, line, column, error) {
console.log(message, url, line, column, error);
}
try {
foo(); // Memanggil metode foo yang didefinisikan dalam file app.js.
} catch (e) {
console.log(e);
throw e;
}
</script>
</body>
</html>Muat ulang halaman. Informasi berikut dikembalikan:
=> ReferenceError: bar tidak terdefinisi
at foo (http://another-domain.com/app.js:2:3)
at http://test.com/:15:3
=> "Script error.", "", 0, 0, undefinedPerintah try catch menghasilkan informasi kesalahan lengkap di log konsol, sedangkan penanganan window.onerror hanya menghasilkan kesalahan skrip. Anda dapat melaporkan pengecualian yang ditangkap secara manual dalam perintah try catch. Untuk informasi lebih lanjut, lihat metode SDK.
__bl.error(error, pos);Meskipun perintah try catch dapat digunakan untuk menangkap beberapa pengecualian, kami merekomendasikan agar Anda menggunakan Solusi 1.
Bagaimana cara mengabaikan kesalahan skrip di ARMS?
Kesalahan skrip biasanya berasal dari skrip di bawah nama domain pihak ketiga. Jika kesalahan skrip tidak mempengaruhi jalannya aplikasi Anda, Anda dapat mengabaikannya dengan mengatur parameter ignore dari SDK pemantauan frontend ARMS.
Parameter ignore memungkinkan Anda mengabaikan pelaporan kesalahan JS tertentu. Nilai parameter ini adalah objek yang berisi tiga properti: ignoreUrls, ignoreApis, dan ignoreErrors. Kode berikut menunjukkan nilai default dari parameter ini:
ignore: {
ignoreUrls: [],
ignoreApis: [],
ignoreErrors: []
},Gunakan properti ignoreErrors untuk mengabaikan kesalahan skrip. Properti ignoreErrors digunakan untuk mengabaikan kesalahan JS yang sesuai dengan aturan tertentu. Nilai properti ini bisa berupa string (tipe String), ekspresi reguler (tipe RegExp), metode (tipe Function), atau array yang mencakup tiga tipe tersebut. Kode berikut memberikan contoh tentang cara mengabaikan kesalahan skrip:
__bl.setConfig({
ignore: {
ignoreErrors: /^Script error\.?$/
}
});