Checklist

New Relic Browser Best PracticesBrowser monitoring tips & tricks that every user should know

1 Use the Browser SPA agent for deeper visibility

Modern websites are complex, with dynamic content and sophis-

ticated logic. To see deeper into your user interactions, enable

the single-page application (SPA) agent for New Relic Browser.

You’ll get deeper visibility into your user actions, and the under-

lying webpage events behind them. This framework-agnostic agent

is not only for single-page application frameworks like React,

Angular, Ember, or Backbone, but also for custom frameworks and

any other pages with dynamic content. Advanced timing analytics

provide more granularity into Navigation Timing Specification API

sub-timings beyond page rendering or DOM processing, with

detailed performance data filtering useful for understanding all

page lifecycles.

HOW TO DO IT:

1. From the New Relic Browser app list, select an app, then

select Settings > Application Settings.

2. Select Pro + SPA.

3. Click Save application settings.

Use APM auto instrumentation over copy/paste

If you’re also a New Relic APM customer, we recommend enabling

automatic instrumentation where possible, as this will automatically

inject the New Relic Browser JavaScript agent into your frontend

for you. Not only will the Browser agent remain automatically up

to date with this approach, using these products together helps

unify frontend to backend visibility. For example, you’d be able

to link frontend AJAX calls to their corresponding backend trans-

action, and to align your frontend and backend data together in

an Insights dashboard.

Note: Depending on your backend framework or CDN, a copy/paste

approach may be the better strategy. Just remember that it’ll

require periodic updating.

HOW TO DO IT:

1. Select Settings > Application Settings.

2. Select Enable via New Relic APM.

3. Select Pro + SPA Agent.

4. Click Save application settings.

Customize your Apdex threshold

New Relic uses Apdex, an industry-standard metric, to measure

users’ satisfaction with the response time of your applications.

Apdex converts many measurements into one number on a uniform

scale of 0 to 1 (0 = no users satisfied, 1 = all users satisfied).

Apdex T is the central value for Apdex—it is the response time below

which a transaction is considered “Satisfactory.” You can define

Apdex T values for each application, with separate values for app

server and end-user browser performance. (Did you know? Many

modern websites are bottlenecked primarily in the frontend

browser, accounting for 90% or more of pageload times.)

Get more out of New Relic Browser, with deeper visibility into your websites and your users. Here are 10 best practices to help you find problems

faster and deliver a better experience to your customers with real user monitoring.

2

3

New Relic Browser Best Practices: Browser monitoring tips & tricks that every user should know

While a suggested T-value threshold is 5 seconds, we encourage

you to customize your Apdex T value to fit the needs of your

users and application. For example, an ecommerce site may want

to have a lower T value to reduce bounce rates from potential

buyers frustrated by a slow experience, compared to an internal

employee application. However, the goal is to continually lower

T-values over time to improve your digital customer experience.

HOW TO DO IT:

1. From the New Relic Browser app list, select an app, then select

Settings > Application.

2. Set the Apdex T value (in seconds) for this application.

3. Click Save application settings.

Create and evaluate alert policies

What happens if your Apdex score exceeds your threshold? You

want to be alerted whenever this happens, so that you can

investigate what is causing the issue before you lose any customers.

New Relic provides unified alerting across all our products, includ-

ing New Relic Browser, so that you’ll always be in the know. We

recommend setting up alerts to monitor your Apdex score, along

with these sample alerts to get you started:

• Apdex score: Alert if score is below 0.8 for 5 minutes. (If

the Apdex score is below 0.8, that means 20% or more

of your users are not “satisfied” with their experience on

your website.)

• Page load time: Alert if median page load time is above

10 seconds for 5 minutes. (If the median page load time

begins to spike, that suggest that something may be wrong

with your web page causing it to significantly slow down.

This complements alerting on your Apdex score.)

• JS errors: Alert if error rate is above 5% for 5 minutes. (If

your frontend error rate starts spiking, particularly after

a deployment, you may have introduced bad JavaScript

into your frontend that should be fixed.)

HOW TO DO IT:

1. From Alerts, click on Alert policies and then (+) New Alert

Policy to create a new alert policy.

2. Click on Create a condition to create your first condition, then

select Browser for your product and the Metric for the

condition (which should be the default). Then click Next,

select entities.

3. Click the checkbox for the applications you want to alert on,

and click Next, define thresholds.

4. Pick the metrics of interest and their thresholds that determine

when to trigger an alert.

Alert on anomalous behaviors and events

While some metrics can be easily tracked against specific thresh-

olds, other types of data can be more cyclical or have variable

ranges for what’s considered healthy. Traffic throughput is a good

example of this; it can have significantly cyclicity, but large traffic

drops or spikes may be important indicators of a breakage prevent-

ing user traffic or a DDoS attack spiking traffic. Baseline alerts

can be helpful for creating an expected ‘band’ of normal activity

to create more signal to noise in your alerting.

HOW TO DO IT:

1. From Alerts, click on Alert policies and and (+) New Alert

Policy to create a new alert policy.

4

5

New Relic Browser Best Practices: Browser monitoring tips & tricks that every user should know

2. Click on Create a condition to create your first condition,

select Browser for your Product and the Metric Baseline for

the condition (which should be the default). Then click Next,

select entities.

3. Click the checkbox for the applications you want to alert on,

and click Next, define thresholds.

4. Pick the Page view throughput and use the slider to define

the normal range you want to trigger the alert.

Integrate alerts into your workflows

With the different alerting policies that you’re setting up, you’ll

want to make sure to take advantage of the different alert notifi-

cation channels available so that they’re integrated into team

