New Relic Browser best practices guide

Browser monitoring tips & tricks that every user should know

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.

1. Use the Browser SPA agent for deeper visibility

Modern websites are complex, with dynamic content and sophisticated 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 underlying 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
browser-spa.png
Change your New Relic Browser settings to switch to SPA

2. 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 transaction, and to align your frontend and backend data together in an Insights dashboard.

Depending on your backend framework or CDN strategy, 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
browser-auto-instrument.png
New Relic Browser > Settings > Application Settings

3. 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. (Note that many modern websites are bottlenecked primarily in the frontend browser, accounting for 90% or more of pageload times.)

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.
browser-apdex.png
New Relic Browser > Settings > Application

4. 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, including 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.
browser-alerts.png
alerts.newrelic.com > Alert policies > New alert policy

5. Alert on anomalous behaviors and events

While some metrics can be easily tracked against specific thresholds, 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 preventing 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.
  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.
browser-alerts-anomalies.png
New Relic Alerts > Alert policies > New alert policy

6. Integrate your 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 notification 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.
Browser alerts notifications
New Relic Alerts > Notification channels

7. 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

    SELECT average(duration),percentile(duration,50,75,95) as 'Percentile', count(*) as 'Pageviews' FROM PageView WHERE userAgentName='Chrome' SINCE 1 week ago
  • Break down route change performance into percentiles

    SELECT count(*) as 'Route Change', average(duration) as 'Avg PageLoad',percentile(duration,50,75) as '%' ,average(jsDuration) as 'JS Duration' FROM BrowserInteraction FACET targetUrl where category = 'Route change' SINCE 1 day ago
  • Compare frontend performance to backend performance in APM

    SELECT average(duration) as 'Avg Frontend Duration', average(backendDuration) FROM PageView SINCE 2 minutes ago UNTIL 10 seconds ago TIMESERIES

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.

browser-insights-dashboard.png
New Relic Insights > (selected dashboard)

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.)

8. 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 grouping 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.
browser-segment-whitelists.png
New Relic Browser > Segment whitelists.

9. 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 production 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.
browser-domain-conditions.png
New Relic Browser > Domain conditions.

10. Breakdown 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 products 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 omnichannel engagement.

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 reporting 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.)
browser-insights-dashboard-breakdown.png
New Relic Insights > (selected dashboard).

Want more user tips?

Recommendations for learning more: