Sentry Answers>JavaScript>

What is "Script Error"?

What is "Script Error"?

Ben Vinegar

The ProblemJump To Solution

Click to Copy
Script error.

“Script error” is what browsers send to the onerror callback when an error originates from a JavaScript file served from a different origin (different domain, port, or protocol). It’s painful because even though there’s an error occurring, you don’t know what the error is, nor from which code it’s originating. And that’s the whole purpose of window.onerror – getting insight into uncaught errors in your application.

To better understand what’s going on, consider the following example HTML document, served at

Click to Copy
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script src=""></script> <script> window.onerror = function(message, url, line, column, error) { console.log(message, url, line, column, error); }; foo(); // call function declared in app.js </script> </body> </html>

Here’s the contents of It declares a single function, foo, whose invocation will always throw a ReferenceError.

Click to Copy
// function foo() { bar(); // ReferenceError: bar is not a function }

When this document is loaded in the browser and JavaScript is executed, the following is output to the console (logged via the window.onerror callback):

Click to Copy
"Script error.", "", 0, 0, undefined

This isn’t a bug – browsers intentionally hide errors originating from script files from different origins for security reasons. It’s to avoid a script unintentionally leaking potentially sensitive information to an onerror callback that it doesn’t control. For this reason, browsers only give window.onerror insight into errors originating from the same domain. All we know is that an error occurred – nothing else!

The Solution

In order to get visibility into errors thrown from scripts originating from different origins, you must do two things.

Cross Origin Anonymous

Click to Copy
<script src="" crossorigin="anonymous"></script>

This tells the browser that the target file should be fetched “anonymously”. This means that no potentially user-identifying information like cookies or HTTP credentials will be transmitted by the browser to the server when requesting this file.

Cross Origin HTTP header

Click to Copy
Access-Control-Allow-Origin: *

CORS is short for “Cross Origin Resource Sharing”, and it’s a set of APIs (mostly HTTP headers) that dictate how files ought to be downloaded and served across origins. By setting “Access-Control-Allow-Origin: *”, the server is indicating to browsers that any origin can fetch this file.

By setting the global wildcard, you are indicating that any origin can consume this server. If you want, you can restrict it to only known domains you control, e.g.

Click to Copy

Note: Most community CDNs properly set an Access-Control-Allow-Origin header.

Once both of these steps have been made, any errors triggered by this script will report to window.onerror just like any regular same-domain script. So instead of “Script error”, the onerror example from the beginning will yield:

Click to Copy
ReferenceError: bar is not defined", "", 2, 1, [Object Error]

Further Reading

If you’re looking to get a deeper understanding of how JavaScript application monitoring works, take a look at the following articles:

  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • ResourcesJavaScript Frontend Error Monitoring 101
  • logo
    Listen to the Syntax Podcast

    Tasty Treats for Web Developers brought to you by Sentry. Web development tips and tricks hosted by Wes Bos and Scott Tolinski

    Listen to Syntax

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.