workflows. After all, what good are alerts if no one knows about

them? You can route alerts through Slack, HipChat, JIRA, PagerDuty,

Campfire, Webhook, email, and more. You also have the opportunity

to align alert notifications with your response processes, such as

integrating with ChatOps or linking runbooks to your alerts. Be

sure to evaluate alert policies on a regular basis to ensure that

they are always valid.

HOW TO DO IT:

1. From Alerts, click on Notification Channels. You can set up

different notification channels, which can then be used

within different alerting policies.

Create your own dashboards using New Relic Insights

New Relic Browser provides an out-of-the-box curated experience

to quickly triage issues, but you can also create bespoke dashboards

with your frontend data in New Relic Insights. Build unique real-time

overviews of what’s going on in your frontend, and see how it fits

with the rest of your technology stack. For example, you can:

• Create a browser-specific breakdown of percentiles,

durations, and page views:

• Break down route change performance into percentiles:

• Compare frontend performance to backend performance

in APM:

These individual widgets can be added together to create a team

dashboard that’s shared across different engineering teams and

the company. You can bring together web and mobile application

data, backend data, infrastructure data, synthetic data, and more,

all on a single custom dashboard across the New Relic Digital

Intelligence Platform.

7

6

SELECT average(duration), percentile

(duration, 50, 75,95) as ‘Percentile’, count

(*) as ‘Pageviews’ FROM PageView WHERE

userAgentName=’Chrome’ SINCE 1 week ago

SELECT count(*) as ‘Route Change’, average

(duration) as ‘Avg PageLoad’, percentile

(duration ,50,75) as ‘%’ , average (jsDuration)

as ‘JS Duration’ FROM Browser Interaction

FACET targetUrl where category = ‘Route

change’ SINCE 1 day ago

SELECT average(duration) as ‘Avg Frontend

Duration’, average(backendDuration) FROM

PageView SINCE 2 minutes ago UNTIL 10

seconds ago TIMESERIES

New Relic Browser Best Practices: Browser monitoring tips & tricks that every user should know

HOW TO DO IT:

1. Visit insights.newrelic.com.

2. Paste the query into the SQL> query bar and click Run. Type

in a Chart title, click Add to a new dashboard, and type in a

Dashboard title.

3. Click All dashboards to see your new dashboard. (Learn more

in the Docs.)

Group your data into meaningful categories

Different websites have different URL architectures, which can vary

depending on content structure, technology framework, or SEO

strategy. For example:

• website.com/product/widget-name

• website.com/gallery?product=109832

• website.com/gallery/housewares/lamps/widget-name

• website.com/product#widget-name

URL structure possibilities are endless, and New Relic Browser

provides an automatic grouping algorithm to ‘categorize’ that

data into different URL groups. We recommend using URL grouping

whitelists to customize how your data is grouped together, which

will make the corresponding performance information more useful

and aligned to your website architecture. If the data in Browser

at first seems to too high level to be useful, creating a URL groupings

will disaggregate the data and give you greater granularity to

make it more useful, such as:

• Different page types: product pages vs. search pages

• Different forms, APIs, or user groupings

• Mobile vs. non-mobile

• Authenticated vs. non-authenticated

• Different content delivery networks (CDNs)

HOW TO DO IT:

1. Select Settings > Segment whitelists.

2. In the Whitelisted segments section, click on the + icon.

3. Type in the URL segments you want to appear in groupings

on the page views and AJAX pages.

Make sure you get data only from the right sources

New Relic Browser data is generated from wherever your JavaScript

agent is instrumented, though copies of your agent might become

duplicated, such as through development, staging, or other

environments, resulting in additional data being included from

these sources that you would not want mixed with your produc-

tion data. You can use domain conditions to allow or deny data

from the different website domains you want monitored.

HOW TO DO IT:

1. Select Settings > Domain conditions.

2. If there are no domain conditions in place, select Enable

domain conditions. If conditions exist, select Next, Choose

your Setting.

3. You can select Deny Only or Allow Only to the data you want

collected from the domains you want monitored. Then select

Next, Create Conditions.

4. Enter the domain string conditions that you wish to deny or

allow data collection (maximum 10 conditions).

5. Review and confirm your domain condition settings.

Break down performance across your users, business, and more

By leveraging New Relic APIs, you can add vital context to your

performance data as it relates to your technology, users, and

your business. New Relic Browser and the other New Relic prod-

ucts are built on New Relic Insights, which enables plenty of

customization and extensibility in your dashboarding. Just be

sure to standardize naming for custom events and attributes

across products, such as between Browser and Mobile, for omni-

channel engagement.

8

9

10

New Relic Browser Best Practices: Browser monitoring tips & tricks that every user should know

Here are some examples of what you can measure:

• Build id: Pass in a build number to A/B test differences

between versions

• User id: Manage your VIP customers and track their

experience

• Cart value: Understand how much revenue is at risk when

errors occur during checkout

• Content type: Track the type of content your users are

viewing

• Video playback: See how users are consuming your

media content

The possibilities are endless. And as you can see, this type of report-

ing creates context around how your application performance

impacts the rest of the business.

HOW TO DO IT:

1. Use New Relic APIs to pass custom data about people, things,

money, and more into New Relic Insights.

2. Visit insights.newrelic.com. Query on the custom data that is

now available. (Learn more in the Docs.)

Want more user tips?• View training videos at New Relic University.

• Read the documentation.

• Check out our Tutorials page.

• Ask a question in the New Relic Community Forum.

© Copyright 2016, New Relic, Inc. All rights reserved. All trademarks, trade names, service marks and logos referenced herein belong to their respective companies. 07.2017