Instrument your application with our browser agent

lab

This procedure is part of a lab that teaches you how to monitor your application with New Relic.

Each procedure in the lab builds upon the last, so make sure you've completed the last procedure, Instrument your application with our APM agent, before starting this one.

You've installed our Node JS APM agent, and this provides server-side performance data. Because your Angular app is running in the browser, you also want to insight 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 more data.

Add more data

Step 3 of 5

Click New Relic Browser.

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 Yes. (Search your applications), search food-me app, 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

Step 5 of 5

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

<!DOCTYPE html>
<html lang="en" ng-app="foodMeApp">
  <head>
    <meta charset="utf-8" />
    <title>FoodMe</title>
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="css/bootstrap-united.css" />
    <!-- Paste your javascript code snippet here -->
  </head>
  <body>
    <div class="container">
      <div class="navbar" ng-controller="NavbarController">
        <div class="navbar-inner">
          <a class="brand" href="#/">FoodMe</a>
          <ul class="nav">
            <li ng-class="{active: routeIs('/')}"><a href="#/">Home</a></li>
            <li ng-class="{active: routeIs('/how-it-works')}">
              <a href="#/how-it-works">How it works</a>
            </li>
            <li ng-class="{active: routeIs('/who-we-are')}">
              <a href="#/who-we-are">Who we are</a>
            </li>
          </ul>

          <ul class="nav pull-right">
            <li ng-class="{active: routeIs('/help')}">
              <a href="#/help">Help</a>
            </li>
          </ul>
        </div>
      </div>

      <ng-view></ng-view>
    </div>

    <!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script>
-->
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-resource.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/CheckoutController.js"></script>
    <script src="js/controllers/CustomerController.js"></script>
    <script src="js/controllers/MenuController.js"></script>
    <script src="js/controllers/NavbarController.js"></script>
    <script src="js/controllers/RestaurantsController.js"></script>
    <script src="js/controllers/ThankYouController.js"></script>
    <script src="js/directives/fmDeliverTo.js"></script>
    <script src="js/directives/fmCheckboxList.js"></script>
    <script src="js/directives/fmRating.js"></script>
    <script src="js/services/alert.js"></script>
    <script src="js/services/customer.js"></script>
    <script src="js/services/localStorage.js"></script>
    <script src="js/services/cart.js"></script>
    <script src="js/services/Restaurant.js"></script>
  </body>
</html>

app/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

$node ./server/start.js
Go to http://localhost:3000/

Restart your load generator, as well.

bash

$python 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 2

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

Arrow pointing to Browser

Step 2 of 2

Select food-me.

Arrow pointing to food-me 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.

APM view of food-me

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. Now, it's time to get insights from your data.

lab

This procedure is part of a lab that teaches you how to monitor your application with New Relic. Now that you've instrumented your application with our browser agent, explore your data.