Skip to content

feat: Added new npm guided flow #21431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 13, 2025
Merged

feat: Added new npm guided flow #21431

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9943b16
added npm guided flow
WriteMayur Aug 6, 2025
479d958
fix the formatting issue
WriteMayur Aug 7, 2025
491cfab
fix the npm tabs
WriteMayur Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 28 additions & 12 deletions ...cs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ There are four ways to install the browser agent. Depending on your specific nee

<Tabs>
<TabsBar>
<TabsBarItem id="npm">
Install with npm
</TabsBarItem>

<TabsBarItem id="1">
Get JavaScript via UI
</TabsBarItem>
Expand All @@ -43,13 +47,25 @@ There are four ways to install the browser agent. Depending on your specific nee
<TabsBarItem id="3">
Create JavaScript via NerdGraph
</TabsBarItem>

<TabsBarItem id="4">
Install via NerdGraph and npm
</TabsBarItem>
</TabsBar>

<TabsPages>
<TabsPageItem id="npm">
Go to <DNT>**[one.newrelic.com](https://one.newrelic.com) > Integrations & Agents > Browser and mobile > Browser monitoring**</DNT> and follow the instructions to generate the browser npm snippet in the UI.

<ButtonGroup>
<ButtonLink
role="button"
to="https://onenr.io/0MRNpYqNqQn"
variant="primary"
>
Get your browser snippet
</ButtonLink>
</ButtonGroup>

Once you have the snippet, paste it at the first line of your source file, before any other code. This ensures that the browser agent is loaded before any other scripts execute.

</TabsPageItem>
<TabsPageItem id="1">
Go to <DNT>**[one.newrelic.com](https://one.newrelic.com) > Integrations & Agents > Browser and mobile > Browser monitoring**</DNT> and follow the instructions to generate the browser JavaScript snippet in the UI.

Expand All @@ -67,8 +83,6 @@ There are four ways to install the browser agent. Depending on your specific nee

For more detailed information about the placing the snippet, see [JavaScript placement requirements](/docs/browser/new-relic-browser/page-load-timing-resources/instrumentation-browser-monitoring#javascript-placement).

(If you'd like to install the browser agent via npm, see our [`@newrelic/browser-agent` package](https://www.npmjs.com/package/@newrelic/browser-agent).)

<Collapser
id="browser_delay"
title="Delay browser monitoring"
Expand Down Expand Up @@ -104,7 +118,7 @@ There are four ways to install the browser agent. Depending on your specific nee
<TabsPageItem id="2">
With an APM agent, you can deploy browser monitoring without manually adding the snippet to your code. When you restart the agent, it automatically uses the latest version of the browser agent.

If you're using an APM (application performance monitoring) agent to monitor the backend of your browser app and you've got a non-[SPA](/docs/browser/single-page-app-monitoring/get-started/introduction-single-page-app-monitoring) app, then we recommend using this method.
If you're using an APM agent to monitor the backend of your browser app and you've got a non-[SPA](/docs/browser/single-page-app-monitoring/get-started/introduction-single-page-app-monitoring) app, then we recommend using this method.

There are specific steps for each APM agent:

Expand All @@ -125,14 +139,16 @@ There are four ways to install the browser agent. Depending on your specific nee
Once you have the snippet, add it to the `<head>` tag of your app.
</TabsPageItem>

<TabsPageItem id="4">
If you want to automate browser monitoring deployment across multiple web apps, you can use NerdGraph and our browser agent npm package to configure and deploy the agent as part of your application build process.

For more on this, see [instrument multiple apps with npm and NerdGraph](/docs/apis/nerdgraph/examples/combining-npm-nerdgraph/).
</TabsPageItem>
</TabsPages>
</Tabs>

<Callout variant="important">

If you want to automate browser monitoring deployment across multiple web apps, you can use NerdGraph and our browser agent npm package to configure and deploy the agent as part of your application build process.

For more on this, refer to [instrument multiple apps with npm and NerdGraph](/docs/apis/nerdgraph/examples/combining-npm-nerdgraph/).
</Callout>

## What's next? [#whats-next]

When you've installed the browser agent, wait a few minutes and look for the data in [our browser monitoring UI](https://one.newrelic.com/nr1-core?filters=%28domain%3D%27BROWSER%27%20AND%20type%3D%27APPLICATION%27%29&state=1f7bae2d-dd3a-0027-3079-b60bcd19ded9&_gl=1*15f78ub*_ga*MTE0MTA2MTA5MS4xNzE4OTI0MDkw*_ga_R5EF3MCG7B*MTcyMTMxMzk2MC41Ny4xLjE3MjEzMTg2MzcuNDcuMS4xMDYwNTI3Njcw).
Expand Down
Loading