All Products
Search

This Product

    Application Real-Time Monitoring Service:Mengatasi "Script error." di Pemantauan Browser

    Document Center

    Application Real-Time Monitoring Service:Mengatasi "Script error." di Pemantauan Browser

    Last Updated:Mar 11, 2026

    Ketika browser menangkap error dari file JavaScript yang di-host pada origin berbeda, browser mengganti detail error tersebut dengan pesan generik "Script error.". Ini merupakan fitur keamanan browser yang ditentukan oleh kebijakan asal sama (same-origin policy). Karena pesan error, URL sumber, dan nomor baris semuanya dihapus, error semacam ini sulit didiagnosis di ARMS Browser Monitoring.

    Topik ini menjelaskan penyebab munculnya "Script error." dan menguraikan dua solusi: mengaktifkan CORS (direkomendasikan) serta membungkus pemanggilan dalam blok try...catch. Bagian terakhir membahas cara memfilter error skrip di SDK ARMS ketika error tersebut tidak dapat ditindaklanjuti.

    Mengapa browser menyembunyikan detail error lintas origin

    Browser menerapkan kebijakan asal sama pada pelaporan error. Jika halaman di http://test.com memuat skrip dari http://another-domain.com/app.js, browser memblokir informasi detail error agar tidak sampai ke penangan window.onerror halaman tersebut. Hal ini mencegah skrip pihak ketiga membocorkan data sensitif melalui pesan error.

    Contoh: Sebuah halaman memuat skrip lintas domain yang memanggil fungsi yang tidak terdefinisi.

    <!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(); // Calls foo() defined in app.js
  </script>
</body>
</html>
    // another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar is not a function
}

    Akibatnya, alih-alih menerima ReferenceError yang sebenarnya, penangan window.onerror menerima:

    "Script error.", "", 0, 0, undefined

    Secara internal, browser membersihkan error tersebut sebelum meneruskannya ke halaman:

    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;
    }

    Penyebab paling umum adalah hosting JavaScript di CDN. Karena domain CDN berbeda dari domain halaman Anda, semua error dari skrip tersebut muncul sebagai "Script error.".

    Solusi 1: Aktifkan CORS (direkomendasikan)

    Untuk mendapatkan detail error lengkap dari skrip lintas origin, konfigurasikan baik tag skrip di HTML maupun header respons di server yang meng-host skrip tersebut.

    Langkah 1: Tambahkan atribut crossorigin ke tag skrip

    <script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>

    Atribut crossorigin="anonymous" memberi tahu browser untuk mengambil skrip tanpa mengirim kredensial (cookie atau Sertifikat klien) ke server pihak ketiga.

    Langkah 2: Tambahkan header respons CORS di server

    Server yang meng-host skrip harus mengembalikan header Access-Control-Allow-Origin. Untuk mengizinkan semua origin:

    Access-Control-Allow-Origin: *

    Untuk membatasi akses hanya ke domain Anda:

    Access-Control-Allow-Origin: http://test.com
    Catatan

    Sebagian besar penyedia CDN sudah menyertakan header Access-Control-Allow-Origin secara default. Untuk memverifikasi, jalankan:

    curl --head https://retcode.alicdn.com/retcode/bl.js | grep -i "access-control-allow-origin"

    Output yang diharapkan:

    access-control-allow-origin: *

    Verifikasi perbaikan

    Setelah menyelesaikan kedua langkah tersebut, muat ulang halaman. Penangan window.onerror kini menerima error lengkap:

    "ReferenceError: bar is not defined", "http://another-domain.com/app.js", 2, 1, [Object Error]

    Solusi 2: Bungkus pemanggilan dalam blok try...catch

    Jika Anda tidak dapat mengubah header CORS server—misalnya pada skrip pihak ketiga yang tidak Anda kendalikan—bungkus pemanggilan fungsi lintas origin dalam blok try...catch.

    <!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(); // Calls foo() defined in app.js
  } catch (e) {
    console.log(e);
    throw e;
  }
  </script>
</body>
</html>

    Blok catch menangkap error lengkap, termasuk jejak stack:

    ReferenceError: bar is not defined
    at foo (http://another-domain.com/app.js:2:3)
    at http://test.com/:15:3

    Penangan window.onerror tetap menerima "Script error.". Untuk melaporkan error yang tertangkap ke ARMS, panggil metode pelaporan error SDK di dalam blok catch:

    __bl.error(error, pos);

    Untuk referensi API lengkap, lihat metode SDK.

    Catatan

    Solusi 1 (CORS) merupakan pendekatan yang lebih disarankan. Gunakan try...catch hanya jika Anda tidak dapat mengonfigurasi header lintas origin.

    Memfilter error skrip di ARMS

    Jika error skrip berasal dari skrip pihak ketiga yang tidak memengaruhi aplikasi Anda, filter error tersebut dari data ARMS menggunakan parameter ignore pada SDK.

    Parameter ignore menerima objek dengan tiga properti:

    ignore: {
    ignoreUrls: [],
    ignoreApis: [],
    ignoreErrors: []
}

    Untuk memfilter error skrip, gunakan properti ignoreErrors. Properti ini menerima string, ekspresi reguler, fungsi, atau array yang menggabungkan tipe-tipe tersebut.

    Contoh: Filter semua pesan "Script error." menggunakan ekspresi reguler:

    __bl.setConfig({
    ignore: {
        ignoreErrors: /^Script error\.?$/
    }
});

    Referensi