Support distributed tracing

[lucascaro]

Summary

Add support for distributed tracing configuration (NREUM.init={distributed_tracing: ...) or a custom init block.

Desired Behaviour

The plugin allows to enable distributed tracing and set other related settings:

window.NREUM || (NREUM = {});
NREUM.init = {
  distributed_tracing: {
    enabled: true,
    cors_use_newrelic_header: true,
    cors_use_tracecontext_headers: true,
    allowed_origins: [
      ... list of strings ...
    ],
  },
  privacy: { cookies_enabled: true },
  ajax: { deny_list: ["bam.nr-data.net"] },
};

Possible Solution

The plugin allows adding initialization values in the plugin configuration

{
  resolve: "gatsby-plugin-newrelic",
  options: {
    config: {

      distributed_tracing: {
        enabled: true,
        cors_use_newrelic_header: true,
        cors_use_tracecontext_headers: true,
        allowed_origins: [
          // ... string[]
        ],
      },
      privacy: { cookies_enabled: true },
      ajax: { deny_list: ["bam.nr-data.net"] },

      instrumentationType: "...",
      accountID: "...",
      applicationID: "...",
      licenseKey: "...",
      agentID: "...",
      trustKey: "...",
      beacon: "bam.nr-data.net",
      errorBeacon: "bam.nr-data.net",
    },
  }

Additional context

I couldn't find any way to add these settings via the plugin which would be ideal. Right now it seems the only solution is to add this code manually before the plugin adds newrelic code to the page.

[rudouglas]

Hi @lucascaro, this would be a great feature and that is definitely the approach to take re the gatsby-config.js file. The following file takes that configuration and turns it into one that the Browser agent can recognise:

• https://github.com/newrelic/gatsby-plugin-newrelic/blob/main/src/gatsby/on-render-body.js

If you create a new Browser app in New Relic with Distributed Tracing enabled you will see a snippet that looks like the following:

<script type="text/javascript">
;window.NREUM||(NREUM={});NREUM.init={};
window.NREUM||(NREUM={}),__nr_require=function..... etc
;NREUM.loader_config={}
;NREUM.info={}
</script>

1. ;window.NREUM||(NREUM={});NREUM.init={};
   • This is where the DT options go. We don't currently add this when building the config, so we'd have to build a string that looked like:
   • ;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:["bam-cell.nr-data.net"]}};
   • lets call that the init variable
2. window.NREUM||(NREUM={}),__nr_require=function..... etc
   • This is the Agent string that is already loaded in from here and won't need to change
3. & 4. are both already built and stored in the configs variable here and won't need to be changed

Then we could put them all together here as:

__html: init + agent + configs

Hope that makes sense and great to see you contributing to the project 🕺

[TNelen]

Hi, we are using the gatsby-plugin-newrelic, but distributed tracing seems not to be working for us. Is it possible to enable distributed tracing in the current version of the plugin? Or do you know a workaround on how to enable it?