Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

Best Practice Guide: Browser

best-practice-guide

#1

Browser Best Practice Guide

New Relic Browser is your first, best step in understanding the impact of your site performance on your customers. If you are looking to improve your customer experience, Browser will help you do that with AJAX insights, SPA support, and tools to help you untangle JS Errors.

We want to empower you and your team to have more insight into each of your applications and, more importantly, know exactly what you need to do to improve their performance.

You may want to start by reviewing these short videos to help you get the lay of the land. Then, in this post, we aim to help you set yourself up for success.

When you have reviewed these best practices, show off your new found skills. Take the Browser Best Practices Quiz to earn your badge.

Organisational tips

Create a naming convention:

When several different applications are on the same account, and each application spans multiple environments (for example, development, test, pre-production, production), it can be hard to find a specific application in your overview dashboard. That’s why we recommend that you establish a naming convention for all your apps to help with search and filtering. Using a convention like <environment>-<appname>-<language> can make it much easier to spot patterns in your data.

Linking APM and Browser apps:

Browser apps that are set up either through APM App Auto-Instrumentation, or manually through the copy/paste method with the Browser JS Snippet can be linked to an APM application, such that you can see your frontend performance statistics in relation to your backend. This is important because a problem in front-end performance may be caused by a back-end issue. By linking apps, you get end-to-end visibility. Through APM Apps you simply need to enable auto-instrumentation. For the copy/paste method you’ll need to select the related APM app in the set up page. Then from either APM or Browser overview page, simply click the linkage button above the response time chart to jump to the back/frontend.

Understanding your data

Understand your visitors with Session Traces:

Every user visit to your site is tracked as a Session, and Browser captures some of those as detailed Session Traces. Session Traces provide a detailed timeline of events, for up to ten minutes, allowing you to see what happened just before and after an error, for example, helping you to solve the problem faster with context.

Track AJAX requests:

New Relic Browser tracks AJAX requests in your webpage in order to help you in identifying slow calls to external endpoints. This is helpful in troubleshooting slow performance, as you can easily see if a call to a particular 3rd party is responding slowly, telling you at a glance whether or not the issue lies in your site, or with the 3rd party your site calls.

Segment Whitelisting:

By default, New Relic will analyse the Browser page view metrics as they are received. Grouping them into formats like: www.foo.com/users/*/profile This groups all profile pages into one metric, rather than filling your account with a new metric for every unique user ID. Segment whitelists allow you to configure the URL paths you need to see. For example if you see users/*, but your site has a path users/edit, you can set up a segment whitelist for edit.

Making that data actionable

Userful Browser NRQL queries:

Insights brings all your data together in one place. NRQL gives you the power to ask the important questions of your data. For example, you can find your slowest, or most frequently visited pages. The Level-Up posts below will provide you with dashboards you can easily set up to start getting the best from your Browser data.

Browser Sourcemaps:

Analysing JS Errors in New Relic Browser is really helpful in understanding the experience your users are having when viewing your site. JS Errors gives you the visibility you need to understand where you can improve your customer’s experience. If you are using minified Javascript though, your JS errors will be hard to decode. The ability to upload sourcemaps in Browser allows you to decode those minified JS Errors, converting your errors into understandable stack traces.

Ready to learn more

Looking for more Browser best practices and tips? Check out the Browser Level Up category.


Show Off Your New Relic Product Knowledge
About the New Relic Browser category