Third-party JS errors missing stack traces

Problem

When JavaScript errors come from third-party scripts, the errors are obfuscated on the New Relic Browser JS errors page and associated charts. Instead of a detailed error message, the error title reads Error: Errors without stack trace and the message content lacks details.

Browser JS error stack trace missing
rpm.newrelic.com/browser > (select an app) > JS errors: When JS errors originate from third-party scripts, the error details will be obfuscated in New Relic Browser. Cross-origin resource sharing (CORS) is one way to solve this problem.

Solution

The major cause of this problem is the same-origin policy. This is a security policy that prevents one web resource from accessing data from another resource if they don't both have the same origin. Origin in this context is the combination of the URI scheme, the hostname, and the port number. This policy prevents malicious code gaining access to other web resources.

This is an important policy for internet security, but it does make it more difficult for web resources to work together. Specifically: if you have JS scripts hosted on CDNs or other external locations, New Relic isn't able to see the errors originating in those scripts.

The solution is to use cross-origin resource sharing (CORS). By using CORS, JS errors will be exposed to your application, which means New Relic will also be able to see those errors.

There are many online resources that describe how to enable CORS. Here is one site about how to enable CORS for various platforms. New Relic is not responsible for the accuracy of third-party websites.

There may be potential security concerns when using CORS. The optimal CORS implementation will depend on the systems you are using and your security considerations. This document is intended only as a general introduction to using CORS.

Here are general instructions on how to implement CORS:

  1. Add the Access-Control-Allow-Origin code to the request headers of any third-party assets that provide JavaScript to your app:

    Access-Control-Allow-Origin: YOUR_DOMAIN
    

    Setting a domain, or multiple domains, will give those specific domains access to the error trace details and other available resources. Alternatively, you can use the asterisk * as a wildcard in lieu of your domain: this will give all domains access to that script's available resources.

    The wildcard * option means that script's resources are exposed to all domains. If those resources contain sensitive data, that data may be used maliciously.

  2. In your application, have the browser load JavaScript files using the CORS crossorigin attribute:

    <script src="EXTERNAL_LOCATION/script.js" crossorigin> </script>
    

For more help

Additional documentation resources include:

Discuss Browser monitoring in the New Relic Online Technical Community! Troubleshoot and ask questions, or discuss JavaScript error reporting or AJAX timing in detail.

If you need additional help, get support at support.newrelic.com.