From 9943b167bf08b81830e61954a56ad310f5223533 Mon Sep 17 00:00:00 2001 From: WriteMayur Date: Wed, 6 Aug 2025 12:06:52 +0530 Subject: [PATCH 1/3] added npm guided flow --- .../install-browser-monitoring-agent.mdx | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx index f812a0577d5..008374697c5 100644 --- a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx +++ b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx @@ -28,10 +28,14 @@ If you haven't done so, you may want to check that your browser app meets our [c ## Install the browser agent [#install] -There are four ways to install the browser agent. Depending on your specific needs, you can: +There are five ways to install the browser agent. Depending on your specific needs, you can: + + Install with `npm` + + Get JavaScript via UI @@ -50,6 +54,22 @@ There are four ways to install the browser agent. Depending on your specific nee + + Go to **[one.newrelic.com](https://one.newrelic.com) > Integrations & Agents > Browser and mobile > Browser monitoring** and follow the instructions to generate the browser npm snippet in the UI. + + + + Get your browser snippet + + + + 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. + + Go to **[one.newrelic.com](https://one.newrelic.com) > Integrations & Agents > Browser and mobile > Browser monitoring** and follow the instructions to generate the browser JavaScript snippet in the UI. @@ -67,8 +87,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).) - 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: From 479d958abcbe11fb44f0589aba48554319cc9b83 Mon Sep 17 00:00:00 2001 From: WriteMayur Date: Thu, 7 Aug 2025 11:11:31 +0530 Subject: [PATCH 2/3] fix the formatting issue --- .../installation/install-browser-monitoring-agent.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx index 008374697c5..3b868476004 100644 --- a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx +++ b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx @@ -33,7 +33,7 @@ There are five ways to install the browser agent. Depending on your specific nee - Install with `npm` + Install with npm From 491cfaba941e4fa2f8ef134bb9a18404ca745e75 Mon Sep 17 00:00:00 2001 From: WriteMayur Date: Wed, 13 Aug 2025 14:17:35 +0530 Subject: [PATCH 3/3] fix the npm tabs --- .../install-browser-monitoring-agent.mdx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx index 3b868476004..e85a53f3145 100644 --- a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx +++ b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx @@ -28,7 +28,7 @@ If you haven't done so, you may want to check that your browser app meets our [c ## Install the browser agent [#install] -There are five ways to install the browser agent. Depending on your specific needs, you can: +There are four ways to install the browser agent. Depending on your specific needs, you can: @@ -47,10 +47,6 @@ There are five ways to install the browser agent. Depending on your specific nee Create JavaScript via NerdGraph - - - Install via NerdGraph and npm - @@ -143,14 +139,16 @@ There are five ways to install the browser agent. Depending on your specific nee Once you have the snippet, add it to the `` tag of your app. - - 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/). - + + + 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/). + + ## 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).