Error skrip merupakan jenis error umum yang tidak menyertakan pesan error lengkap atau stack error, sehingga sulit diperbaiki. Topik ini menganalisis penyebabnya, memberikan solusi, serta menjelaskan cara mengabaikan jenis error ini di Application Real-Time Monitoring Service (ARMS).
Penyebab error skrip
Error skrip juga dikenal sebagai error lintas origin. Error ini terjadi ketika sebuah situs web meminta dan mengeksekusi skrip yang dihosting di bawah domain pihak ketiga. Skenario paling umum adalah penggunaan jaringan pengiriman konten (CDN) untuk menghosting resource JavaScript (JS).
Untuk memahami lebih baik, asumsikan halaman HTML berikut dideploy di domain http://test.com:
<!doctype html>
<html>
<head>
<title>Test page in 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(); // Invokes the foo method defined in the app.js file.
</script>
</body>
</html>Asumsikan metode foo memanggil metode bar yang tidak terdefinisi:
// another-domain.com/app.js
function foo() {
bar(); // ReferenceError: bar is not a function
}Setelah halaman dimuat, error berikut ditangkap:
"Script error.", "", 0, 0, undefined Sebenarnya, ini bukan error JS sejati. Untuk alasan keamanan, browser sengaja menyembunyikan detail error yang dilemparkan oleh file JS dari origin berbeda guna mencegah kebocoran informasi sensitif ke skrip pihak ketiga yang tidak terkendali. Akibatnya, hanya skrip dari origin yang sama yang dapat menangkap pesan error spesifik, sedangkan skrip dari origin lain hanya dapat mendeteksi keberadaan error tanpa informasi detailnya. 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;
}Bagian berikut menjelaskan cara menyelesaikan error skrip.
Solusi 1: Aktifkan Berbagi Sumber Daya Lintas Domain (CORS)
Untuk menangkap error JS lintas origin, lakukan langkah-langkah berikut:
Tambahkan atribut
crossorigin="anonymous".<script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>Langkah ini memberi tahu browser untuk mengambil skrip pihak ketiga secara anonim, artinya browser tidak mengirimkan informasi identitas pengguna seperti cookie atau sertifikat HTTP ke server saat meminta skrip tersebut.
Tambahkan header respons HTTP lintas origin. Misalnya, 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 telah memiliki header
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 kedua langkah di atas diterapkan, Anda dapat menangkap error lintas origin menggunakan penanganan window.onerror. Pada contoh sebelumnya, setelah halaman dimuat ulang, error berikut ditangkap:
=> "ReferenceError: bar is not defined", "http://another-domain.com/app.js", 2, 1, [Object Error]Solusi 2: Tambahkan perintah try catch (Opsional)
Jika penambahan atribut lintas origin ke header permintaan atau respons HTTP sulit dilakukan, Anda dapat menambahkan perintah try catch.
Tambahkan perintah try catch ke halaman HTML sebelumnya. Contoh kodenya sebagai berikut:
<!doctype html>
<html>
<head>
<title>Test page in 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(); // Invokes the foo method defined in the app.js file.
} catch (e) {
console.log(e);
throw e;
}
</script>
</body>
</html>Muat ulang halaman tersebut. Informasi berikut dikembalikan:
=> ReferenceError: bar is not defined
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 menangkap kesalahan skrip. Anda dapat melaporkan secara manual pengecualian yang ditangkap dalam blok try catch. Untuk informasi selengkapnya, lihat Metode SDK.
__bl.error(error, pos);Meskipun perintah try catch dapat menangkap beberapa exception, kami merekomendasikan penggunaan Solusi 1.
Bagaimana cara mengabaikan error skrip di ARMS?
Error skrip biasanya berasal dari skrip yang dihosting di domain pihak ketiga. Jika error tersebut tidak memengaruhi jalannya aplikasi Anda, Anda dapat mengabaikannya dengan mengatur parameter ignore pada SDK pemantauan antarmuka depan ARMS.
Parameter ignore memungkinkan Anda mengabaikan pelaporan error JS tertentu. Nilai parameter ini berupa objek yang mencakup tiga properti: ignoreUrls, ignoreApis, dan ignoreErrors. Kode berikut menunjukkan nilai default parameter ini:
ignore: {
ignoreUrls: [],
ignoreApis: [],
ignoreErrors: []
},Gunakan properti ignoreErrors untuk mengabaikan error skrip. Properti ignoreErrors digunakan untuk mengabaikan error JS yang memenuhi aturan tertentu. Nilai properti ini dapat berupa string (tipe String), ekspresi reguler (tipe RegExp), metode (tipe Function), atau array yang mencakup ketiga tipe tersebut. Kode berikut memberikan contoh cara mengabaikan error skrip:
__bl.setConfig({
ignore: {
ignoreErrors: /^Script error\.?$/
}
});