Passer au contenu principal

 Subscribe

We’re excited to announce that Application Insights will now automatically tell you about the performance of AJAX calls made by your web page apps. Many modern web apps load their basic structure, then use AJAX calls to load content. Failed or slow AJAX calls leave the users looking at empty web parts or stuck progress bars.

With this new feature, you’ll be able to see whether and how often your AJAX-dependent features cause problems. Best of all, you don’t have to do any additional configuration to make it happen. Telemetry about AJAX calls is a function of our JavaScript web client SDK, so make sure you’ve set up your web pages for Application Insights.

Diagnosing AJAX issues

How can you find out that you’ve got issues caused by AJAX calls? And how can you use the new features to help you fix them?

Open the browsers blade by clicking Settings, Browsers; or click through the browsers chart, Page View Duration, on the service overview blade.

The three charts: Dependency Calls, Dependency Failures and Dependency Duration, give a nice overview of how your AJAX calls are behaving. Drill into any of these charts to gather more insights.

Note: If you do not see these new charts select the Restore Defaults option.

3charts

In this case, the dependency is the AJAX server. We track AJAX calls from the browser in the same way that we track other dependencies in the server. If you open the Filters for these charts, you’ll see that we filter on device.type = “Browser.”

How can you use these charts?

Dependency Duration: Use the Dependency Duration chart to see how long responses are taking. You can decide what acceptable call durations would be for your application and compare that to the durations you see on the Dependency Duration chart.

An alternative approach would be to insert code to time how long it takes to complete a response to the user, then report it in trackMetric calls. But that would involve investing in some code, whereas you get the AJAX call durations without writing anything. Since AJAX calls are likely to be the longest and least reliable part of an operation, it’s usually enough to measure those alone. So although the exact way to monitor your app’s response time involves writing some app-specific code, this general method is much easier and almost as effective.

Dependency Calls: The Dependency Calls chart provides quick access to the number of calls made. Compare the Dependency Calls chart to Dependency Failures to gain an idea of your failure rate.

Dependency Failures: Depending on where the failure is, this typically indicates customer dissatisfaction. Anything with a response code of 400 or higher is counted as a failure. Filter the charts by URI to compare the total count of calls for that URI with the number of failures, to see how often it happens.

Under the Dependency charts there are a couple grids:dependencybydependency

Average of Page view duration by Operation name: This grid provides the average amount of time your customer is waiting on a page to load. Drill into a specific operation name to gain more insights and discover what's slowing you down. 

Total of Dependency calls by Dependency: This grid shows AJAX requests grouped by AJAX server name. Click through any chart for more detail. Some web apps just send AJAX calls to their home server, but others call on other servers. If your app is one of the latter, you’ll find it useful to look at this grid.

Slow page load

If your page makes AJAX calls synchronously while it’s loading, slow responses can be a cause of slow page loads.

On the Browsers page, there’s a grid showing Average of Page view duration by Operation Name. It shows page load times at a glance. If any page sticks out as slow to load, click through to see a blade specific to that page. Now you can see the same set of charts showing AJAX dependency calls, dependency failures, and duration but filtered just for this page name. You can drill even further into any single page view blade. ajax_3

From this, you can easily determine whether the slow page loads are caused by the AJAX calls, or by something else.

Individual page load details blade

To help diagnose the problem, you can inspect individual instances of page loads. In addition to other details, there is now an added section: AJAX calls. This shows the AJAX calls made on this page, allowing you to see the calls, how long they took and how successful they were.

individual_page_load_details_blade

AJAX dependency blade

From the single page request details blade you can select a single AJAX call. Selecting a call will open a new dependency blade for this AJAX call. Here you can see specific properties for this AJAX call including full URL. Also on this blade in the Related Items section, you'll find a link to the Page View Blade that this AJAX call was made on. If you landed on an AJAX dependency blade via search, you may want to look into at the page view blade. Because AJAX dependencies are treated the same as other dependency types they are displayed similarly.

ajax_details_blade

Data quota

Depending on your application, collecting AJAX dependencies could result in a steep increase in your data collection rates. This increase could possibly cause your application to reach its quota sooner.

To see the breakdown of your data volume by data type go to settings and select Quota and Pricing.

pricing_ajax

You can click into charts to see more details for certain data types. AJAX collection began on December 23, 2015. If you notice a large spike in dependencies around that date, it was highly likely the AJAX collection caused it. 

Limit usage

If you want to limit usage you have a few options:

  1. Use Sampling: See our documentation page on Sampling.
  2. Use the maxAjaxCallsPerView parameter.
    // Default 500 - controls how many ajax calls will be monitored per page view.
    // Set to -1 to monitor all ajax calls on the page.
    maxAjaxCallsPerView: number;

3. Turn off AJAX auto collection: Learn how to Opt Out in the following section.

Opt Out

AJAX calls are automatically collected. To disable this simply add: disableAjaxTracking: true in your config file. For more details see our documentation.

Please let us know…

The Application Insights JavaScript SDK is a work in progress. For any issues or feature requests please visit our repository. To learn more about dependency collection in general please see our documentation.

The Application Insights team is committed to providing quality tools for developers. We would greatly appreciate any feedback or new feature recommendations.

  • Explore

     

    Let us know what you think of Azure and what you would like to see in the future.

     

    Provide feedback

  • Build your cloud computing and Azure skills with free courses by Microsoft Learn.

     

    Explore Azure learning


Join the conversation