Third-party JS errors missing stack traces

Problem

JavaScript (JS) error events are compiled on the browser monitoring JS errors page. By default, they're grouped by error message. When you select a single error event, you'll see more detail in its Error Instances list. In some cases, one or more of the instances may not have a stack trace.

Solution

First, see if you're able to reproduce the error on your site, and if so, verify that it shows a stack trace on your dev console or web inspector when it's open before the error occurs.

Enabling cross-origin resource sharing (CORS) can eliminate this issue, exposing the full details of the JS error to your application and allowing the error's stack trace to be captured by the 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.

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

   Copy

   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>

   Copy

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

Cause

The most common cause of the missing stack trace 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. The policy prevents malicious code from gaining access to other web resources.

The same-origin policy is important for internet security, but it can make it more difficult for web resources to work together. Specifically, issues can arise if you have JS scripts hosted on Content Delivery Networks (CDNs) or other external locations. New Relic is able to see the errors coming from those scripts but is unable to access their data.