Service characterization: Optimize your web telemetry

Make sure you have the web telemetry you need to detect and resolve poor user experience. This guide will help you do that by showing you how to check that you're getting the right data and that 브라우저 모니터링 is configured for you to make the most of it.

Prerequisites

• Your web application is instrumented with New Relic Browser
• Your web application is configured for Pro + SPA

In this guide, you will check and tune the following:

• Browser application naming and sub-account placement
• JS errors
• Page views
• AJAX
• Distributed tracing
• Deployments
• Custom attributes

Tune Browser application naming and sub-account placement

How's your naming and data organization?

1. Web application instrumentation from different environments (dev/qa/production) should report into different Browser applications.
2. Developers, operations, and product owners can work out the following using sub-account names and Browser application names:
   • Which environment a Browser application supports (such as Dev, QA, and production environments).
   • The purpose of a Browser application (customer facing, internal facing, website, website component, region or regions, etc).

Need to make a change?

1. If you have data from multiple environments reporting into one Browser application, you can create new Browser apps and update the JavaScript snippet in your pages to report the right app.
2. You can change the name of your browser application following the renaming guide

Tune JavaScript errors

JavaScript errors negatively impact user experience and SEO by disrupting the page load process, displaying errors, and preventing the user from completing an action. Make sure you have the data you need to track and resolve JavaScript errors.

1. Make sure JavaScript errors are being captured.

   Via the UI

   Open your web application in Browser. Open the Errors view under the left hand menu and verify that you can see JavaScript errors. If your application doesn't get a lot of traffic you may need to go back 24 hours or longer to see errors.

   Via NRQL

   Run the following query:

   SELECT count(*) FROM JavaScriptError WHERE appName = 'MyApp' SINCE 1 WEEK AGO

   카피

   A 0 count means that no JavaScript errors have been captured.

   You can check all your web applications in a sub account by running the following:

   SELECT count(*) FROM JavaScriptError FACET appName LIMIT MAX SINCE 1 WEEK AGO

   카피

   Web applications not present in the results have not reported JavaScript errors.

You can resolve missing JavaScript errors by:

• Making sure your Browser agent is up to date. Newer Browser versions may capture JavaScript errors previously overlooked for one reason or another.
• Making sure the Browser agent is places in the <HEAD/> tag of your pages. You can use Chrome developer tools to verify this.
• Following these instructions for missing AngularJS errors.
• Checking to see if your site uses an error handler that’s handling errors before the Browser agent gets the chance to see them.
• Reviewing what's supported for JavaScript errors.
• Using the noticeError API to capture missing errors.

2. Check that your JavaScript errors have event logs. The event log shows the browser interactions, AJAX calls, and traces that led up to a JS error. This can help you troubleshoot the root cause of errors.

   Via the UI

   To check you are capturing event logs, go to the JS Errors tab. Drill down into several different errors to verify event logs appear.

   Follow these instructions to troubleshoot missing event logs.

3. Make sure your JavaScript errors have stack traces.

   Via the UI

   Drill down into several errors via the JS Errors tab. Stack traces will appear under the error event log.

   Via NRQL

   Run the following query:

   SELECT count(*) FROM JavaScriptError WHERE appName = 'MyApp' AND stackTrace IS NOT NULL AND stackTrace NOT LIKE '' SINCE 1 WEEK AGO

   카피

   A 0 count means that no JavaScript errors have been captured.

   You can check all your web applications in a sub account by running the following:

   SELECT count(*) FROM JavaScriptError WHERE stackTrace IS NOT NULL AND stackTrace NOT LIKE '' FACET appName LIMIT MAX SINCE 1 WEEK AGO

   카피

   Web applications not present in the results do not have JavaScript errors with stack traces.

Follow these instructions to troubleshoot missing stack traces. Or, follow these instructions if you can see stack tracks but can't un-minify them.

Check page view grouping

Page URLs in the Page views UI are automatically grouped to help you manage page performance better. The algorithm that determines the automatic grouping runs when your web app is instrumented for the first time. If your web traffic today is much different from when the app was first instrumented, you may be seeing too few groups.

SELECT count(*) from PageView WHERE appName = 'MyApp' AND browserTransactionName LIKE '*.*.*%/%' or browserTransactionName LIKE '%.%.%/*/*/*/%' or browserTransactionName LIKE '%.%.%/*/*/*' or browserTransactionName LIKE '%.%.%/*/*/%' FACET pageUrl limit 100 SINCE 1 WEEK AGO

SELECT count(*) from PageView WHERE browserTransactionName LIKE '*.*.*%/%' or browserTransactionName LIKE '%.%.%/*/*/*/%' or browserTransactionName LIKE '%.%.%/*/*/*' or browserTransactionName LIKE '%.%.%/*/*/%' FACET browserTransactionName, pageUrl limit 100 SINCE 1 WEEK AGO

Use Segment allow lists to tune how your page view URLs are being grouped.

Check AJAX call grouping

AJAX calls are grouped to make it is easier to navigate them at scale. Sometimes there are so many AJAX calls that navigating them by individual request URL is too cumbersome. Follow these steps to check whether or not you need to adjust AJAX grouping.

SELECT count(*) FROM JavaScriptError WHERE appName = _your app name_ AND stackTrace IS NOT NULL AND stackTrace NOT LIKE '' SINCE 1 WEEK AGO

SELECT count(*) FROM JavaScriptError WHERE stackTrace IS NOT NULL AND stackTrace NOT LIKE '' FACET appName LIMIT MAX SINCE 1 WEEK AGO

Use Segment allow lists to tune how your AJAX Requests are being grouped.

Enable distributed tracing

Distributed tracing in Browser helps you improve AJAX performance by tracing requests to the backend all the way to the final endpoint. Tracing information is useful for understanding which applications are impacting user experience. You can use this information to address services issues yourself or delegate to the team responsible.

Set up deployments

Use NerdGraph to track changes in your web application so you can see the impact of change against performance KPIs, conversions, and user engagement.

Add Custom attributes

Use custom attributes to filter and group data. Custom attributes are optional but provide a lot of value. Below are the most commonly recommended attributes. Many customers add more.

Additional custom attributes for retailers

Value Realization

Following the steps in this guide ensures that your team is getting maximum value from New Relic Browser. It ensures you are:

1. Getting the most value from the data you're collecting
2. Seeing opportunities to optimize
3. Able to quickly triage and troubleshoot
4. Getting the data you need to create real-time business KPI dashboards