• Log in

Instrument your application with our browser agent

10 min

lab

This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser.

Each procedure in the lab builds upon the last, so make sure you've completed the last procedure, Set up your lab environment, before starting this one.

Your React app is now up and running in the browser. You want to make sure your users always have the best experience on your site. For that, you need insights into your users' experiences, such as their page load times.

To achieve this goal, you need to install our browser agent.

Install browser agent

Step 1 of 5

Navigate to New Relic, and sign in with your account.

Step 2 of 5

On the right side of the upper navigation bar, click Add data.

Add more data

Step 3 of 5

Scroll down to Browser & mobile and select Browser monitoring.

Arrow pointing to New Relic Browser

This opens Get Started with New Relic Browser, which guides you through installing our browser agent.

Step 4 of 5

From Get Started with New Relic Browser, select Copy/Paste Javascript code for your deployment method.

select deployment method

Scroll down to Name your app, select No. (Name your standalone app), name your app Reliqstaurant, and click Enable.

enable browser agent for your app

This gives you a JavaScript code snippet to enable browser monitoring. Copy it to your clipboard.

javascript code snippet to enable browser agent

Tip

Save this code snippet at a place where you could easily find it later. You re-use this code snippet to enable browser monitoring for your application in next procedures.

Step 5 of 5

Open your app in the IDE of your choice.

In public/index.html file of your app, paste the copied javascript snippet inside the <head>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap"
rel="stylesheet"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Reliqstaurants</title>
<!--Replace these lines with your
browser monitoring code snippet -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
public/index.html

Your application is now instrumented with our browser agent.

Restart your application

Now that you've instrumented your application, it's time to restart your local server.

bash
$
npm run build
$
npm run newstart

Restart your load generator, as well.

bash
$
python3 simulator.py

Important

Make sure you're running these commands in the correct terminal windows. If you no longer have those windows, follow the steps in the setup procedure.

View your data

Your app is now sending browser data to New Relic. View this data in New Relic, under Browser.

Step 1 of 1

Navigate to New Relic, select Browser from the top navigation, and select Reliqstaurant.

Arrow pointing to reliqstaurant app

Here, you see Core web vitals, User time on the site, Initial page load and route change, and other performance data from your app.

Browser view of reliqstaurant

You've instrumented your application to send browser data to New Relic using our browser agent. You also see your performance data in New Relic. Next, you use this data to troubleshoot front-end errors with your site.

lab

This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser. Now that you've instrumented your application with our browser agent, debug errors.

Copyright © 2022 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.