No data for browser agent with React and webpack

Hello! I am trying to get a browser application working. I tried setting it up through APM and as a snippet. The application is using express with React and server-side rendering. It is being bundled with webpack.

I tried following this guide https://docs.newrelic.com/docs/browser/browser-monitoring/troubleshooting/troubleshoot-your-browser-monitoring-installation#manual-tips.

  • The app is enabled
  • The javascript snippets are there and match
  • CDN and cache are good
  • The javascript is the first script tag after the meta tags
  • I don’t see any errors in the console or in the New Relic UI
  • It’s not behind a VPN or anything
  • Not using razor

When I run nrdiag it says everything is good

Check Results
-------------------------------------------------

Success             Browser/Agent/GetSource
Success             Browser/Agent/Detect
See nrdiag-output.json for full results.

No Issues Found

In the NewRelic UI, however, no data shows up. No pageviews, no traces, nothing. The application can be found here https://one.nr/0VKQXDYk8Qa

What should I do next?

Hey there @adenton! If you are using React and Webpack to build your application, you’ll definitely want to use the copy/paste, manual installation method. We’ve seen using the APM/Node agent to auto-inject when using Webpack can cause issues in getting the script to load in time.

Can you confirm which method you are currently using?

I checked your browser application in your account and still don’t see data. Is your application page url publicly accessible? If yes, can you please provide a link?

When you run “newrelic.info” in the developer console of your application, what metadata is returned? Please see more details here.

Thank you!

Hello @cfrankenfield!

This is the ultimate delayed response but this project was put on the backburner for a bit. In any case, I’m hoping I can get it spun back up again.

I have tried both ways, with the APM and with the browser snippet. Currently I’m testing with the snippet. When I type newrelic.info the newrelic object is undefined. I followed the link you provided and tried to use it for troubleshooting but still haven’t made progress.

The script appears to be loading fine and I’ve tried clearing the cache:

I can provide a link to my application but would prefer to do so privately. is there somewhere I can do that?

Thank you and sorry for the ultra-delayed response!

Small update: I spun up a completely separate sample app add the snippet worked just fine. Not surprising but it confirms that there’s something particular about how I’m including the snippet in my app that’s wrong.

@adenton Thanks for the followup here! Were you using the copy/paste method? Is the script inline and in the head tag, before other scripts? I’ve seen sometimes depending on the build process, that the script doesn’t make it into the DOM before page load. That might be one area to test if you’re still having any issues.

@cfrankenfield Yes, it’s copy-pasted and as close to the top as I can easily make it. You can see it rendered in the image I linked above.

I’m not sure if this might be relevant but the way the script tag is currently being included is with a template literal. I’m trying to see if I can render it differently without a massive refactor but does that ring any bells?

Okay. I think I have some progress.

I did a diff of the rendered script tags and it looks like the template literal was removing backslashes from the script tag. I added some escapes, redeployed, and the newrelic object is defined now. Doesn’t seem to be working 100%. Still investigating.

@adenton It sounds like some progress has been made! What particularly doesn’t seem to be working 100% though? Let us know if we can help.

@cfrankenfield What I’m trying to figure out now is why distributed tracing isn’t working between the browser and the API. It seems for some reason that sees the API as an external service even though the API is working.

Probably a trace header thing? Or a cross-origin issue? That’s where I’m gonna start anyway.

The Access-Control-Allow-Headers: newrelic header is in place and it looks like new relic is indeed sending a header with the requests:

Still no distributed trace though.

@adenton Thanks for the followup here and since it sounds like you are currently configuring distributed tracing now, I’m including a detailed troubleshooting post from the community that should help as a guide for common items to check (including CORs and headers).

Let me know what you find or if you have any followup questions from this, happy to dig in further. Thanks!

Hi @cfrankenfield. Yeah, I had actually already followed that document up to step 6. Like I said, the header is definitely being injected into the requests. What would that mean if it’s not showing a distributed trace? Would that indicate a problem on the browser side or on the API side?

The API shows distributed traces they just don’t include the browser part. So that makes me think it’s probably an issue on the browser side?