Third-party JS errors missing stack traces

Problem

JavaScript (JS) errors from third-party scripts 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: JS errors originating from third party applications will be obfuscated in the New Relic Browser agent.

Solution

Enabling cross-origin resource sharing (CORS) can eliminate this issue, exposing JS errors to your application and allowing the errors to be captured by the New Relic Browser agent.

There are many online resources that provide information on CORS enabling and settings. This MDN article has a detailed description of CORS, with a section on configuring response headers, and another on CORS settings attributes. The Enable CORS website has information how to enable CORS for various platforms.
New Relic is not responsible for the accuracy of third-party websites.

This document is intended only as a general introduction to using CORS. Due to possible security concerns, New Relic recommends research before implementing any changes that impact the security of your application or resources. The optimal CORS implementation will depend on the systems you are using and your security considerations.

Here are general instructions on how to implement CORS:

  1. Add the Access-Control-Allow-Origin code to the response 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 error trace details and other available resources. This MDN article may contain useful information on configuring response headers, such as adding multiple domains or using a wildcard in lieu of a domain.

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

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

    This MDN article may contain useful information on CORS settings attributes.

Cause

The most common 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 unless they both have the same origin. In this context, origin is the combination of the URI scheme, the hostname, and the port number. This policy prevents malicious code from gaining access to other web resources.

This is an important policy for internet security, but it can 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.

For more help

Recommendations for learning more: