Configure New Relic Browser Agent with a copy->past snippet

[mkoo-moncel]

We're trying to add newrelic to an existing project using Next.js. I followed the instructions here and in the blog post (installed newrelic npm packages, modified package json scripts, injected script in pages/_document, added newrelic.js config file and am not seeing any data come through on new relic.

When adding new relic via a copy/paste code snippet there are a bunch of parameters provided in addition to the license key that don't show here (accountID, trustKey, agentID, applicationID) and it's hard to imagine how this integration would work without that information. I wonder if there were steps missing from the instructions?

[matewilk]

Hey @mkoo-moncel,

Apologies for the late reply,

If you could create a sample repo where you can replicate the issue I could take a look and see if I can help.

[Fanoflix]

Same question, but slightly more information on my part. We are trying to integrate newrelic with a NextJS application.

We have tried all these methods.

Method 1

• Add inline Script by dangerouslysettingHTML in _app.tsx file

Method 2

• Add inline Script by dangerouslysettingHTML in _document.tsx file

Both of these methods fail. As soon as the application starts an error is thrown "newrelic is undefined" (which is not thrown if we import the script from a js file as opposed to using the script inline.

[matewilk]

Hey @Fanoflix I would need a little bit more context, but my suspicion is that you're trying to add the inline script with <script> tags included? This is what springs to my mind based on your description above. If you're injecting something into dangerouslySetInnerHTML it's already wrapped in script tag so you need to remove script tags from the snipped copy->pasted from the New Relic UI.

--- Edit --- the below might not be relevant until you want to place the NR browser script in a separate file

Which brings all sort of other issues because you then need to put it into a separate file and escape all / or \ (sorry I don't remember which ones (and probably also wrap everything in a component?) - sorry I can't find it in my commit history on any of the repos I've integrated NR with.

Why not use the recommended method which is the newrelic.getBrowserTimingHeader? Is it missing features that you can include with the copy->paste snippet?

Copy->paste is definitely doable as I've done it in the past

[Fanoflix]

Hello @matewilk Thanks for the quick reply.

I removed the <script> tags manually and then pasted the remaining script in dangerouslySetInnerHTML. When I try to do this, I still get the error.

As for newrelic.getBrowserTimingHeader method, I am not aware of it except for through this article: https://newrelic.com/blog/how-to-relic/nextjs-monitor-application-data.

I tried the steps in this article but I was at a loss about where did the author ever specify the specific agent (through entityGuid or any other thing)?

This is also the same problem with this repository atm, there is no newrelic agent script file. Looking at the commit history, I saw that there did exist a newrelic-browser-agent.js script but was deleted in this commit.

[matewilk]

Hey @Fanoflix Sorry if I didn't make myself clear in the blog post.

The broswerTimingHeader variable returned from the below snippet, which you can also find the example of in the _document.tsx file is the Newrelic Browser agent

const browserTimingHeader = newrelic.getBrowserTimingHeader({
  hasToRemoveScriptWrapper: true,
  allowTransactionlessInjection: true
});

The hasToRemoveScriptWrapper: true property tells the getBrowserTimingHeader method to return the script without script tags.

For more details please see this link as well. (which you can find a link to in the article you brought up)

You can simply pass it to dangerouslySetInnerHTML like it is done in the _document.tsx file.

<script
  type="text/javascript"
  dangerouslySetInnerHTML={{ __html: this.props.browserTimingHeader }}
/>

And it passes the browser agent as a script without script wrapper to the <script> tag

Not sure what stage of development your application is, but simply put, if you just copy->paste the entire _document.tsx file from this repo to your app, is all it takes to integrate with the New Relic Browser agent. (You might have to remove some things like the logger though if you don't have it setup yet)

Let me know if it helps

[Fanoflix]

Hello @matewilk ,

Sorry for the late reply.

I am not sure if I missed something or not, but where do we specify which entity the data gets sent to? I understood the snippets you have posted and I understood all that from the blog post, but I failed to find a reference/script to the actual entity that I wish to use.

For instance we have 3 entities for each environment, dev qa and prod. Dynamically setting them up comes later, but where is the linkage between the agent script?

Edit: One thing I should mention is that we're using Newrelic solely for Browser Monitoring and not using NextJS backend in any capacity at the moment.

[matewilk]

Hey @Fanoflix

I'm not entirely sure what you mean by an entity exactly but if I understand you question correctly,

There are three variables that specify where the data is sent:

• New Relic Account Id
• Application name
• License ingest key

Depending on the integration method, environment variables, config file, or a copy->paste snippet (in case of the browser agent where those are automatically filled in for you) would need to be set up with those variables in order to start sending data to NR.

Then based on that you would log in to your New Relic account and via the UI navigate to Browser -> {your app name} where you would find your application metrics.

I'd encourage you to read through the NR docs to understand those things or contact New Relic support as it seems your question is beyond the scope of this repository's purpose.

[Fanoflix]

Hey @matewilk I have actually read the docs and I know where in the newrelic dashboard I can see the analytics coming in.

As I said, we're using the copy->paste snippet method. And as the original issue specified:

"When adding new relic via a copy/paste code snippet there are a bunch of parameters provided in addition to the license key that don't show here (accountID, trustKey, agentID, applicationID) and it's hard to imagine how this integration would work without that information. I wonder if there were steps missing from the instructions?"

Summarising it all, the simple question is, how do I integrate the newrelic browser agent with NextJS using the copy paste method?

[matewilk]

Sure,

I've found some bits and pieces of this information in the local history of this repo (and combined it with the commit you've mentioned about)

Here it goes:

New Relic Browser Agent Integration

1. Log in to your New Relic account (if you don't have it yet, register for free here)
2. Go to https://one.newrelic.com and (in the top right corner) select Add more data
3. Select New Relic Browser from Browser metrics section
4. Tick Copy/Paste Javascript code, enter your app name, and click Enable
5. You should now have the New Relic Browser snippet available to you which should look something like this:
6. Copy/paste the entire snippet to a .js file in your project (you can find the example in this repo under /newrelic/newrelic-browser-agent.js - see here)
7. Important - modify the script:
   1. remove <script> tags from the beginning and the end of the script
   2. replace all "\" with "\\" - escape the escape character
8. Create a new React Component and import the New Relic Browser agent to the file
   1. see the example here - you can simply copy/paste it (remember to change the path to your New Relic Browser agent script if it differs)
9. Add the newly created component (in this case NewRelicSnippet) to the Head of your app entry point, usually _app.tsx under pages directory
   1. see how to do it here (file on the left of the commit history)
   2. IMPORTANT - I'd rather use _document.tsx file
10. Congratulations, you have now successfully integrated New Relic Browser agent with NextJs framework!

THIS MIGHT BE VERY USEFUL TOO: In addition you can find a lot of useful information about injecting the browser agent script here (sorry, totally forgot about this thread) - probably it's a good idea to read through the whole thread from the start so you know the context.

[Fanoflix]

Thanks @matewilk! This is exactly what we needed. We did figure out most of the steps you detailed by looking at the commit history, but this helps a lot. Any particular reason for using _document.tsx in point 9 - ii ?

[matewilk]

Hey @Fanoflix

Yeah, if you look at the comment I linked to there is an explanation on why it's better to use _document.tsx

You'll also find an example there on how to use it with beforeInteractive strategy with Next.js's <Script> if you wish to.

[ptahdunbar]

Just a note that this approach needs refreshing for next13+ using the app directory model.

The root app/layout.js replaces the _app.js and _document.js