AJAX page: Identifying time-consuming calls

New Relic Browser's AJAX page shows recent AJAX requests from browsers to external endpoints (such as HTTP or HTTPS domains). This information helps identify problems with your users' experience when you have time-consuming or failing AJAX calls that update parts of a webpage on your site. For example:

  • Timing problems: Total time percentages, throughput requests per minute (rpm), and average data transfer rates per request can help identify timing problems.
  • Endpoint problems: Status codes related to the requests provide information about the return behavior from the call. A large number of non-200 status codes may indicate a problem with your AJAX endpoints.
  • Specific webpage location problems: If applicable, related session traces allow you to explore AJAX problems within the context of the page where they are loaded.

Access to this feature depends on your subscription level.

Enable AJAX time reporting

If you are using your APM agent to insert the JavaScript snippets, New Relic Browser does not automatically enable AJAX time reporting. To turn on this Pro feature for an app:

  1. Go to rpm.newrelic.com/browser > (select an app) > Settings.
  2. From the Browser agent instrumentation options, select Pro features.
  3. Select Save application settings.
  4. Wait approximately five minutes for information to become available.
  5. Recommendation: If no data appears after five minutes, restart your agent.

You can also enable Pro features from the selected app's AJAX and Browser Overview pages.

View the AJAX requests summary

After you enable the AJAX timing feature, your app's Browser Overview will include the Average AJAX response time chart, and the AJAX page will show detailed information. New Relic automatically filters out all AJAX requests that take longer than two minutes.

Browser AJAX page
Browser > Browser app > (selected app) > AJAX: Use this information to identify problems with your users' experience when you have time-consuming or failing AJAX calls that update parts of a webpage on your site.

To view summary information about AJAX requests:

  1. Go to rpm.newrelic.com/browser > (select an app) > AJAX.

    OR

    To go directly to the AJAX page from the selected app's Browser Overview page, select the link in the Average AJAX response time chart's title.

  2. Optional: Use any of the available Sort by or filter options.
  3. To show summary information for a specific AJAX call, mouse over its name on the list.
  4. To view AJAX performance details for a specific call, select its name.

You may see New Relic Browser's own AJAX calls to your app. This is normal, as New Relic Browser captures all activity during the browser session.

AJAX timing details are not available from end users using IE 7, IE 8, or Chrome for iOS.

View AJAX performance details

When you select a specific AJAX call, its AJAX performance chart shows specific AJAX endpoints either as four time periods or as two time periods. The number of time periods depends on whether there are Cross application tracing headers.

  • Four time periods (Application time, Queue time, Network time, and Callback time): These AJAX calls are made against apps monitored by New Relic APM agents providing CAT headers.
  • Two time periods (Response time and Callback time): These AJAX calls are made against apps that either are not monitored by APM agents, or they are monitored by agents that do not provide CAT headers.
Browser AJAX details
rpm.newrelic.com/browser > (select an app) > AJAX > (selected AJAX call): Here is an example of the details for a specific AJAX call.

Use any of New Relic's standard user interface functions and page functions to drill down into detailed information.

Additional options include:

  • To isolate any of the top color-coded AJAX calls in the charts, mouse over the corresponding color-coded name in the legend.
  • To view performance details about any AJAX request (by chart view or by page view), select its name on the list.
  • To return to the AJAX page, select X (Close).

Troubleshooting tips

Here are some troubleshooting tips for identifying performance problems with your app:

  • Look for large spikes in the AJAX page's Average data transfer by request chart.
  • From the individual call's AJAX performance, look for correlations between high callback time values and data transfer rates.
  • Look for any outlier endpoints, and investigate individual requests made from them.

To examine potential AJAX problems more deeply, select an AJAX transaction, and then select any trace from the Session traces with AJAX table. This allows you to explore AJAX problems within the context of the page where they are loaded.

Browser: AJAX call and related session traces
rpm.newrelic.com/browser > (select an app) > AJAX > (selected AJAX call) > (select a session trace): Here is an example of session trace details for a specific AJAX call.

Time percentage example

The AJAX page includes a Total time percentage chart. When you sort the AJAX category list by Total time percentage, the list shows the percentage for each AJAX category, and the chart shows the top requests with the highest time percentages.

To present this information, New Relic Browser takes the cumulative request time for each AJAX category and divides it by the cumulative request time for all AJAX requests. This helps identify where to optimize response times, because high throughput requests will be favored over low throughput requests.

Calculating time percentages for two AJAX categories

You have two AJAX categories, api1.example.com and api2.example.com. Your api1.example.com is hit 1 time, and it takes 1 second (1000ms) to respond (1 x 1 second = 1 second). Your api2.example.com is hit 500 times, and it takes 1ms to respond (500 x 1ms = 500ms, or 0.5 second).

The cumulative request time for all of your AJAX categories is 1500 ms, or 1.5 seconds. To get the time percentages, divide each AJAX category by the cumulative request time, and then multiply by 100 for the percentage.

So api1.example.com is 67% (1000 divided by 1500, times 100) and api2.example.com is 33% (500 divided by 1500, times 100) of the total time percentage.

Time calculations api1 api2
Number of hits 1 500
Time to respond

1 second (1000ms)

1 hit x 1000ms = 1000ms (1 second)

1 millisecond (1ms)

500 hits x 1ms = 500ms (.5 second)

Cumulative request time for all AJAX categories 1000ms + 500ms = 1500ms (1.5 seconds) 1000ms + 500ms = 1500ms (1.5 seconds)
Time percentage = Category / 1500ms cumulative request time x 100 for percentage 1000ms / 1500 x 100 = 67% 500ms / 1500 x 100 = 33%

For more help

Additional documentation resources include:

Discuss Browser monitoring in the New Relic Online Technical Community! Troubleshoot and ask questions, or discuss JavaScript error reporting or AJAX timing in detail.

If you need additional help, get support at support.newrelic.com.