Instrument Gatsby application

[TioLuiso]

Description

We have followed readme to instrument react application. However, we don't see anything in new relic

Steps to Reproduce

• installed package with yarn add @newrelic/browser-agent
• Created app in New Relic One
• Instantiated the agent inside outernmost component (details removed)

const options: NrOptions = {
  applicationID: '',
  licenseKey: '',
  beacon: 'bam.nr-data.net',
  accountID: '',
  trustKey: '',
  distributed_tracing: {
    enabled: true
  },
  privacy: {
    cookies_enabled: true
  }
}

const nr = new NR()
nr.start(options).then(() => {
  console.log('Browser Agent Initialized!')
})

• Launched the application with gatsby develop
• interacted with the application causing calls to backend

Expected Behavior

That the traces of the navigation and the calls to backend would appear in New Relic

Relevant Logs / Console output

In console, I can see Browser Agent Initialized!

Your Environment

Browser: Chrome v111.0
OS: MacOs Ventura 13.2

Additional context

if instead of gatsby develop we do gatsby build, we receive this error instead

"window" is not available during Server-Side Rendering. Enable "DEV_SSR" to debug this during "gatsby develop".

See our docs page for more info on this error: https://gatsby.dev/debug-html


  3 |  * SPDX-License-Identifier: Apache-2.0
  4 |  */
> 5 | export const exists = typeof (window.performance) !== 'undefined' && window.performance.timing && typeof (window.performance.timing.navigationStart) !== 'undefined'
    |        ^
  6 | // export default {
  7 | //   exists
  8 | // }


  WebpackError: ReferenceError: window is not defined

[workato-integration]

https://issues.newrelic.com/browse/NEWRELIC-7879

[patrickhousley]

Hi @TioLuiso thanks for reaching out. We are currently fixing an issue with our NPM publishing so the new package isn't out there yet. I will message you when it is so you can give it another try.

[TioLuiso]

That's what I call fast!!!. Thanks a lot

[patrickhousley]

@TioLuiso we got the updated package published. Can you please try now. The version should be 0.1.229. Keep in mind, the NPM package is still a pre-release. We are still testing things out but I would love to hear any feedback you might have. Thanks.

[TioLuiso]

Hello
Well, I'm trying to instantiate BrowserAgent, as it's said in the readme, but the path @newrelic/browser-agent/loaders/browser-agent it looks like it's incorrect. There's one at @newrelic/browser-agent/types, but it's an interface. I have seen a class at @newrelic/browser-agent/dist/esm/loaders/browser-agent, but when I try to import it, I get

./node_modules/@newrelic/browser-agent/dist/esm/features/page_view_event/instrument/index.js 10:21
Module parse failed: Unexpected token (10:21)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import { now } from '../../../common/timing/now';
| export class Instrument extends InstrumentBase {
>   static featureName = CONSTANTS.FEATURE_NAME;
|   constructor(agentIdentifier, aggregator) {
|     let auto = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

[patrickhousley]

Thanks for trying the npm package @TioLuiso . Any chance you could put together a small reproduction of the issue? The import path for the browser agent class is correct. What version of NodeJS are you using? When you say it is incorrect, what do you mean?

[TioLuiso]

Ok

• I created an empty react typescript app with yarn create react-app my-app --template typescript
• I added the @newrelic/browser-agent package with yarn add @newrelic/browser-agent
• I added imported BrowserAgent into App.tsx with import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'

As you can see, if cannot find the module @newrelic/browser-agent/loaders/browser-agent

I have pushed this into a github repo: https://github.com/TioLuiso/react-newrelic

[patrickhousley]

Thanks @TioLuiso that issue should be resolved with #456

[patrickhousley]

@TioLuiso we have published a new release of the NPM package 0.230.0. Can you please give that a try?

I was able to get your reproduction working with the new version after adding a line to instantiate the BrowserAgent. Please look back over the README for info on what needs to be passed to the class.

[kylekarpack]

I am still seeing the same issue on 0.1.230 I believe. I'm assuming this was the version that was supposed to be fixed?

I was able to produce a minimal reproduction here using Parcel: https://github.com/kylekarpack/nr-browser-test

Here's what I see in VSCode:

[patrickhousley]

@kylekarpack I do not see that issue when I clone your reproduction repository. What version of Node are you running? What VSCode plugins do you have installed? Any global or IDE eslint or typescript settings that could cause this?

This is what I see:

[kylekarpack]

@patrickhousley, this occurs for me in a GitHub codespace running Node 19.7.0, but the issue is less about VSCode and more about the fact that the project won't build. When you run npm run build, does it actually build successfully for you?

As an aside, I fixed the JSX issue on the minimal repro so that wouldn't be a distraction

[patrickhousley]

Ah ok, yea the build does show the error but not my vscode. Weird.

[kylekarpack]

Weirdly, what does work for the build is:

import { BrowserAgent } from '@newrelic/browser-agent';

But that causes VSCode's syntax highlighting to get unhappy:

Cannot find module '@newrelic/browser-agent' or its corresponding type declarations.ts(2307)

[patrickhousley]

This may be related to parcel-bundler/parcel#4155 I will have to do some more digging a little later.

[patrickhousley]

@kylekarpack That issue I linked above is the exact cause of your problems. The parcel bundler has a PR merged to support the exports package.json field but it has not been released yet. Until that is released, you can add the below to your project's package.json to make the build work.

  "alias": {
    "@newrelic/browser-agent/loaders/browser-agent": "@newrelic/browser-agent/dist/esm/loaders/browser-agent"
  }

[kylekarpack]

@patrickhousley, thanks for digging that up. That does indeed solve the build issue with Parcel. Appreciate it!

My VSCode syntax highlighting is still not happy, but I can live with that for now

[workato-integration]

Work has been completed on this issue.