Advertisement
  1. Code
  2. New Relic
Code

Front-End Monitoring with New Relic Browser

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Performance Monitoring With New Relic.
Rapid Website Deployment With Django, Heroku & New Relic
Using New Relic to Monitor WordPress Performance
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Final product image
What You'll Be Creating

Most analytics services operate by recording only basic information about your visiting users e.g. the visited url, the referring url, the computer operating system and the time spent on the page before leaving. That is, many analytics services provide a basic level of information, but much more happens in the client's browser after the page is loaded such as subsequent Javascript and Ajax calls. Thus, there's a lot of room for innovation, which is where New Relic's Browser service comes into play.

New Relic is a performance monitoring service which runs with a variety of server and language technologies and Browser runs its analysis on your users' own computers and devices in their browsers. In doing so, it gives you a picture of your actual users' experience with your product. New Relic Browser is the only monitoring product that does this.

New Relic Browser monitors full page life cycle data—well beyond the initial page load. For each end user page load, New Relic captures:

  • Time spent in the front end (browser)
  • Code and events executed in the browser (JavaScript, Ajax, and end-user interactions)
  • Time spent in the back end (network and web app)
  • Geographic origin
  • Browser type and version, and operating system

You can view the data globally across all users and see it sliced and diced by webpage, browser, user session, and location.

Browser can help you identify client-side problems that no other monitoring service can. And, it can help you identify and isolate problems with specific browsers, versions or geographic network locations. In fact, the New Relic team wrote a blog post about the crazy things it uncovered about end users' browsers during beta testing, such as malware installations and quirky Chrome behavior.

Getting Started

New Relic Browser - Go beyond the page load

To get started, you'll need to register for your free account at New Relic:

Register for New Relic Browser

If you're already using New Relic, perhaps from our other tutorial about WordPress and W3 Total Cache, you may need to activate the Browser Pro tutorial. Sign in and look for the "add me to the Browser Pro trial" button. This will activate the 30 day free trial for the Browser Pro features.

Once you've completed registration, follow the installation instructions on the page appropriate for your registration. I'm using Ubuntu 14.04. New Relic offers advanced installation instructions for most languages.

Installation of New Relic

For my Ubuntu installation, it goes like this. The WordPress W3TC New Relic installation works a bit differently.

Add the New Relic apt repository:

Trust the New Relic GPG key:

Update and local package list and install New Relic:

If you're using the standard New Relic setup, it will be:

Configure and launch the system monitor. If you're using the generic New Relic setup, do this:

Start the New Relic daemon:

Whichever approach you use, restart your web server:

After a few minutes, you should see the red message on the setup page indicating that data is flowing into New Relic from your server. Cool, huh?

Installation of New Relic Complete

After this, you can setup New Relic Browser. There are two ways to go about doing this:

  1. You can install the application via an APM agent on the back end and then enable the pro trial from within the app.
  2. You can install the New Relic Browser through a standalone method. This will generate the JavaScript code that can be injected into the header of a page and that will begin collecting browser data with no back-end deploying required.

Both of these options are documented here.

Learning from Browser

Visit the Browser product page to see the data it collects. Navigating the Browser app is quite simple using the left side dashboard. I'm showing it below because I've omitted it from the screenshots that follow (to provide more screen real estate for the content).

The New Relic Browser Dashboard

The Overview

The overview is the main high level view for Browser giving you a birds-eye view of performance issues that may or may not be occurring. The overview is a great place to find issues that deserve deeper inspection.

It's essentially a real time view of actual page visits, breaking down performance by time spent in the network, web server, DOM processing and page rendering.

The New Relic Browser Overview Dashboard

The Apdex score gives you a quantitative measurement of the usability experiences of your site based on response time i.e. the ratio of satisfactory response times to unsatisfactory response times).

In the Overview, you can click on any item that appears to be performing poorly. Read more about using the Overview page.

Session Traces

Session traces give you visibility into the entire lifecycle of a web page including user interactions, asset loading, iframes, time spent waiting for Ajax calls, errors and more - tracking the real experience of a real user from start to finish. 

Not only do traces identify problems - but they can show you what the user did before and after the error occurred. 

New Relic Browser Session Traces

Session traces help you understand:

  • How users experience your page load, including time to DOM load, time waiting for Ajax requests to complete, and the user's interactions with the page
  • How the New Relic metrics reflect your end users' experiences
  • The sequence of JavaScript and browser events, which take longer than others, and when each event occurs
  • Where bottlenecks occur, and what may be causing them
  • Why one page load may be slower than others, by providing the context for individual events during a session

Click on any page and you get a detailed breakdown of activity in any particular user's page visit. It's pretty amazing actually - and super helpful for diagnosing trouble. 

The New Relic Browser Session Traces Detail View
You can see exactly what was occurring in a particular user's browser at any particular moment. Session traces give you detailed and intuitive visualization of all events in the user's session can help pinpoint problem areas and easily identify solutions. Read more about using session traces.

Page Views

Page Views shows you detailed performance by the most frequently accessed pages on your site:

The New Relic Browser Page Views

When you drill down, you can see performance of the individual files being loaded by your site:

The New Relic Browser Detailed Page Views

Read more about interpreting page view graphs.

Ajax

The Ajax page allows you to see what's happening with any interactive calls that you have on the page helping identify problems with your users' experience when you have time-consuming or failing calls:

The New Relic Browser Ajax Dashboard

Note that Browser does not automatically record Ajax data. You need to turn it on per app in the New Relic settings area. Read more about the Ajax dashboard.

JavaScript Errors

The Browser JavaScript errors dashboard lets you quickly see what errors are happening in your live production JavaScript over time, on which browsers. You can investigate errors based on the number of times each one occurred and the number of unique page loads that encountered that error. 

This allows you to identify the errors that are impacting real users' experiences on your site; it's an especially powerful way to learn of JavaScript errors that aren't appearing in your own testing - or on browsers that you might have excluded from your testbed.

The New Relic Browser JavaScript Errors Dashboard

Again, you need to activate javascript reporting in the New Relic settings area and there are some issues with privacy and security with this feature. Be sure to read more about using the JavaScript Errors dashboard before activating it.

Browsers

New Relic Browser also lets you see the performance of your website across different browsers.

The New Relic Browser Browser Analysis

Read more about using the Browsers dashboard.

Geography

The Geography dashboard shows you performance scores of end users' actual experience from around the world. You can select specific geographic regions, such as countries or states, and then you can drill down to detailed information about page load performance and historical performance.

The New Relic Browser Geography Analysis

This can be very helpful in identifying otherwise difficult to discover network problems. Read more about using the Geography dashboard

Looking Ahead

I hope you've found this overview to be intriguing. New Relic Browser brings some very powerful and sophisticated analysis and debugging tools to everyone's fingertips.

The New Relic Browser Pro Trial last for 30 days. While you can use the New Relic Browser lite monitoring service for free (and is included with all New Relic APM packages), you'll need to upgrade to the Pro plan (starting at $99/month for 500,000 page views) to keep the Browser service.  It's also important to occasionally update New Relic and check on its log files. Review the New Relic maintenance guide.

If you have any questions or suggestions, please post them in the comments. If you'd like to keep up on my future Tuts+ tutorials and other series, please visit my author page or follow @reifman.

Related Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.